- Read Tutorial
- Watch Guide Video
I'll give you a little bit of a hint. It has to deal with the way the React component life cycle system works. So let's come back to the blog, hit Refresh just to make sure you're working with the latest version of your code, and then from there, let's create a modal, or let's create a blog. I'm going to create it, it doesn't matter what you put in here, and I'm gonna hit Save, and here this warning is.
It says Warning: 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. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
Okay, so this is an interesting one because, one, it's a little bit vague, and also because the fix that they're suggesting would work for certain circumstances, but it will not work for ours, and that is really where the confusion would come in. It's why I wanted to dedicate a full guide to it, and also because as we walk through this, you're going to be able to see some pretty cool things about how React works, and hopefully it'll help you understand the life cycle a little bit more.
So let's get started. I'm gonna open up Visual Studio Code here. And the first thing I'm gonna do is take a look at what is causing this. If you look inside of our handleSubmit method here, you can see that inside of the response, so when the submission is successful and we get the response back, we are calling handleSuccessfullFormSubmission, which is a prop that gets passed down from the blog modal, and then after that, we're calling this.setState.
Okay, so that seems pretty innocuous. It seems like we're not really doing anything too bad here, but this is the cause of the problem, and the way that you can figure this out is let's work our way up the chain of components and see exactly what's happening here. So when we call handleSuccessfullFormSubmission and we open up the blog-modal, we can see that that's a pretty basic process. It is simply taking in a blog and it's passing it up to the component.
So let's open up the blog component, this is like the grandfather component here, and handleSuccessfulNewBlogSubmission takes in a blog, and then it setState, it adds to the blogItems or adds this new blog to the top. And here is the key, this is the issue. We are setting blogModalIsOpen to false, that triggers a full set of events where it closes the modal. When we close the modal, we also close the form.
And if you follow a step-by-step, logical approach to how the entire life cycle works, what is happening here is we're calling this prop, which we just walked through and we saw that that closes the modal and closes the form, which means it destroys the component, and then here, on line 49 we're trying to setState on a component that doesn't exist, and that is what the warning is telling us.
It says Can't perform a React state update on an unmounted component. So what React sees is that the component is down, it's done, it's been destroyed, we don't need it anymore. But then, right after we performed that process, we tried to call setState on it and that's where the problem is. And so, what I'm going to do to fix this is I'm simply gonna take our this.setState and I'm also gonna add content to it to make sure that we've closed this out, and I'm moving it above that call.
So, because we just walked through the entire life cycle, we can see that the modal is not closed until now, after setState has occurred. And so, we've cleared out our state, we're good to go. We're not calling any functions or APIs or processes here. So this.setState, we don't have to wrap it up the way we did with our Rich Text Editor.
We can simply say that we're setting all these values equal to strings, and that's all we need to do. And then from there, we can call handleSuccessfullFormSubmission, and when we've called this.setState, now the blog form we know still exists. So let's hit Save and if we come back to Google Chrome, let's hit Refresh, clear out our console, and now click on a new item and create a new blog here.
Now, if you hit Save, you can see that created it. The blog got hidden, but when we call this.setState, the form still existed and so we no longer are getting that warning. So that is how you can fix that specific warning that tells you that you have a memory leak in your application, that is one way of fixing it.
Now, if you get that error or that warning in another situation where you might have a running process, such as a timer or some type of live API communication, then what you do is then you would follow their advice.
You would create a componentWillUnmount method and then you take each of those subscriptions or those processes, timers, anything like that, and then you cancel those out inside of that function, and then that will fix it as well. So we've talked about two different ways that you can take care of that warning.