Layout effect

Learn the difference between useLayoutEffect and useEffect.

useLayoutEffect

useLayoutEffect has the same signature as useEffect but runs at a different time. The effect is called synchronously, before the browser paints the screen. This is suited for measuring and updating what is visible.

If you measure and immediately change a style, use useLayoutEffect; otherwise the user may see the old state first, then the new one. For most side effects, useEffect is enough.

When to use useLayoutEffect?

In most cases useEffect is the right choice. useLayoutEffect is used only when you measure and need to update in the same paint; for example measuring an element's width and setting its position.

Because useLayoutEffect blocks paint, overusing it hurts performance. Rule of thumb: start with useEffect; switch to useLayoutEffect if you see a visual flicker.

Exercise Add useLayoutEffect

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

Show example solution

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

export default function Box() {
  const ref = useRef(null);
  useLayoutEffect(() => {
    console.log('layout');
  }, []);
  return <View ref={ref} />
}

Test yourself

useLayoutEffect signature

useLayoutEffect(() => { measure(); }, ____);

Show answer

useLayoutEffect(() => { measure(); }, []);

Effect timing

useLayoutEffect

Before paint
useEffect

After paint
mount

First render
cleanup

Before unmount
When does useLayoutEffect run?
- After paint
- Only on unmount
- Before paint
- Never
Show answer

Before paint — It runs synchronously before paint.

Next lesson: Summary - Lifecycle

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies