DEV Community: Jonathan Experton

How to fix the React memory leak warning

Jonathan Experton — Wed, 14 Apr 2021 12:52:48 +0000

If you've ever worked with React function components and the useEffect hook, it's almost impossible that you've never faced 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.

This is the warning I'm referring to as the React memory leak warning because it is very easy to trigger and hard to get rid of if you don't understand what's happening.

Explaining the warning

There are 4 important concepts here:

Can't perform a React state update
on an unmounted component.
To fix, cancel all subscriptions and asynchronous tasks
in a useEffect cleanup function.

I won't explain what a memory leak is, instead I'll encourage you to read what is my go-to article about memory management in Javascript.

What is a state update?

Given the following state initialization:

const [isVisible, setIsVisible] = useState(true);

A state update would be:

setIsVisible(false);

What is an unmounted component?

A component is unmounted when it is removed from the DOM. It is the final step of a React component's life cycle.

What are subscriptions and asynchronous tasks?

Asynchronous tasks are callbacks sent to the queue of callbacks of the event loop. They are asynchronous because they won't be executed until some conditions are met.

Any mechanism that can add a callback to the queue of callbacks, thereby deferring its execution until the fulfillment of a condition, can be considered as a subscription:

Promises when fulfilled or rejected
setTimeout and setInterval when a certain time has elapsed
Events when the event occurs

I've skipped setImmediate since it's not a web standard, and I'm simplifying things by referring to a unique queue of callbacks when there's in fact multiple queues with different levels of priority.

Case 1 - Asynchronous task in a Promise handler

someAsyncFunction().then(() => {
  // Here is the asynchronous task.
});

someAsyncFunction() returns a Promise we can subscribe to by calling the then() method with a callback function as the task to execute when someAsyncFunction() resolves.

Case 2 - Asynchronous task in a `setTimeout` handler

setTimeout(() => {
  // Here is the asynchronous task.
});

setTimeout is usually called with a delay as a second argument, but when left empty, the event handler will be executed as soon as the event loop starts to process the queue of callbacks, but it is still asynchronous and has a significant chance to be executed after the component has been unmounted.

Case 3 - Asynchronous task in an event handler

Dimensions.addEventListener('change', ({ screen }) => {
  // Here is the asynchronous task.
});

Subscribing to an event is done by adding an event listener and passing a callback function to the listener.

Until the event listener is removed or the event emitter is destroyed, the callback function will be added to the queue of callbacks on every event occurrence.

Asynchronous tasks are side effects

In React functional components any side effects such as data fetching or event handling should be done inside a useEffect:

useEffect(() => {
  someAsyncFunction().then(() => {
    // Here is an asynchronous task.
  });

  Dimensions.addEventListener('change', ({ screen }) => {
    // There is another asynchronous task.
  });
}, []);

What is a useEffect cleanup function?

Every effect may return a function that cleans up after it. This function is called when the component is unmounted.

useEffect(() => {
  return () => {
    // This is the cleanup function
  }
}, []);

What is wrong?

React is telling us to stop trying to update the state of a component that has been deleted.

Case 1 - Asynchronous task in a Promise handler

useEffect(() => {
  someAsyncFunction().then(() => {
    setIsVisible(false);
  });
}, []);

Because we've subscribed to a Promise, there's a pending callback, waiting for the Promise to settle, regardless of whether it has been fulfilled or rejected.

If the React component is unmounted before the Promise completion, the pending callback stays in the callback queue anyway.

And once the Promise has settled, it will try to update the state of a component that doesn't exist anymore.

Case 2 - Asynchronous task in a `setTimeout` handler

useEffect(() => {
  setTimeout(() => {
    setIsVisible(false);
  }, 5000);
}, []);

This code is close to the previous case except that the condition for the callback to be executed is to wait 5000ms.

If the React component is unmounted before this amount of time, it will also try to update the state of a component that doesn't exist anymore.

Case 3 - Asynchronous task in an event handler

useEffect(() => {
  Dimensions.addEventListener('change', ({ screen }) => {
    setDimensions(screen);
  });
}, []);

Attaching handlers to events is different from the previous cases because events can occur multiple times and therefore can trigger the same callback multiple times.

If the event emitter we've bound an event handler is not destroyed when the React component is unmounted, it still exists and will be executed on every event occurrence.

In the above example, the event handler is bound to a global variable Dimensions, the event emitter, which exists outside of the scope of the component.

Therefore, the event handler is not unbound or garbage collected when the component is unmounted, and the event emitter might trigger the callback in the future even though the component doesn't exist anymore.

Fixing the problem

Case 1 - Asynchronous task in a Promise handler

