title: how to use useRef to reference latest value
body: <p>People use useRef to save latest value like this code</p>
  
  <pre><code>function MyComponent({ value }) {
    const valueRef = useRef();
    useEffect(() =&gt; {
      valueRef.current = value;
    });
  }
  </code></pre>
  
  <p>I know useEffect needs for concurrent mode.</p>
  
  <p>and useEffect is executed in the order of the definition</p>
  
  <pre><code>function MyComponent({ value }) {
    useEffect(() =&gt; {
      console.log('log1');
    });
    useEffect(() =&gt; {
      console.log('log2');
    });
  }
  // result is
  // log1
  // log2
  </code></pre>
  
  <p>so in the below code,
  log1 is printed with old value and log2 is printed with new value</p>
  
  <pre><code>function MyComponent({ value }) {
    const valueRef = useRef();
    useEffect(() =&gt; {
      console.log('log1', valueRef.current);
    });
    useEffect(() =&gt; {
      valueRef.current = value;
    });
    useEffect(() =&gt; {
      console.log('log2', valueRef.current);
    });
  }
  </code></pre>
  
  <p>I think it's weird because the value is different according to the position.</p>
  
  <p>What is the right way to use useRef to reference latest value?
  (FYI I know it's better to use deps than to use useRef)</p>