title: not able to clear Interval using variable which is outside the react hook
body: <p>I am trying to access <code>clearTimerInterval</code> in <code>clearTimer</code> method but getting undefined , got the waring <code>variable from inside React Hook will be lost after each render</code>. in below code <code>useEffect</code> hook called once once then how variable <code>clearTimerInterval</code> got undefined?</p>
  
  <pre><code>function Child(props) {
            let [timerCount, setTimer] = useState(0);
            var clearTimerInterval;
            useEffect(() =&gt; {
              clearTimerInterval = setInterval(() =&gt; {
                setTimer(timerCount =&gt; {
                  return timerCount + 1;
  
                });
              }, 1000);
              return () =&gt; {
                clearInterval(clearTimerInterval);
              };
            }, []);
  
            function clearTimer() {
              clearInterval(clearTimerInterval);
            }
            return (
              &lt;div&gt;
                &lt;div&gt;Timer {timer}&lt;/div&gt;
                &lt;button onClick={clearTimer}&gt;ClearTimer&lt;/button&gt;
              &lt;/div&gt;
            );
          }
  
          export default React.memo(Child);
  </code></pre>