Summary - Lifecycle

Combine mount, update and unmount to write a resource manager.

Summary - Lifecycle

The lifecycle has three phases: mount (first render), update (re-render on a state/prop change), and unmount (removal). useEffect unifies all three in one hook.

An empty array runs on mount, a filled array on the relevant change, and no array on every render. Returning a cleanup adds unmount behaviour. Use useLayoutEffect if you see a visual flicker.

Exercise Mount and unmount logs

Log console.log('mounted') on mount and console.log('unmounted') as cleanup. Use an empty dependency array.

Show example solution

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

export default function Widget() {
  useEffect(() => {
    console.log('mounted');
    return () => {
      console.log('unmounted');
    };
  }, []);
  return <View />
}

Exercise Add useLayoutEffect

Add a useLayoutEffect, log console.log('layout') inside it and use an empty dependency array.

Show example solution

import React, { useLayoutEffect } from 'react';
import { View } from 'react-native';

export default function Bar() {
  useLayoutEffect(() => {
    console.log('layout');
  }, []);
  return <View />
}

Test yourself

Which array runs only on mount?
- [count]
- no array
- [count, ready]
- []
Show answer

[] — An empty array [] runs only on mount.
Lifecycle summary

mount

First render
update

Re-render
unmount

Removal
useLayoutEffect

Before paint

Next lesson: Project design

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies