Effect execution timing in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

When does a React useEffect run by default?

By default, useEffect runs after the component renders and the changes are painted on the screen.

intermediate

What is the difference between useEffect and useLayoutEffect in terms of execution timing?

useEffect runs after painting to the screen, while useLayoutEffect runs synchronously after DOM mutations but before the browser paints, blocking the paint until it finishes.

beginner

What happens if you pass an empty dependency array [] to useEffect?

The effect runs only once after the first render, similar to componentDidMount in class components.

intermediate

Why should you avoid heavy computations inside useLayoutEffect?

Because useLayoutEffect blocks the browser from painting until it finishes, heavy work can cause UI delays and make the app feel slow.

advanced

How does React schedule effects when multiple state updates happen in one render?

React batches state updates and runs effects after the render completes, ensuring effects run only once per render cycle even if multiple updates occur.

When does useEffect run in React by default?

A After the component renders and paints on the screen

B Before the component renders

C During the component render

D Before the browser paints

useEffect runs after the render and paint, so it does not block the UI.

What does an empty dependency array [] in useEffect mean?

A Effect never runs

B Effect runs after every render

C Effect runs before every render

D Effect runs only once after the first render

An empty array means the effect runs once, like componentDidMount.

Which hook runs synchronously before the browser paints?

A useEffect

B useLayoutEffect

C useState

D useMemo

useLayoutEffect runs after DOM changes but before paint.

Why avoid heavy work inside useLayoutEffect?

A It slows down rendering by blocking paint

B It causes infinite loops

C It runs too late

D It does not run on the client

Heavy work blocks paint and delays UI updates.

If multiple state updates happen in one render, when do effects run?

A Before any render

B After each state update separately

C After all updates finish and render completes

D During the render

React batches updates and runs effects once after render.

Explain when and why you would use useEffect versus useLayoutEffect in React.

Think about when the browser paints and how blocking affects UI.

Describe how React handles effect execution timing when a component renders multiple times quickly.

Consider how React optimizes multiple updates.