DEV Community

Dmitri Pisarev 🇷🇺
Dmitri Pisarev 🇷🇺

Posted on

1 1

The most common React mistake

Have you ever ran into this warning?

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 a useEffect cleanup function.

I bet this is the most common ReactJS newbie mistake... Forgetting to clean up your effects.

Stumbled over it again and here's how I fixed it: https://github.com/dimaip/calendar/commit/c20274917feff86af859f7252b717b84936ba865

Top comments (1)

Collapse
 
nans profile image
Nans Dumortier

Heya !
I was facing the exact same issue, so I created this hook :
npmjs.com/package/use-state-if-mou...
It basically works like React's useState, but it only updates the state if the component is mounted !
I thought it's an easy and elegant solution for that issue, what do you think ?

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay