title: use Effect not being called as expected
body: <p>I am trying to implement a simple file upload drop zone in React:</p>
  <pre><code>import { useState, useEffect } from 'react';
  import './App.css';
  
  const  App = () =&gt; {
    const [isDropzoneActive, setIsDropzoneActive] = useState(false);
    const [files, setFiles] = useState([]);
    const [currentChunkIndex, setCurrentChunkIndex] = useState(null);
  
    const handleDragOver = e =&gt; {
      e.preventDefault();
      setIsDropzoneActive(true);
    };
  
    const handleDragLeave = e =&gt; {
      e.preventDefault();
      setIsDropzoneActive(false);
    };
  
    // Update the files array
    const handleDrop = e =&gt; {
      e.preventDefault();
  
      setIsDropzoneActive(false);
      // Just overwrite for this simple example
      setFiles(e.dataTransfer.files);
    };
  
    // Monitor the files array
    useEffect(() =&gt; {
      if (files.length &gt; 0) {
        console.log('got a file');
  
        setCurrentChunkIndex(0);
      }
    }, [files]);
  
    // Monitor the chunk index
    useEffect(() =&gt; {
      if (currentChunkIndex !== null) {
        readAndUploadCurrentChunk();
      }
    }, [currentChunkIndex]);
  
    const readAndUploadCurrentChunk = () =&gt; {
      // Implement later
    };
  
    return (
      &lt;div
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        className={&quot;dropzone&quot; + (isDropzoneActive ? &quot; active&quot; : &quot;&quot;)}
      &gt;
          {files.length &gt; 0 ? 'Uploading' : 'Drop your files here'}
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>However it seems that the effect that monitors <code>[currentChunkIndex]</code> is not being called correctly. I have attempted to drag files into the drop zone, one by one. <code>[files]</code> effect it called correctly each time but the effect on <code>[currentChunkIndex]</code> doesn't get called. What am I doing wrong here?</p>