😓 I have some issue in React

I couldn't understand this issue.
please explain me about this.
I attach source code and error image.
https://github.com/elitesuper/my_issue/blob/main/CollectionUpload.tsx

Top comments (5)

Thomas Werner • Nov 15 '22 • Edited

The React error message tells you exactly what the problem is. The CollectionUpload component state is being updated while rendering the component UploadProgress.

So let's break down what's happening here.

Function Component Render Cycle

In a React function component the function body is basically the render method of the component. Whatever happens inside the function component body, happens during that component's render cycle.

function MyComponent() {
    // Any code here runs during the render cycle of MyComponent

    return <div>Some result</div>;
}

You need to be careful with updating state from there, especially when it's the state of another component.

Cause Of The Error Message

Your UploadProgress component has the following lines of code that probably cause the problem:

    if (progressData && progressData.completed > progress) {
      setProgess(() => progressData.completed);
      setupload(true);
    }

It's the setupload(true) call which updates the state of the CollectionUpload component while UploadProgress is being rendered.

Effect Hooks Solve The Problem

Effect hooks can be used for deferring the execution of code after the component was rendered, so basically after the function component was called and returned its render result. You can look at them as callback functions that are queued for execution after component rendering took place.

function MyComponent() {
    // Any code here runs during the render cycle of MyComponent

    useEffect(() => {
        // This code here runs after MyComponent was rendered, and when
        // the values in the dependency array have changed or when MyComponent
        // was rendered for the first time
    }, [someDependency])

    return <div>Some result</div>;
}