title: why React JS onDrop function not executing synchronously
body: <p>Actually, I am new to react js. I want to upload files on the server on the button click, and onDrop event I want to read files information like total files and files size.
  but my this if statement
  if(filesSize &gt; 10000) {
  console.log('inside if')
  setFileSizeError(true)
  }
  not executing on the first drop
  but working on the second drop, and console.log('inside on drop') executing before for loop.
  where is the problem please tell me.</p>
  <pre><code>import '../../css/dragdropsection.css'
  // import UserMessage from '../messages/UserMessage'
  
  
  function DragDropSection() {
      let [validInput, setValidInput] = useState(undefined)
      let [files, setFiles] = useState([])
      let [filesSize, setFilesSize] = useState(0)
      let [fileSizeError, setFileSizeError] = useState(false)
  
      function handelDragEnter(e){
          e.preventDefault()
          setValidInput(true)
      }
      
      function handelDragLeave(e){
          e.preventDefault();
      }
      
      function handelDragOver(e){
          e.preventDefault();
      }
  
      async function traverseFileTree(item, path) {
          path = path || &quot;&quot;;
          if (item.isFile) {
            // Get file
            item.file(function(file) {
              // console.log(&quot;File:&quot;, path + file.name);
              console.log(file)
              setFiles((pre) =&gt; [...pre, file])
              setFilesSize((pre) =&gt; pre + file.size)
              if(filesSize &gt; 10) {
                  console.log('inside if')
                  setFileSizeError(true)
                  setValidInput(false)   
              }
            })
          } else if (item.isDirectory) {
            // Get folder contents
            let dirReader = item.createReader();
            dirReader.readEntries(function(entries) {
              for (let i=0; i&lt;entries.length; i++) {
                traverseFileTree(entries[i], path + item.name + &quot;/&quot;);
              }
            })
          }
      }
  
      function handelOnDrop(e){
          e.preventDefault()
          setFiles([])
          setFilesSize(0)
          setFileSizeError(false)
          // e.stopPropagation()
  
          let items = e.dataTransfer.items
          for (let i=0; i&lt;items.length; i++) {
              // webkitGetAsEntry is where the magic happens
              let item = items[i].webkitGetAsEntry();
  
              if (item) {
                  traverseFileTree(item)
              }
              else{
                  setFiles([])
                  setFilesSize(0)
                  return setValidInput(false)
              }
          }
  
          console.log('inside on drop after for loop')
          // setValidInput(undefined)
      }
      return (
          &lt;div className=&quot;dragDropSection&quot;&gt;
  
              &lt;div onDragEnter={handelDragEnter} 
                  onDragOver={handelDragOver}
                  onDragLeave={handelDragLeave}
                  onDrop={handelOnDrop}
                  className={` dragZone ${validInput === true?  &quot;dragEnterStyleOnValidInput&quot; :validInput === false? &quot;dragEnterStyleOnInvalidValidInput&quot;: &quot;&quot; }`}&gt;
  
                  &lt;h1 className=&quot;uploadIcon&quot;&gt;&lt;i className=&quot;bi bi-cloud-upload&quot;&gt;&lt;/i&gt;&lt;/h1&gt;
                  &lt;h3&gt;Drag and Drop file here.&lt;/h3&gt;
                  {fileSizeError? 'Upload Error: file Size Greater than 100 MB': '' }
  
              &lt;/div&gt;
  
              &lt;span id=&quot;dragSpan&quot;&gt; browse files. &lt;/span&gt;
  
              &lt;h6&gt;Delete files from cloud after
                  &lt;select name=&quot;expireLinkTime&quot; className=&quot;expireTimeSelector&quot;&gt;
                      &lt;option value=&quot;5&quot;&gt;5&lt;/option&gt;
                      &lt;option value=&quot;10&quot;&gt;10&lt;/option&gt;
                      &lt;option value=&quot;15&quot;&gt;15&lt;/option&gt;
                      &lt;option value=&quot;24&quot;&gt;24&lt;/option&gt;
                  &lt;/select&gt; hours
              &lt;/h6&gt;
  
              {/* &lt;div id=&quot;myProgress&quot;&gt;
                  &lt;div id=&quot;myBar&quot;&gt;20%&lt;/div&gt;
              &lt;/div&gt; */}
  
              &lt;button id=&quot;uploadBtn&quot;&gt;upload files&lt;/button&gt;
          &lt;/div&gt;
      )
  }
  
  export default DragDropSection
  
  
  
  
                
  </code></pre>