<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug (maybe)</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
If wrapped in React.StrictMode and a function component contains a call to <code class="notranslate">useState</code>, the function (render) is called twice - even if the state setter is never called.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.</strong><br>
<a href="https://codesandbox.io/s/lyw9514j4q" rel="nofollow">https://codesandbox.io/s/lyw9514j4q</a><br>
(please see console)</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
I would expect it to only render once.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
16.8.3 in Chrome on macOS Mojave; requires hooks so not tested with previous versions.</p>
<p dir="auto">This may be related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="328581639" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/12961" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/12961/hovercard" href="https://github.com/facebook/react/issues/12961">#12961</a> - but note that nowhere am I setting state (only initializing it).</p>
<p dir="auto">If this is expected behavior please feel free to close. Thank you!</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Probably a feature, I'd like to know why the <code class="notranslate">useState</code> hook does not have a second argument to compare inputs similar to other hooks.</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">I'm trying to implement custom hooks for a <a href="https://github.com/peterjuras/react-time-sync/tree/feature/hooks">timer and countdown library</a> that we use at work. However, for this example I would like to describe a more minimal example with a counter that counts up from a provided initial value.</p>
<p dir="auto">I created a <a href="https://codesandbox.io/s/p3njq3w6vm" rel="nofollow">small fiddle</a> with a custom hook <code class="notranslate">useCountUp</code> that takes an initial value and increments it each second. The counter should reset itself, when the initialValue that is passed to the custom hook changes. As the fiddle demonstrates, it is currently not really possible to reset the state of the <code class="notranslate">useState</code> hook. As a hack, the hook compares the inputs in a <code class="notranslate">useMemo</code> function and updates the state in the next <code class="notranslate">useEffect</code> run. This however, leads to a duplicate render, which would not be necessary.</p>
<p dir="auto">My question: Why did the <code class="notranslate">useState</code> hook API not receive a second argument to use reset the state to the provided initalValue when certain inputs change, similar to <code class="notranslate">useMemo</code>, <code class="notranslate">useEffect</code> and other hooks? Without this, we need to re-render twice with the same state in this example to ensure that the counter's state is consistent.</p>
<p dir="auto">As a comparison, a Component with render props would have no problems with reseting the state when necessary: <a href="https://codesandbox.io/s/3vrpnxo2kq" rel="nofollow">https://codesandbox.io/s/3vrpnxo2kq</a></p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">React Version: 16.7.0-alpha.2-next</p>