<p dir="auto">Describe what you were doing when the bug occurred:<br>
1.<br>
2.<br>
3.</p>
<hr>
<h2 dir="auto">Please do not remove the text below this line</h2>
<p dir="auto">DevTools version: 4.11.0-39713716aa</p>
<p dir="auto">Call stack: at updateTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:20505:53)<br>
at getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:20377:26)<br>
at ProfilingCache_ProfilingCache.getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:20951:11)<br>
at CommitFlamegraphAutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35462:33)<br>
at Rh (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:13245:7)<br>
at Ci (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:13944:7)<br>
at uk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16725:86)<br>
at tk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16245:11)<br>
at qk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16237:23)<br>
at jk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16221:5)</p>
<p dir="auto">Component stack: at CommitFlamegraphAutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35445:34)<br>
at div<br>
at div<br>
at div<br>
at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29121:3)<br>
at Profiler_Profiler (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37243:34)<br>
at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30035:5)<br>
at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30157:5)<br>
at div<br>
at div<br>
at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34264:3)<br>
at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25356:3)<br>
at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25963:3)<br>
at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30300:3)<br>
at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37639:3)</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">Feature</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Consider I want to have a dynamically calculated list of options, and a piece of state that represents the currently selected option. I can achieve this using hooks as follows:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const options = useMemo(() =&gt; {
  // Calculate the options
}, [dep1, dep2]);

const [choice, setChoice] = useState(options[0]);

const result = useMemo(() =&gt; {
  // Calculate the displayed result
}, [choice]);"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">options</span> <span class="pl-c1">=</span> <span class="pl-en">useMemo</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-c">// Calculate the options</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">dep1</span><span class="pl-kos">,</span> <span class="pl-s1">dep2</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">choice</span><span class="pl-kos">,</span> <span class="pl-s1">setChoice</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-s1">options</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">result</span> <span class="pl-c1">=</span> <span class="pl-en">useMemo</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-c">// Calculate the displayed result</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">choice</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">However, a problem occurs if either <code class="notranslate">dep1</code> or <code class="notranslate">dep2</code> changes. The list of options changes, which means <code class="notranslate">choice</code> may no longer be valid. To fix this, I must split <code class="notranslate">choice</code> into a selected value and a memoized value that checks for validity:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const [selectedChoice, setSelectedChoice] = useState(options[0]);

const choice = useMemo(() =&gt; {
  if (options.includes(selectedChoice) {
    return selectedChoice;
  } else {
    setSelectedChoice(options[0]);
    return options[0];
  }
}, [options, selectedChoice]);"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">selectedChoice</span><span class="pl-kos">,</span> <span class="pl-s1">setSelectedChoice</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-s1">options</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">choice</span> <span class="pl-c1">=</span> <span class="pl-en">useMemo</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">options</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s1">selectedChoice</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-s1">selectedChoice</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
    <span class="pl-s1">setSelectedChoice</span><span class="pl-kos">(</span><span class="pl-s1">options</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-s1">options</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">options</span><span class="pl-kos">,</span> <span class="pl-s1">selectedChoice</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">It would useful if we could declare dependencies for <code class="notranslate">useState</code>, in the same way that we can for <code class="notranslate">useMemo</code>, and have the state reset back to the initial state if they change:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const [choice, setChoice] = useState(options[0], [options]);"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">choice</span><span class="pl-kos">,</span> <span class="pl-s1">setChoice</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-s1">options</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">options</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">In order to allow preserving the current value if its valid, React could supply <code class="notranslate">prevState</code> to the initial state factory function, if any exists, e.g.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const [choice, setChoice] = useState(prevState =&gt; {
  if (prevState &amp;&amp; options.includes(prevState) {
    return prevState;
 else {
    return options[0];
 }
}, [options]);"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">choice</span><span class="pl-kos">,</span> <span class="pl-s1">setChoice</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s1">useState</span><span class="pl-kos">(</span><span class="pl-s1">prevState</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">prevState</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">options</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s1">prevState</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-s1">prevState</span><span class="pl-kos">;</span>
 <span class="pl-s1">else</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-s1">options</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
 <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">options</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<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">16.8.0-alpha.1</p>