Layout effects run before the browser paints committed updates and can block painting. Use them when a visible measurement correction must happen before paint.
Before you start
You should know how a function component renders JSX, receives props and handles events. Follow the value through render, interaction and the next render. Small snippets below belong inside an existing React application unless they are explicitly shown as complete components.
The practical goal is to reason through this situation: Measure a tooltip’s bounds and position it before it becomes visibly misplaced. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Identify a visible correction
A tooltip needs its measured height to avoid being painted in the wrong position. This is a layout problem.
Step 2: Measure after commit
Read the committed DOM in a layout Effect and update positioning. Guard an absent ref and avoid unnecessary repeated measurements.
Step 3: Limit blocking work
Keep measurement small. Network fetching and nonvisual synchronization belong in ordinary Effects because they do not need to block painting.
Worked scenario
Measure a tooltip’s bounds and position it before it becomes visibly misplaced.
A tooltip first renders a measurable element, then reads its bounding rectangle and computes an offset before paint. If the position also depends on window size, account for resizing separately. Do not alternate repeated DOM writes and reads across many elements; that can increase layout cost and delay interaction.
Common mistake
Using layout effects for ordinary fetching delays painting without solving request ownership.
Verify the behavior
Test different text lengths, viewport edges and resizing. Profile the layout work and verify there is no visible jump on the first paint.
Interview exercise
What alternative fits nonvisual synchronization?
Answer and reasoning
Use a normal Effect. Reserve layout effects for necessary layout reads and immediate visual corrections.
Continue learning
Compare the scenario with the React interview questions and test your understanding with the React MCQs. For terminology and implementation details, consult the reference material.