title: Make useMemo recalculate only when dependency changes to certain value, not on all of its changes
body: <p>In the code below, I want <code>successValue</code> to be recalculated only when the state changes to 'success', and not 'fail' or 'loading' or 'init'. Therefore, I am providing <code>state === success</code> as dependency to <code>useMemo</code>:</p>
  <pre><code>import React, { useMemo, useEffect, useState } from 'react';
  import { render } from 'react-dom';
  
  type Status = 'init' | 'loading' | 'fail' | 'success'
  
  const App = () =&gt; {
    const [state, setState] = useState&lt;Status&gt;('init')
  
    const successValue = useMemo(() =&gt; {
      if (state === 'success') {
        return 'success value'
      }
      return 'fallback value'
    }, [state === 'success'])
  
    useEffect(() =&gt; {
      setTimeout(() =&gt; setState('success'), 1000)
    }, [])
  
    return (
      &lt;div&gt;
        &lt;div&gt;Status: {state}&lt;/div&gt;
        &lt;div&gt;Success value: {successValue}&lt;/div&gt;
        &lt;button onClick={() =&gt; setState('loading')}&gt;Loading&lt;/button&gt;
        &lt;button onClick={() =&gt; setState('fail')}&gt;Fail&lt;/button&gt;
        &lt;button onClick={() =&gt; setState('success')}&gt;Success&lt;/button&gt;
      &lt;/div&gt;
    )
  }
  
  render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  <p>Here is an <a href="https://stackblitz.com/edit/react-ts-bbnuf4?file=index.tsx" rel="nofollow noreferrer">interactive demo</a>: you will see that if you click 'fail' button for example, the <code>successValue</code> will change to <code>fallback value</code> - and I don't want that, I want it to stay as <code>success value</code>.</p>
  <p>I think I misunderstood <code>useMemo</code> or how the dependencies work. Can someone provide and explanation and help me fix this?</p>