title: React custom hook not receiving current state of value from another custom hook
body: <p>I have an event handler that sets a selected value in a list to <code>[values, setValues]</code> state hook. After doing this, I have a <code>useEffect</code> hook that calls an <code>[options, setOptions]</code> state hook to set that value to the <code>options</code> value. However, although <code>setValues</code> is able to set the state (which is shown when I <code>console.log</code>, setOptions is not able to set the new <code>values</code> state to the <code>options</code> state</p>
  <h3>UPDATE</h3>
  <p>Moving the <code>console.log(options.data)</code> out of the effect solves the problem partially because it logs out the current value, however, returning that value and using it in another custom hook returns the default value of <code>options</code>. I have updated the code.</p>
  <p>I have tried using useRef to get the current value but my implementation is not working. Maybe I am doing that bit wrong.</p>
  <pre><code>   const useFirstCustomHook = () =&gt; {
     const [options, setOptions] = useState({
          data: null
      })
  
      const [values, setValues] = useState({
          name: &quot;&quot;,
          myid: &quot;my-id&quot;
      });
      
      //state changer
      function handleChange(event, id) {
          setValues(oldValues =&gt; ({
            ...oldValues,
            name: event.target.value,
            myid: id.props.id,
          }));
        }
  
        useEffect(() =&gt; {
          setOptions({
              data: values
          })
          
        },[values])
        console.log(options.data) //not printing the current state
       return {
         options
       }
     }
     export default useFirstCustomHook 
  </code></pre>
  <pre><code>   const [waitState, setWait] = useState(0)
     const { values, options } = useFirstCustomHook ()
     
     useEffect(() =&gt; {
        console.log(options)
        let wait = () =&gt; {
              setTimeout(() =&gt; setWait(waitState+1), 10000)
          }
  
        async function fetchData() {
          //fetch some data then wait
          wait()
        }
  
     },[wait])
     export default useFetchedData
  </code></pre>
  <p>I expect the new state of <code>options</code> to be the same as the current value of <code>values</code> but it is only reflecting the default value.</p>