title: changes to state issued from custom hook not causing re-render even though added to useEffect
body: <p>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</p>
  
  <pre><code>const useToggle = () =&gt; {
    const reducer = (state, action) =&gt; ({...state, ...action});
    const [toggled, dispatch] = useReducer(reducer, {});
    const setToggle = i =&gt; {
      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 = () =&gt; {
    const {setToggle} = useToggle()
    return Array.from({length: 8}, el =&gt; null).map((el,i) =&gt; 
    &lt;input type="checkbox" onClick={() =&gt; setToggle(i)}/&gt;)
    }
  
  function App() {
    const {toggled} = useToggle()
    const memoized = useMemo(() =&gt; toggled, [toggled])
    useEffect(() =&gt; {
      console.log('toggled state is &gt;&gt;&gt;', toggled) // am not seeing this on console after changes to toggled
    }, [toggled])
  
    return (
      &lt;div className="App"&gt;
        &lt;Boxes /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>