Warning: Can't call setState on a component that is not yet mounted

[kart1ka]

I am getting Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. warning in my console (See attached image below) -

I have reproduced the same warning message in my GitHub repo linked below:

https://github.com/kart1ka/form-builder

Just download the code and run npm install and then npm start and you will see the warning message in the console.

The message says that the error is coming from the Preview file of the React Form Builder-2 library.
Can you please take a look at it?
Thank You.

PS - The warning disappears when the <React.StrictMode> is removed from index.js file.

[Kiho]

Please try find answer there - #92

[kart1ka]

I already looked at that issue. I don't think it has the solution to my problem. The link mentioned in that issue suggests a solution for error occurring because of async tasks. But in the repo that I have linked above I do not have any async task running. All I have is a simple Form Builder, a Form Render & a Demobar component in my code. So the warning could not have come from an async task.
Can you please take a look at my repo?
https://github.com/kart1ka/form-builder

[Kiho]

RisingStack/react-easy-state#196 (comment)
Sorry, but I don't have clear idea on this issue.

[kart1ka]

I think I might have figured out why this is happening. This might have to do with the handling of the code related to the subscription in the library.
I googled a bit & found that the subscriptions must be handled inside the componentDidMount and not inside the constructor function of the component.

Below is a link for reference:

https://www.digitalocean.com/community/tutorials/react-constructors-with-react-components#:~:text=For%20things%20like%20subscriptions%20that%20will%20update%20the%20state%20and%20other%20side%2Deffects%2C%20you%20should%20put%20the%20logic%20out%20in%20componentDidMount()%20which%20will%20fire%20immediately%20after%20the%20component%20is%20mounted%20and%20won%E2%80%99t%20give%20you%20any%20trouble%20if%20you%20update%20the%20state%20inside%20of%20it.

So I tried to implement this. As you can see in the image below, I was getting error in three files of React FormBuilder library - Demobar, Preview, and Toolbar.

As you can see in the image below, in the Demobar.js file, the code related to the subscription is also present inside the constructor function.

So, in the Demobar.js file, I moved that code to the componentDidMount function and, as you can see in the image below, the error related to the Demobar file disappeared. It is only showing errors in the Preview & Toolbar files.

Can you please move the lines related to the subsciption, in the Preview.jsx & Toolbar.jsx files, to the componentDidMount from the constructor function?
This might solve the issue.
I have marked the lines, that I think should be moved to the componentDidMount function in the images below:

Thank You.

[Kiho]

Looks like that was the reason of warning, Thanks.