Since it is not possible to cancel a Promise the solution is to prevent the setIsVisible function to be called if the component has been unmounted.

const [isVisible, setIsVisible] = useState(true);

useEffect(() => {
  let cancel = false;

  someAsyncFunction().then(() => {
    if (cancel) return;
    setIsVisible(false);
  });

  return () => { 
    cancel = true;
  }
}, []);

By leveraging lexical scoping, we can share a variable between the callback function and the cleanup function.

We use the cleanup function to modify the cancel variable and trigger an early return in the callback function to prevent the state update.

Case 2 - Asynchronous task in a `setTimeout` handler

To remove a callback bound to a timer, remove the timer:

useEffect(() => {
  const timer = setTimeout(() => {
    setIsVisible(false);
  });
  return () => {
    clearTimeout(timer);
  }
}, []);

Case 3 - Asynchronous task in an event handler

To cancel a subscription to an event, remove the event handler:

const onChange = ({ screen }) => {
  setDimensions(screen);
};

useEffect(() => {
  Dimensions.addEventListener('change', onChange);
  return () => {
    Dimensions.removeEventListener('change', onChange);
  };
}, []);

Conclusion

Global variables are never garbage collected so don't forget to remove event handlers manually if the event emitter is stored in a global variable.
Remove any event handlers bound to event emitters that might not be removed when a component is unmounted.
Promises cannot be cancelled but you can use lexical scoping to change the behavior of the callback from the useEffect cleanup function by triggering an early return or short-circuiting the state update.
Try to avoid timers, if you can't, be sure to always cancel them with clearTimeout or clearInterval.

Photo by Aarón Blanco Tejedor on Unsplash

Ref forwarding with React function components and Typescript

Jonathan Experton — Mon, 29 Mar 2021 15:07:15 +0000

While ref forwarding is well explained in the official documentation, it can be confusing to type it correctly with function components.

1. Typing the reference to be forwarded

The reference is created with the createRef function.

Unlike the useRef hook, which creates a MutableRefObject whose .current property might be initialized with an undefined value, createRef returns an immutable RefObject so you don't need to bother with the initial value type being different than the final value type.

const refTitle: React.RefObject<Text> = React.createRef<Text>();
// In real life, you don't need to explicitly type refTitle

In this example the reference will point to a Text component therefore the Text component is passed to createRef as a type argument to explicitly type the referenced value.

2. Forwarding the reference to the child component

With the ref attribute of the child component:

const ParentComponent: React.FC = () => {
  const refTitle = React.createRef<Text>();
  return (
    <ChildComponent ref={refTitle} title="Hello, World!" />
  );
}

3. Assigning the forwarded ref inside the child component

As said in the documentation:

By default, you may not use the ref attribute on function components because they don’t have instances.

If you want to allow people to take a ref to your function component, you can use forwardRef

Then with the forwardRef function:

interface ChildComponentProps { 
  title: string; 
}

const ChildComponent = React.forwardRef<Text, ChildComponentProps>(
  (
    { title }: ChildComponentProps,
    ref: React.ForwardedRef<Text>,
  ): JSX.Element => {
    return (
      <Text ref={ref}>{title}</Text>
    );
  },
);

// Name the component for debugging purpose and prevent eslint warning.
ChildComponent.displayName = 'ChildComponent';

Now there's an immutable RefObject available in the ParentComponent that points to the Text component inside the ChildComponent.

Concrete example

Here is an example with React Native where you can use ref forwarding to focus the device's screen reader on a text once the whole parent component is ready:

Photo by JC Gellidon on Unsplash

DEV Community: Jonathan Experton

How to fix the React memory leak warning

Explaining the warning

What is a state update?

What is an unmounted component?

What are subscriptions and asynchronous tasks?

Case 1 - Asynchronous task in a Promise handler

Case 2 - Asynchronous task in a setTimeout handler

Case 3 - Asynchronous task in an event handler

Asynchronous tasks are side effects

What is a useEffect cleanup function?

What is wrong?

Case 1 - Asynchronous task in a Promise handler

Case 2 - Asynchronous task in a setTimeout handler

Case 3 - Asynchronous task in an event handler

Fixing the problem

Case 1 - Asynchronous task in a Promise handler

Case 2 - Asynchronous task in a setTimeout handler

Case 3 - Asynchronous task in an event handler

Conclusion

Ref forwarding with React function components and Typescript

1. Typing the reference to be forwarded

2. Forwarding the reference to the child component

3. Assigning the forwarded ref inside the child component

Concrete example

Case 2 - Asynchronous task in a `setTimeout` handler

Case 2 - Asynchronous task in a `setTimeout` handler

Case 2 - Asynchronous task in a `setTimeout` handler