2024-12-02
2438
#react
Chimezie Innocent
72747
Dec 2, 2024 ⋅ 8 min read

Understanding React’s useEffect cleanup function

Chimezie Innocent I am Chimezie, a software developer based in Nigeria. I am highly skilled in HTML, CSS, and JS to build web-accessible and progressive apps. I'm also skilled with React for web, React Native for Android apps, and Tailwind CSS. I write technical articles, too.

Recent posts:

8 best Go web frameworks for 2025

The 8 best Go web frameworks for 2025: Updated list

Looking for the best Go frameworks? Compare the top 8 Go web frameworks for 2025, including Gin, Fiber, Echo, and Beego, with pros, cons, and performance insights.

Victor Jonah
Apr 3, 2025 ⋅ 15 min read
Making Your First Game In Excalibur.js

Game development for frontend: Building with Excalibur.js

Build your first 2D browser game using JavaScript and the Excalibur.js library, covering essential game development concepts.

Yashodhan Joshi
Apr 3, 2025 ⋅ 25 min read
angular vs react

Angular vs. React: Which one should you choose?

Explore the key differences between Angular and React, their strengths, and use cases to help developers decide which option to choose.

Oscar Jite-Orimiono
Apr 2, 2025 ⋅ 5 min read
axios in javascript

Axios in JavaScript: How to make GET, POST, PUT and DELETE requests

Learn how to use Axios in JavaScript for GET, POST, PUT & DELETE requests. Examine setup, error handling, and API best practices.

Faraz Kelhini
Apr 1, 2025 ⋅ 19 min read
View all posts

13 Replies to "Understanding React’s <code>useEffect</code> cleanup function"

  1. Wondering if I could get clarification on something that I can’t understand. With the isAPISubscribed example, you declare the isAPISubscribed var and set it to true, but in the clean up you set it to false. But when useEffect fires , isAPISubscribed is declared again and set to true. If it’s set to false in the clean up, but then it’s set to true when useEffect fires, wouldn’t the conditional that checks if it’s truthy always be met and it’s code block would always run? I’m just having a hard time understanding the use of declaring isAPISubscribed to false if it immediately gets set to true when useEffect updates. Thank you.

    1. Okay Jamie, let me explain,

      Firstly, I made an error there. It should be `let isApiSubscribed = true` and not const because const cannot be redeclared,

      Secondly, it works just as how AbortController and CancelToken works just a different approach. The approach is that state will always and only update when our condition is true or checks for truthy but when our component unmounts, the condition is changed to false in the cleanup function. Remember, what we are trying to achieve is that when out component unmounts, state does not update.

      Thirdly, concerning the part you find hard to understand. When our component unmounts, useEffect checks the cleanup function and if there is a code block there, executes it so when we set isApiSubscribed to false, useEffect therefore changes the condition to false and hence, state won’t update because state only updates when condition is true.

      1. Hi, Chimezie. Thanks for responding. What I can’t wrap my head around is the value of isApiSubscribed during the time span of when the component unmounts and when the clean up function actually fires. The clean up function sets isApiSubscribed to false, but the clean up function only fires right before useEffect fires again. So wouldn’t that mean that during the time span of the unmount and remount that isApiSubscribed still true?

        Say you got to a different page. During that time, isApiSubscribed is still true, which would cause the performance issues and leaks that you described. But when we go back to the page which has the useEffect that contains isApiSubscribed, that’s when the clean up function actually fires, right before useEffect is ran and thus setting isApiSubscribed to false.

        When I log out the value of isApiSubscribed from within the clean up function it shows value of false, but it only logs it out right before useEffect runs again. So is isApiSubscribed set to false right when the unmount occurs, or when the clean up function actually runs?

        Apologies for my confusion. Your article was written very well and my lack of understanding doesn’t come from your explanation, but from the concept of how the clean up function works behind the scenes. No worries if you don’t answer, btw.

  2. thanks for sharing this blog . react native is now used as a framework for hybrid app development as well . its a good framework to work with for application development

  3. Fantastic ! such a nice and informative blog, I appreciate you taking the time and making the effort to create this content. Thank you for sharing.

  4. Useful to note EffectCallback type, which provided by library. Return type of such effect function should be a cleanup function. Taking mentioned in account you should think about your effect -> what it should return to be used in useEffect like useEffect(wellWrittenFunctionEffectCallbackTyped, depsArr)

Leave a Reply