title: Value from useRef React hook has initial value only
body: <p>I'm trying to use a hook to store state. This hook exposes the reference to the value and a simple mutator function. I would like to have a different updater hook which uses said mutator. While in the updater the value is correct, if I have yet another hook the value is always the initial value. Here is an example which reproduces the issue.</p>
  
  <pre><code>import React, { useEffect, useRef } from "react";
  
  function useCounter() {
    const counter = useRef&lt;number&gt;(0);
  
    const increment = () =&gt; {
      counter.current++;
    };
  
    return [counter, increment] as const;
  }
  
  function useUpdate() {
    const [counter, increment] = useCounter();
  
    console.log("rendering update");
  
    return () =&gt; {
      increment();
  
      console.log(counter.current);
    };
  }
  
  function useLoop() {
    const update = useUpdate();
    const [counter] = useCounter();
  
    console.log("rendering loop");
  
    return () =&gt; {
      update();
      console.log(counter.current);
    };
  }
  
  export default function App() {
    const loop = useLoop();
  
    useEffect(() =&gt; {
      const id = window.setInterval(loop, 1000);
  
      return () =&gt; {
        window.clearInterval(id);
      };
    }, [loop]);
  
    return &lt;div /&gt;;
  }
  </code></pre>
  
  <p>Inside useUpdate the value of the counter is correct, but inside useLoop it is always 0. I'm using a ref because the hooks shouldn't need to be re-run when the counter changes and because it is an object, the function returned from loop should take it by reference and always have to most up-to-date value, but that isn't the case. 
  My goal is to use a similiar pattern to write a simulation combined with p5js. This issue is not at all related to p5, so I simply mocked its update functionality.
  I tried using useState, useCallback but nothing worked.</p>
  
  <p><a href="https://codesandbox.io/s/gracious-chatterjee-eyd85?file=/src/App.tsx:0-822" rel="nofollow noreferrer">Codesandbox</a></p>
  
  <p>I'm new to hooks and this pattern might be completely wrong. I'd welcome tips about advanced decomposition with hooks.</p>
  
  <p>Thank you!</p>
  
  <p>EDIT:</p>
  
  <p>The problem is that useCounter runs twice and creates two different, unrelated instances. Here is my proposed solution for state decomposition:</p>
  
  <pre><code>import React, { useEffect, useRef } from "react";
  
  function useCounter() {
    const counter = useRef&lt;number&gt;(0);
  
    const increment = () =&gt; {
      counter.current++;
    };
  
    return { counter, increment };
  }
  
  function useUpdate({ counter, increment }) {
  
    console.log("rendering update");
  
    return () =&gt; {
      increment();
  
      console.log(counter.current);
    };
  }
  
  function useLoop(state) {
    const update = useUpdate(state);
  
    console.log("rendering loop");
  
    return () =&gt; {
      update();
      console.log(state.counter.current);
    };
  }
  
  export default function App() {
  
    const state = useCounter();
    const loop = useLoop(state);
  
    useEffect(() =&gt; {
      const id = window.setInterval(loop, 1000);
  
      return () =&gt; {
        window.clearInterval(id);
      };
    }, [loop]);
  
    return &lt;div /&gt;;
  }
  </code></pre>