Mount

Learn the component mount event.

Mount

A component mounts when it is drawn on the screen for the first time. This is the start of its lifecycle. On mount, React first calls the component function, turns the returned JSX into real elements, and places them on the screen.

After mount, side effects can start: fetching data, subscribing, setting a timer. These go inside useEffect with an empty dependency array ([]); they run only once.

First render

Mount happens when the component's first return value is placed on the screen. At this point the initial state (the useState starting value) is set and the JSX is prepared.

After the first render, React keeps the component in that state until it calls it again. A new call happens on a state or prop change; this is the update phase. Mount happens only once.

Exercise Log on mount

Log console.log('mount') once when the component mounts. Use useEffect with an empty dependency array.

Show example solution

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

export default function App() {
  const [ready, setReady] = useState(false);
  useEffect(() => {
    console.log('mount');
  }, []);
  return (
    <View>
      <Text>{ready ? 'Ready' : 'Wait'}</Text>
    </View>
  );
}

Test yourself

When does a component mount?
- On every state change
- Only when leaving the app
- When it is first drawn on the screen
- Only when styles update
Show answer

When it is first drawn on the screen — Mount is the moment of first render.

Empty dependency array

useEffect(() => { load(); }, ____);

Show answer

useEffect(() => { load(); }, []);

Match the concepts

mount

First render
unmount

Remove component
render

Draw to screen
useEffect

Side effect hook

Next lesson: Update

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies