title: Interval inside React useEffect - store it in a useRef Hook to preserve value overtime warning
body: <p>So I have this method:</p>
  
  <pre><code>useEffect(() =&gt; {
      //.. other logic here
  
      // Firefox doesn't support looping video, so we emulate it this way
      video.addEventListener(
        "ended",
        function() {
          video.play();
        },
        false
      );
    }, [videoWidth, videoHeight]);
  
  </code></pre>
  
  <p>Now it throws an error where it says: </p>
  
  <pre><code>Assignments to the 'interval' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect.
  </code></pre>
  
  <p>I am confused on what does this mean? especially this part: <code>To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property</code>.</p>