Prevent component as array element from re-render when the parent array changes in React

Question

I want to create a simple files uploader, I have listOfFiles coming from dropzone drag and drop already.

A simple loop over the files

{listOfFiles.map((file, i) => (
  <SingleFile
    key={i}
    index={i}
    file={file}
    handleDelete={handleDelete}
  />
))}

Inside of SingleFile I do axios API calls to upload the file when the component mount using useEffect simplified as this:

useEffect(() => {
  if (!props.file) return;
  // ...
    // Axios call and bunch of states changes.
  // ...
}, [props.file]);

Upload process is just fine & When I do drag another files it works, New files added to listOfFiles and then start uploading.

Now when I click on the delete button inside SingleFile, handleDelete on parent component fires to delete the files with the specific index.

<button onClick={props.handleDelete(index)}> Delete </button>

on handleDelete

setListOfFiles((listOfFiles) => listOfFiles.filter((f, i) => i !== index));

Now the problem is when I delete a SingleFile the listOfFiles array is updated and each array element which is a SingleFile component is re-rendered and the upload axios call is called again... etc.

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.

Cully · Accepted Answer · 2020-04-07 05:08:34Z

It's likely re-rendering because the key on each SingleFile component is just the index of the corresponding item in the listOfFiles array. React uses key to keep track of which item is which when a list of components is rendered. So if you have:

const listOfFiles = [
  'file0',
  'file1',
  'file2',
  'file3',
]

You'd have these compoments:

<SingleFile key=0 file='file0' />
<SingleFile key=1 file='file1' />
<SingleFile key=2 file='file2' />
<SingleFile key=3 file='file3' />

The key is just the index from the array. So if you remove let's say the second element (i.e. element with index 1, 'file1'), then react will think that all the elements after it have changed (because they now have different data). You end up with this array:

const listOfFiles = [
  'file0',
  // 'file1', // this element was removed
  'file2',
  'file3',
]

And these compoments:

<SingleFile key=0 file='file0' />
<SingleFile key=1 file='file2' />
<SingleFile key=2 file='file3' />

See how keys 1 and 2 now have file2 and file3, where before they had file1 and file2? React now thinks that the components with keys 1 and 2 have changed, and will re-render. Also, since file has changed, your useEffect call will be run again.

The solution is to set the key to something unique to each file, something that won't change if one of the files is deleted. The file name could potentially be that:

{listOfFiles.map((file, i) => (
  <SingleFile
    key={file.name}
    index={i}
    file={file}
    handleDelete={handleDelete}
  />
))}

Though there's a chance multiple files could have the same name, and React doesn't allow duplicate keys. A potentially better solution is to add a timestamp of when the file was uploaded (in microseconds) and include that in your file object. There's still a chance of duplicates, but much less likely:

{listOfFiles.map((file, i) => (
  <SingleFile
    key={file.uploadedStamp}
    index={i}
    file={file}
    handleDelete={handleDelete}
  />
))}

Actually, maybe even a better solution is to just add a random value as a unique id for each file, when it's uploaded. Then use that unique id as your key:

{listOfFiles.map((file, i) => (
  <SingleFile
    key={file.id}
    index={i}
    file={file}
    handleDelete={handleDelete}
  />
))}

You might also want to use that id to identify the file yourself, instead of using index:

{listOfFiles.map((file) => (
  <SingleFile
    key={file.id}
    id={file.id}
    file={file}
    handleDelete={handleDelete}
  />
))}

Then your button and handleDelete would look something like this:

<button onClick={() => props.handleDelete(props.id)}> Delete </button>

const handleDelete = (idToRemove) => {
  setListOfFiles(listOfFiles.filter((f) => f.id !== idToRemove));
}

Collectives™ on Stack Overflow

Prevent component as array element from re-render when the parent array changes in React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related