React useeffect cleanup subscriptions memory leak

Medium

How to Properly Clean Up Subscriptions in React useEffect Hook to Prevent Memory Leaks

You're debugging a React component that's causing memory leaks. Which implementation properly cleans up subscriptions?

ReactReact hooksUseeffectCleanupMemory leaksSubscriptions

1function DataStream({ source }) {
const [data, setData] = useState([]);
const [isActive, setIsActive] = useState(true);
4
useEffect(() => {
  let subscription;
  
  if (isActive) {
    subscription = source.subscribe({
      next: (value) => {
        setData(prev => [...prev, value]);
      },
      error: (err) => console.error(err)
    });
  }
  
  // Complete the cleanup
  return /* MISSING CODE */
}, [source, isActive]);
20
return (
  <div>
    <button onClick={() => setIsActive(!isActive)}>
      {isActive ? 'Stop' : 'Start'}
    </button>
    <ul>{data.map((item, i) => <li key={i}>{item}</li>)}</ul>
  </div>
);
29}

How to Properly Clean Up Subscriptions in React useEffect Hook to Prevent Memory Leaks

Hint

Related Questions