title: Prevent component as array element from re-render when the parent array changes in React
body: <p>I want to create a simple files uploader, I have <code>listOfFiles</code> coming from dropzone drag and drop already.</p>
  
  <p>A simple loop over the files</p>
  
  <pre><code>{listOfFiles.map((file, i) =&gt; (
    &lt;SingleFile
      key={i}
      index={i}
      file={file}
      handleDelete={handleDelete}
    /&gt;
  ))}
  </code></pre>
  
  <p>Inside of <code>SingleFile</code> I do <code>axios</code> API calls to upload the file when the component mount using <code>useEffect</code> simplified as this:</p>
  
  <pre><code>useEffect(() =&gt; {
    if (!props.file) return;
    // ...
      // Axios call and bunch of states changes.
    // ...
  }, [props.file]);
  </code></pre>
  
  <p>Upload process is just fine &amp; When I do drag another files it works, New files added to <code>listOfFiles</code> and then start uploading.</p>
  
  <p>Now when I click on the delete button inside <code>SingleFile</code>, <code>handleDelete</code> on parent component fires to delete the files with the specific index.</p>
  
  <pre><code>&lt;button onClick={props.handleDelete(index)}&gt; Delete &lt;/button&gt;
  </code></pre>
  
  <p>on <code>handleDelete</code></p>
  
  <pre><code>setListOfFiles((listOfFiles) =&gt; listOfFiles.filter((f, i) =&gt; i !== index));
  </code></pre>
  
  <p>Now the problem is when I delete a <code>SingleFile</code> the <code>listOfFiles</code> array is updated and each array element which is a <code>SingleFile</code> component is re-rendered and the upload <code>axios</code> call is called again... etc.</p>
  
  <p>Is there any way to not re-render an Instance of component when another instance changes? to make it depends only on it's state/props when it comes to re-render? and to control it's mount/unmount by unique id or index in the parent array.</p>