<p dir="auto">In React, there is a very common issue of needing the most up-to-date version of state from inside a <code class="notranslate">useEffect</code>, timeout, callback, asynchronous function, etc. It seems the easiest solution is to use a ref, as encouraged by React's own documentation <a href="https://reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function" rel="nofollow">here</a>:</p>
<blockquote>
<p dir="auto">If you intentionally want to read the latest state from some asynchronous callback, you could keep it in a ref, mutate it, and read from it.</p>
</blockquote>
<p dir="auto">Typically, the pattern I use for this is as follows:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const [value, setValue] = useState('some-initial-value');
const valueRef = useRef(value);
valueRef.current = value;"><pre class="notranslate"><code class="notranslate">const [value, setValue] = useState('some-initial-value');
const valueRef = useRef(value);
valueRef.current = value;
</code></pre></div>
<p dir="auto">This ensure that on every render we update the ref to contain the latest version of the <code class="notranslate">value</code> state. This works fine, but it's messy - 3 lines of code instead of 1 for every state we need the latest version of. For components with a lot of <code class="notranslate">useState</code> calls this gets really ugly really fast for something that's remarkably simple and doesn't affect performance.</p>
<p dir="auto">My feature request is this: can we just get a ref that points back to the most recent value of state as part of the <code class="notranslate">useState</code> call? I'd love to be able to do this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const [value, setValue, valueRef] = useState('some-initial-value');"><pre class="notranslate"><code class="notranslate">const [value, setValue, valueRef] = useState('some-initial-value');
</code></pre></div>
<p dir="auto">And then just reference <code class="notranslate">valueRef.current</code> from within effects, timeouts, intervals, event listener functions, etc. The amount of times I have to use the messy ref workaround is frustrating, and this looks like something React would be able to do so easily just by sticking the latest value in the ref on every render. People could then use it if they want it or continue to call useState() as normal otherwise.</p>
<p dir="auto">Would certainly clean up my company's codebase markedly. Are there any potential downsides to providing this optional ref that I am missing?</p>
<p dir="auto">I am using react0.14.7 and webpack for my project. It works perfectly fine.</p>
<p dir="auto">However, when I try to upgrade to react15, I pops up such an error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component\'s render method, or you have multiple copies of React loaded."><pre class="notranslate"><code class="notranslate">addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component\'s render method, or you have multiple copies of React loaded.
</code></pre></div>
<p dir="auto">This is a very classic issue (<a href="https://gist.github.com/jimfb/4faa6cbfb1ef476bd105">https://gist.github.com/jimfb/4faa6cbfb1ef476bd105</a>).</p>
<p dir="auto">Why it works in react0.14.7 but fails for react15?</p>
<p dir="auto">Could any one answer?</p>