Unmount

Learn the component unmount event.

Unmount

A component unmounts when it is removed from the screen. This is the end of its lifecycle. React disposes the component and releases its event listeners and subscriptions.

To clean up on unmount, useEffect returns a cleanup function. This function runs right before the component is removed, or before the next effect run.

Using cleanup

If you set up a setInterval or addEventListener, you must clean it up. The cleanup returned by the useEffect function releases the resource.

Example: useEffect(() => { const id = setInterval(tick, 1000); return () => clearInterval(id); }, []). The timer starts on mount and is cleared on unmount. This prevents memory leaks.

Exercise Set up and clear a timer

Set up a setInterval and call clearInterval as cleanup. The timer should be cleared when the component is removed.

Show example solution

import React, { useState, useEffect } from 'react';
import { Text } from 'react-native';

export default function Clock() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <Text>{tick}</Text>;
}

Test yourself

When is the cleanup function called?
- Right before the component is removed
- Only during mount
- Never
- Only on a style change
Show answer

Right before the component is removed — Cleanup runs right before unmount.
Unmount concepts

unmount

Removal moment
cleanup

Cleanup function
return

Returns cleanup
subscription

Released

Return cleanup

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

Show answer

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

Next lesson: useEffect lifecycle

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies