Mount
- React Native course
- Intermediate
- Lesson 59/116
- 5 min
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.
Practice Log on mount
Log console.log('mount') once when the component mounts. Use useEffect with an empty dependency array.
Starter code
import React, { useState } from 'react';
import { Text, View } from 'react-native';
export default function App() {
const [ready, setReady] = useState(false);
// Log once on mount
return (
<View>
<Text>{ready ? 'Ready' : 'Wait'}</Text>
</View>
);
}Sample 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>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 When does a component mount?
- On every state change
- Only when leaving the app
- When it is first drawn on the screen Correct answer
- Only when styles update
Explanation: Mount is the moment of first render.
2 Empty dependency array
useEffect(() => { load(); }, ____);useEffect(() => { load(); }, []);Explanation: An empty array runs the effect only on mount.
3 Match the concepts
| Term | Meaning |
|---|---|
mount |
First render |
unmount |
Remove component |
render |
Draw to screen |
useEffect |
Side effect hook |