Kyle Shevlin

Software Engineer



0 strokes bestowed

If you ever find yourself calling a state setter in an async process, there's a reasonable chance that you may call it after the component unmounts and therefore incur an error indicating a memory leak in you application.

The way to solve for this is to prevent the setState call if the component has unmounted. We can track the isMounted state of a hook using a ref, and wrap the state setter to automatically check this value before making its update. Like so:

function useAsyncSafeState(value) {
  // Track the mounted state of the component using the hook
  const isMounted = React.useRef(true)

  // If the component unmounts, update the `isMounted` state
  React.useEffect(() => {
    return () => {
      isMounted.current = false
  }, [])

  const [state, setState] = React.useState(value)

  // Prevent `setState` calls after the component unmounts
  const safeSetState = React.useCallback(update => {
    if (isMounted.current) {
  }, [])

  return [state, safeSetState]

Now you can make use of this in a situation where there's a chance that component unmounts before the state is set. Like fetching data:

function MyComp() {
  const [data, setData] = useAsyncSafeState(null)

  React.useEffect(() => {
    function getData() {
        .then(result => {

  }, [setData]) // linter will not know that this is stable.

  return (
    data && (
        <code>{JSON.stringify(data, null, 2)}</code>

If the user leaves the page with MyComp or its unmounted for some other reason, setData won't create an error.

Finished reading?

Liked the post? Give the author a dopamine boost with a few "beard strokes". Click it up to 50 times show your appreciation.

Are you, or the company you work for, struggling with something mentioned in this article?
Would you benefit from a live training session?
Let's Talk
Kyle Shevlin's face, which is mostly a beard with eyes
Kyle Shevlin is a software engineer who specializes in JavaScript, TypeScript, React and frontend web development.

Let's talk some more about JavaScript, TypeScript, React, and software engineering.

I write a newsletter to share my thoughts and the projects I'm working on. I would love for you to join the conversation. You can unsubscribe at any time.

Array.reduce() Logo

Check out my courses!

Liked the post? You might like my courses, too. Click the button to view this course or go to Courses for more information.
View the course
I would like give thanks to those who have contributed fixes and updates to this blog. If you see something that needs some love, you can join them. This blog is open sourced at
©2023 Kyle Shevlin. All Rights Reserved.