title: Cleaning Function not Working in UseEffect Hook During Component Unmount in React Native
body: <p>In react native app, there are two components <code>A</code> and <code>B</code> in <code>App.js</code> which toggle with <code>k</code> state change.</p>
  <p><code>App.js</code></p>
  <pre><code>...
  
  const App = () =&gt; {
        const [ k, setK ] = useState(false);
  
        const toggleK = () =&gt; setK(!k);
  
        if(k) {
              return &lt;A /&gt;;
        }else {
              return &lt;B toggleK={toggleK} /&gt;;
        }
  };
  ...
  </code></pre>
  <p>In <code>A</code>, <code>setInterval</code> is initialized in <code>useffect</code>. It calls async function every 10 seconds. But when it unmounts on <code>K</code> state change in <code>App.js</code>, the cleaning function is not run (no <code>A unmounting...</code> is logged) and so does the <code>clearInterval</code>.</p>
  <p>Any thing I'm doing wrong here?</p>
  <pre><code>...
  
  const A = () =&gt; {
        const [ someState, setSomeState ] = useState(...);
  
        let timer;
  
        useEffect(() =&gt; {
              if(!timer) {
                    timer = setInterval(async () =&gt; await run_async_func(), 10000);
              }
  
              return () =&gt; {
                    console.log('A unmounting...');
                    clearInterval(timer);
              };
        }, [ someState ]);
  };
  ...
  </code></pre>