Memory leaks

Learn memory leak detection and prevention.

Memory leak

A memory leak is when unused objects are not cleaned from memory. In React Native the most common causes are uncleaned setInterval, removed subscriptions and stray setTimeout.

When a component unmounts, all side effects must be cleaned. useEffect returns a cleanup function that clears timers and subscriptions. Otherwise the component stays in memory even after unmount.

Cleaning subscriptions

Event subscriptions, native module subscriptions and WebSocket connections must be removed on unmount. Otherwise the old component keeps receiving events; this is both a memory and a behavior bug.

Example: DeviceEventEmitter.addListener returns a subscription. Inside useEffect you call subscription.remove(). The same rule applies to NetInfo.addEventListener.

Exercise Clean up the timer

Write a useEffect. Inside, call setInterval(tick, 1000) and assign the id to an id variable. The cleanup function should be () => clearInterval(id). Import useEffect from React.

Show example solution

import React, { useEffect } from 'react';

function tick() {}

export default function App() {
  useEffect(() => {
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);
  return null;
}

Test yourself

Write the useEffect cleanup return

useEffect(() => {
  const id = setInterval(tick, 1000);
  ____;
}, []);

Show answer

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);

Match the memory leak causes

setInterval

Uncleaned timer
addListener

Subscription leak
setTimeout

Pending timer
WebSocket

Open connection
What should happen when a component unmounts?
- The useEffect cleanup function runs
- State is reset
- A new component is added
- The app closes
Show answer

A new component is added — The cleanup function runs on unmount.

Next lesson: Summary - Performance engineering

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies