SetState inside UseEffect causing infinite loop

user_11949781 0
Viewed 62
export const Upload = ({ initialfileList = [] }) => {
  console.log("called...")
  const [files,setFiles] = useState(initialfileList)
  useEffect(() => {
    setFiles(initialfileList)
  }, [initialfileList])
  return(
    .....
   )
}

I will not be sending initialfileList in intial render. so I'm trying to update the state (files) when intialfileList value Changes. But I'm not able to get why code is going into infinite loop.. Can someone help...

EDIT: what I'm trying to achieve is there are two uploads in the form (say upload A and upload B) and checkbox as well. when the user uploads an image (say imgc) in Upload A and hits the checkbox, I wanted img c to be autouploaded in Upload B as well..

reactjs
2 Answers

Ah, I see. How about this?

export const Upload = ({ initialfileList = [] }) => {
   const [files, setFiles] = useState(initialfileList);
   useEffect(() => {
      function isDifferentFiles(originFiles, newFiles) {
         return originFiles.length !== newFiles.length; // or whatever logic here.
      }
      if (isDifferentFiles(files, initialfileList)) {
         setFiles(initialfileList);
      }
   }, [initialfileList]);
   return <div>{files.length}</div>;
};

Btw, you might need to consider move the state to parent.

user_18408940

It sounds like you need to lift your state up - rather than storing fileLists locally, store a single fileList in the parent component, pass that down to both Upload A and Upload B, and also pass a setFileList function (which updates the state in the parent component).

i.e.:

// parent component
const Parent = () => {
    const [fileList, setFileList] =  useState([])
    return (
        <Upload fileList={fileList} setFileList={setFileList} />
        <Upload fileList={fileList} setFileList={setFileList} />
    )
}

const Upload = ({fileList, setFileList}) => {
    return (
        <UploadComponent files={fileList} onUpload={setFileList} />
    )
}

This way, either upload component being updated will update both.

user_75062590
Related