useEffect

Learn side effects with useEffect.

What is useEffect?

In React Native useEffect is a hook that manages side effects. A side effect is any operation outside rendering: data fetching, subscriptions, timers or manual network calls. It is called as useEffect(EffectCallback); EffectCallback is a function.

useEffect runs when the component appears on screen (mount). It runs after render, so it fires as state updates. Import the hook from the react package: import { useEffect } from "react";. useEffect lets you write async side effects safely.

The effect callback

The first argument of useEffect is the effect callback; it is a function. React calls it after the component renders. Inside, you make side effect calls such as console.log, fetch or setInterval.

The effect callback runs after every render by default. To change this, you pass a second argument called the dependency array; we will see it in the next lesson. A function returned from the effect callback is called a cleanup and runs before the component is removed.

Exercise Log a message with useEffect

Write a Message component. Import useEffect; inside the effect callback log "Component mounted" with console.log. The component returns <Text>Hello</Text>.

Show example solution

import { useEffect } from "react";
import { Text } from "react-native";

function Message() {
  useEffect(() => {
    console.log("Component mounted");
  });
  return <Text>Hello</Text>;
}

Test yourself

What is useEffect used for?
```
useEffect(() => { /* ... */ });
```
- To manage side effects
- To create state
- To style components
- For navigation
Show answer

To manage side effects — useEffect manages side effects.

Import the hook

import { ____ } from "react";

Show answer

import { useEffect } from "react";

Match each piece to its role

useEffect

Side effect hook
EffectCallback

Function that runs
mount

Component appears
render

Screen drawn

Next lesson: Dependency array

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies