changes to state issued from custom hook not causing re-render even though added to useEffect

Question

I have a custom hook that keeps a list of toggle states and while I'm seeing the internal state aligning with my expectations, I'm wondering why a component that listens to changes on the state kept by this hook isn't re-rendering on change. The code is as follows

const useToggle = () => {
  const reducer = (state, action) => ({...state, ...action});
  const [toggled, dispatch] = useReducer(reducer, {});
  const setToggle = i => {
    let newVal;
    if (toggled[i] == null) {
      newVal = true;
    } else {
      newVal = !toggled[i];
    }
    dispatch({...toggled, [i]: newVal});
    console.log('updated toggled state ...', toggled);
  };
  return {toggled, setToggle};
};

const Boxes = () => {
  const {setToggle} = useToggle()
  return Array.from({length: 8}, el => null).map((el,i) => 
  <input type="checkbox" onClick={() => setToggle(i)}/>)
  }

function App() {
  const {toggled} = useToggle()
  const memoized = useMemo(() => toggled, [toggled])
  useEffect(() => {
    console.log('toggled state is >>>', toggled) // am not seeing this on console after changes to toggled
  }, [toggled])

  return (
    <div className="App">
      <Boxes />
    </div>
  );
}

Answer 1

It's because you are using useToggle twice.

1. once in the App
2. another one in the Boxes.

When you dispatch the action in Boxes, it's updating the toggled instance for Boxes (which is not retrieved in it).

Think of your custom hook like how you use useState. When you use useState, each component gets its own state. Same goes for the custom hook.

So there are a few ways you can address the issue.

1. Pass the setToggle from App to Boxes via prop-drilling
2. Use Context API (or Redux or other statement management library to pass setToggle instance in the App component down)

Here is an example of prop-drilling.
You can follow along

const Boxes = ({ setToggle }) => {
  // const { setToggle } = useToggle();
  return Array.from({ length: 8 }, el => null).map((el, i) => (
    <input key={i} type="checkbox" onClick={() => setToggle(i)} />
  ));
};

function App() {
  const { toggled, setToggle } = useToggle();

  useEffect(() => {
    console.log("toggled state is >>>", toggled); // am not seeing this on console after changes to toggled
  }, [toggled]);

  return (
    <div className="App">
      <Boxes setToggle={setToggle} />
    </div>
  );
}

Note: that I added key props in Boxes using the index i(and it is a bad practice by the way)

You can see that it's now working as you'd expect.