useEffect lifecycle

Learn lifecycle with useEffect.

useEffect as lifecycle

useEffect merges the three lifecycle methods of class components (componentDidMount, componentDidUpdate, componentWillUnmount) into a single hook. The dependency array decides when it runs.

An empty array [] runs only on mount; a filled array [a, b] runs on mount and when a or b changes; no array runs on every render. Returning a cleanup adds unmount behaviour.

Exercise Track userId changes

Add a useEffect. Inside it, log console.log('user: ' + userId) and put userId in the dependency array.

Show example solution

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

export default function Profile({ userId }) {
  useEffect(() => {
    console.log('user: ' + userId);
  }, [userId]);
  return <Text>{userId}</Text>;
}

Three behaviours

useEffect offers three core behaviours. Empty array for mount only; a filled array for a changing value; no array for every render. A cleanup can be returned in any case.

These three behaviours let you tune side effects to the lifecycle with a single hook. Picking the right array prevents unnecessary runs and leaks.

Test yourself

What happens if you provide no dependency array?
- Runs only on mount
- Runs on every render
- Runs only on unmount
- Never runs
Show answer

Runs on every render — With no array, the effect runs on every render.

Track count changes

useEffect(() => { save(count); }, [____]);

Show answer

useEffect(() => { save(count); }, [count]);

Match array behaviour

[]

Mount only
[count]

Mount + count change
no array

Every render
cleanup

Before unmount

Next lesson: Layout effect

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies