Update

Learn the component update event.

Update

After a component mounts, a change to its state or props triggers the update phase. React calls the component again, computes the new JSX, and applies the changed parts to the screen. This redraw is called a re-render.

During an update, useEffect runs again if a value in its dependency array changed. An empty array runs only on mount; a filled array runs on every relevant change.

Re-render triggers

A re-render is triggered in three cases: a setState call, a parent re-render, or a Context value change. When a component changes its own state, both it and its children re-render.

Each render returns new JSX; React compares it with the old one and applies only the diff. So re-renders are cheap; the real cost lives in side effects and heavy computations.

Exercise Track count changes

Log console.log('count: ' + count) whenever count changes. Use useEffect and put count in the dependency array.

Show example solution

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

export default function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log('count: ' + count);
  }, [count]);
  return (
    <View>
      <Text>{count}</Text>
      <Button title="Add" onPress={() => setCount(count + 1)} />
    </View>
  );
}

Test yourself

Filled dependency array

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

Show answer

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

Which of these does NOT trigger a re-render?
- A setState call
- A parent render
- A Context value change
- A sibling component rendering
Show answer

A sibling component rendering — Sibling components do not affect each other.
Re-render causes

setState

State change
prop

Parent data
Context

Global value
mount

First render

Next lesson: Unmount

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies