Layout effects and timing

A tooltip that jumps into place

A product page has a Delivery info button, and clicking it shows a tooltip above the button. To sit above the button, the tooltip needs its own height, and the height only exists once the browser has laid the tooltip out on the page. So the component renders, measures itself in an Effect, and renders again. Click Delivery info and watch the tooltip closely.

1import { useEffect, useRef, useState } from "react";2import { slowDown, watchPaints } from "./paints.js";3 4function Tooltip({ buttonTop, children }) {5  const ref = useRef(null);6  const [height, setHeight] = useState(0);7  slowDown(200);8  console.log(height === 0 ? "Render: height not measured yet" : "Render: height measured");9 10  useEffect(() => {11    console.log("Effect: measured the tip");12    setHeight(ref.current.offsetHeight);13  }, []);14 15  return (16    <div ref={ref} className="tip" style={{ top: buttonTop - height - 8 }}>17      {children}18    </div>19  );20}21 22export default function App() {23  const [buttonTop, setButtonTop] = useState(null);24 25  function toggle(event) {26    watchPaints();27    setButtonTop(buttonTop === null ? event.currentTarget.offsetTop : null);28  }29 30  return (31    <div className="page">32      <button onClick={toggle}>Delivery info</button>33      {buttonTop !== null && <Tooltip buttonTop={buttonTop}>Free delivery on orders over $30</Tooltip>}34    </div>35  );36}

For about half a second, the tooltip covers the button. Then it jumps up. Here is why. height starts at 0 (line 6), so the first render puts the tooltip's top at the button's top minus 0 minus 8 (line 16): right over the button. The Effect on lines 10 to 13 reads the real height through the ref and stores it, which renders Tooltip again with the right top. In between, the browser painted the wrong one.

Two helpers in the paints.js tab make that moment visible. slowDown(200) on line 7 keeps every render of Tooltip busy for 200 milliseconds, so the wrong frame stays on the screen long enough to see. watchPaints() on line 26 checks the page just before each frame the browser paints, and logs where the tip is. The console reads Paint after … ms: the tip covers the button, then the tip sits above the button. The styles.css tab, which the page loads, places the tip.

Now the same tooltip, measured in useLayoutEffect instead. Lines 1, 10 and 11 are the only lines that changed. Click Delivery info again.

1import { useLayoutEffect, useRef, useState } from "react";2import { slowDown, watchPaints } from "./paints.js";3 4function Tooltip({ buttonTop, children }) {5  const ref = useRef(null);6  const [height, setHeight] = useState(0);7  slowDown(200);8  console.log(height === 0 ? "Render: height not measured yet" : "Render: height measured");9 10  useLayoutEffect(() => {11    console.log("Layout effect: measured the tip");12    setHeight(ref.current.offsetHeight);13  }, []);14 15  return (16    <div ref={ref} className="tip" style={{ top: buttonTop - height - 8 }}>17      {children}18    </div>19  );20}21 22export default function App() {23  const [buttonTop, setButtonTop] = useState(null);24 25  function toggle(event) {26    watchPaints();27    setButtonTop(buttonTop === null ? event.currentTarget.offsetTop : null);28  }29 30  return (31    <div className="page">32      <button onClick={toggle}>Delivery info</button>33      {buttonTop !== null && <Tooltip buttonTop={buttonTop}>Free delivery on orders over $30</Tooltip>}34    </div>35  );36}

Nothing happens for almost a second, and then the tooltip appears above the button. It never covers it, and the console logs one paint: the tip sits above the button. React ran the layout effect, and the second render it asked for, before the browser painted anything.

When each kind of Effect runs

You met the three steps of a screen update in Render and commit: React renders your components, commits the changes to the DOM, and then the browser paints, drawing the new frame on the screen. Effects fit around these steps. This cart button logs every render, Effect and cleanup. Read the console, then click the button.

1import { useEffect, useLayoutEffect, useState } from "react";2 3export default function App() {4  const [items, setItems] = useState(0);5  console.log("Render: items is", items);6 7  useEffect(() => {8    console.log("Effect: items is", items);9    return () => console.log("Effect cleanup: items was", items);10  }, [items]);11 12  useLayoutEffect(() => {13    console.log("Layout effect: items is", items);14    return () => console.log("Layout cleanup: items was", items);15  }, [items]);16 17  return <button onClick={() => setItems(items + 1)}>Cart items: {items}</button>;18}

The useEffect on lines 7 to 10 is written first, but the first lines in the console are Render: items is 0, with a small 2 beside it because StrictMode renders twice in development, then Layout effect: items is 0 from line 13, then Effect: items is 0 from line 8. Where a hook is written doesn't matter: React runs every layout effect in a commit before any useEffect. StrictMode then runs both cleanups and both setups once more, the development check from Synchronizing with effects.

Click Cart items: 0. After the render line, the console shows Layout cleanup: items was 0, Layout effect: items is 1, Effect cleanup: items was 0, and Effect: items is 1. Each kind cleans up its last run and then runs again, layout effects first.

The render, the commit and the layout effects happen in one piece of JavaScript work, and a browser can't paint while JavaScript is running. So nothing a layout effect does, even a state change, can reach the screen half done. A useEffect is different: React doesn't make the browser wait for it. Usually React runs useEffect in a later task, and the browser paints in between if a new frame is due. (The commit phase, a lesson near the end of the course, walks through React's code for this.)

There is one exception, and the Delivery info tooltip showed it. When a discrete event, like a click or a key press, caused the render, React runs the Effects right after the commit, before the paint, so the result of one click is ready before the next click arrives. React's own code says so, in this excerpt from ReactFiberWorkLoop.js:

  // If the passive effects are the result of a discrete render, flush them
  // synchronously at the end of the current task so that the result is
  // immediately observable. Otherwise, we assume that they are not
  // order-dependent and do not need to be observed by external systems, so we
  // can wait until after paint.
  // TODO: We can optimize this by not scheduling the callback earlier. Since we
  // currently schedule the callback in multiple places, will wait until those
  // are consolidated.
  if (
    includesSyncLane(pendingEffectsLanes) &&
    (disableLegacyMode || root.tag !== LegacyRoot)
  ) {
    flushPendingEffects();
  }

"Passive effects" is React's name for useEffect. A render caused by a discrete event gets the "sync lane", React's most urgent priority, and for that lane, lines 9 to 14 run the Effects at once. For anything else, the comment says, React can wait until after the paint. But the state updates an Effect makes are a different story. When React runs Effects, it sets the priority for updates made inside them to the default one at most, in these two lines:

  const renderPriority = lanesToEventPriority(pendingEffectsLanes);
  const priority = lowerEventPriority(DefaultEventPriority, renderPriority);

Default updates render in a later task, and the browser can paint before that task starts. That's exactly what happened in the first tooltip: the Effect measured the tip before the paint, but the render with the right height came after it. React's reference for useEffect puts it the same way: the Effect may run before the paint, but the browser may paint before the state updates inside it. Each row of this table names a hook and what caused the render; read across for when the setup runs and when the state updates it makes are handled.

Measuring before the browser paints

Most components never need their size or position: they return JSX, and the browser works out the layout, where everything goes and how big it is. A tooltip, a menu or a popover is different. Its position depends on a size, and a size only exists after the browser has laid the element out. So it takes two renders:

1. Render with a guess: here, a height of 0.
2. Measure the real element with a ref, using a DOM method like offsetHeight or getBoundingClientRect().
3. Store the measurement in state, and render again with the right numbers.

All three steps have to happen before the browser paints, or the person sees the guess. useLayoutEffect gives you exactly that. In the second tooltip, line 10 calls it with the same function as before. React runs it after the commit, when ref.current is the real <div> and the browser can tell its height. Line 12 stores the height, and because the update comes from a layout effect, React renders and commits Tooltip again straight away, still before the paint. In React's commit code, it's the last step before React hands control back: line 4400 reads // If layout work was scheduled, flush it now.

Step through one click below, first with useEffect and then with useLayoutEffect. The left column is what React or the browser is doing, and the screen on the right changes only when the browser paints.

With useEffect, step 5 paints the tip over the button, and step 8 paints it again in its place. With useLayoutEffect, the second render comes right after the layout effect, and step 7 is the first paint.

Without slowDown, the jump still happens; it's just too short to see. Press Edit & run on the first tooltip and change 200 to 0 on line 7. You can't see the tooltip move any more, but the console still logs a paint where the tip covers the button, followed a few milliseconds later by the right one. One wrong frame lasts about 16 milliseconds on a 60 Hz screen, which people notice as a flicker.

What useLayoutEffect costs

Click the two tooltips again and compare when something first appears. With useEffect, the console's first paint comes after about 400 milliseconds: the two slow renders of the first pass, one of them from StrictMode. With useLayoutEffect, the first paint comes after about 800 milliseconds, because the browser has to wait for the second pass too. Both end at the same moment; the layout effect only made the waiting screen stay still for longer.

That's the price. The code in a layout effect, and every render it asks for, blocks the paint: until they're done, the browser can't show anything, not even a pressed button or a typed letter. A quick measurement costs a fraction of a millisecond. Slow work in a layout effect, or a slow component it renders again, freezes the screen.

So start with useEffect, and switch an Effect to useLayoutEffect only when both of these are true:

• It reads the layout, like a size, a position, or a scroll offset, or it changes what the page shows.
• Without it, the person would see a wrong frame: a jump, a flicker, or a flash of the wrong content.

Each row of this table is one of React's three Effect hooks: when it runs, whether it holds up the paint, and what it's for.

The two hooks take the same arguments, follow the same dependency rules, run their cleanups the same way, and both run twice in development when a component appears. Only the timing differs.

useInsertionEffect is for CSS-in-JS libraries

React has a third Effect hook, and you'll probably never write one yourself. Some styling libraries, called CSS-in-JS libraries, let you write CSS inside your JavaScript and add <style> tags to the page while the app runs. A new style rule changes the layout, so it has to be on the page before any layout effect measures anything. useInsertionEffect runs earlier than every layout effect, during the commit, for exactly this job.

Here is a tiny library of that kind, written for this lesson, in the css.js tab, and a sale badge that uses it. The badge measures its own padding in a layout effect. Read the console.

1import { useLayoutEffect, useRef } from "react";2import { useStyle } from "./css.js";3 4function SaleBadge() {5  const className = useStyle("sale-badge", "padding: 2px 12px; border: 2px solid;");6  const ref = useRef(null);7 8  useLayoutEffect(() => {9    const padding = window.getComputedStyle(ref.current).paddingLeft;10    console.log("Layout effect: the badge's padding is", padding);11  }, []);12 13  return <span ref={ref} className={className}>Sale</span>;14}15 16export default function App() {17  return <p>Green tea <SaleBadge /></p>;18}

In css.js, useStyle is a function libraries hand out: a hook of their own, made from React's hooks, the kind you'll write in Reusing logic with custom hooks. On line 8 it calls useInsertionEffect, and lines 11 to 13 add a <style> tag with the rule, once per class name. In App.jsx, line 5 asks for the sale-badge rule, and the layout effect on lines 8 to 11 reads the padding the browser applied. The console shows Added the sale-badge rule, then Layout effect: the badge's padding is 12px, with a 2 beside it from StrictMode's extra run.

Press Edit & run, open the css.js tab, and change useInsertionEffect to useEffect on lines 1 and 8. Now the first line is Layout effect: the badge's padding is 0px: the layout effect measured before the rule existed. Only then does the console show Added the sale-badge rule, and StrictMode's second run reads 12px.

React keeps useInsertionEffect small on purpose:

• You can't set state in it. React warns useInsertionEffect must not schedule updates.
• Refs aren't filled in yet when it first runs, so it can't measure anything.
• Like every Effect, it doesn't run on the server.

React's docs say it plainly: unless you're writing a CSS-in-JS library, you want useEffect or useLayoutEffect. For your own components, CSS files and the style prop from Styling components need no Effect at all.

Layout effects and server rendering

Many React apps render their first screen to HTML on a server, so the page shows before the JavaScript arrives; frameworks like Next.js do it for you. A server has no screen, so there's no layout to measure and nothing to paint. React runs no Effects there: not useEffect, not useLayoutEffect, not useInsertionEffect. This code runs in Node.js, on a server, not in the page, so it has no result here:

import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { renderToString } from "react-dom/server";

function Tooltip() {
  const ref = useRef(null);
  const [height, setHeight] = useState(0);
  useLayoutEffect(() => {
    console.log("Layout effect");
    setHeight(ref.current.offsetHeight);
  }, []);
  useEffect(() => {
    console.log("Effect");
  }, []);
  return <div ref={ref} className="tip">Height: {height}</div>;
}

console.log(renderToString(<Tooltip />));

Line 2 imports renderToString, which turns components into an HTML string, and line 17 prints what it returns. The console shows one line: <div class="tip">Height: <!-- -->0</div>. Neither Layout effect nor Effect is logged, and the height is still 0. (The <!-- --> is a marker React adds between two pieces of text, so it can match them up again in the browser.)

So any component that measures itself shows its first-render guess in the server's HTML, and moves once the JavaScript has loaded, to a measured height like the 34 pixels in the picture. Older versions of React printed a warning about useLayoutEffect on the server; React 19 removed it, and the 19.3.1 release this course uses prints nothing. The jump is still yours to handle. You have a few choices:

• Show it only after a click. A tooltip, a menu or a popover usually isn't in the first screen at all, so the server never renders it. The Delivery info tooltip is like that.
• Accept the jump. Use useEffect, and let the first screen show the guess until the JavaScript runs.
• Render it only in the browser. Show nothing, or a placeholder, on the server, and the real component only in the browser.

For the last choice, React 19.3 added a browser() function to react-dom. Inside a component, call use(browser()). On the server, the component is left out, and the nearest <Suspense> boundary's fallback goes in the HTML instead; in the browser, it renders normally:

import { Suspense, use } from "react";
import { browser } from "react-dom";

function DeliveryTip() {
  use(browser("The tip measures itself in the browser."));
  return <Tooltip>Free delivery on orders over $30</Tooltip>;
}

export default function ProductPage() {
  return (
    <Suspense fallback={null}>
      <DeliveryTip />
    </Suspense>
  );
}

Line 2 imports browser, and line 5 marks DeliveryTip as browser-only; the text is a note for anyone reading the code. Lines 11 to 13 wrap it in <Suspense> with fallback={null}, so the server's HTML has nothing there. The code is only part of a file: Tooltip is the measured tooltip from earlier. Suspense and use get lessons of their own, Suspense and The use API, and server rendering gets Server rendering and hydration.

Show more, only when the text is cut off

A product list shows two lines of each description, with a Show more button. A short description fits, so a button there would be pointless. Whether a description is cut off depends on its length, the font, and the width of the screen, so the only way to know is to measure it. Click Show more on the carrot cake, then make the window narrower or wider and click Run again.

1import { useLayoutEffect, useRef, useState } from "react";2 3function Description({ text }) {4  const ref = useRef(null);5  const [tooLong, setTooLong] = useState(false);6  const [open, setOpen] = useState(false);7 8  useLayoutEffect(() => {9    const box = ref.current;10    setTooLong(box.scrollHeight > box.clientHeight);11  }, [text]);12 13  return (14    <div className="product">15      <p ref={ref} className={open ? "text" : "text short"}>{text}</p>16      {tooLong && <button onClick={() => setOpen(!open)}>{open ? "Show less" : "Show more"}</button>}17    </div>18  );19}20 21export default function App() {22  return (23    <>24      <Description text="Green tea: light and fresh." />25      <Description text="Carrot cake: a soft, spiced sponge made with fresh carrots, brown sugar, cinnamon and a little nutmeg, topped with a thick layer of cream cheese frosting and chopped walnuts. Baked every morning in small batches, and best with a cup of chai or a strong black tea." />26    </>27  );28}

Each Description starts with the class short (line 15), which the styles.css tab limits to two lines with max-height and overflow: hidden. The layout effect on lines 8 to 11 compares scrollHeight, the height of all the text, with clientHeight, the height you can see. When there is more text than room, line 10 sets tooLong, and line 16 shows the button. The green tea fits, so it gets no button; the carrot cake does.

Why a layout effect? With useEffect, the first paint could show the carrot cake without its button, and then the button would pop in and push the next product down. The array on line 11 is [text]: the measurement only changes when the text does, so opening the description doesn't measure again and hide the button.

Common mix-ups

• "A layout effect runs before React changes the DOM." No. It runs after the commit, so the DOM is up to date and you can measure it. Only the paint waits.
• "useEffect always runs after the paint." No. After a click or a key press, React runs it before the paint. Only useLayoutEffect promises to run before the paint every time.
• "After a click, useEffect is as good as useLayoutEffect." No. The Effect runs before the paint, but the render it asks for can wait until after it. The first tooltip jumped after a click.
• "useLayoutEffect is the safer choice, so use it everywhere." No. It holds up the paint, so slow work there freezes the screen. Use it only when the person would see a wrong frame.
• "useInsertionEffect is for my components' styles." No. It's for CSS-in-JS libraries. It can't set state or measure, and plain CSS needs no Effect.
• "On the server, layout effects run before the HTML is sent." No. No Effect runs on the server, so the HTML shows the first render, and the Effects run later, in the browser.

Practice exercises

Each exercise shows its result under the code, or when you press Edit & run, with the console under it. Change the code, and the result runs again as you type. Make a guess first, then use the hints.

import { useEffect, useLayoutEffect } from "react";

export default function App() {
  useEffect(() => {
    console.log("A: useEffect");
  });

  useLayoutEffect(() => {
    console.log("B: useLayoutEffect");
  });

  return <p>Order summary</p>;
}

1import { useEffect, useLayoutEffect } from "react";2 3export default function App() {4  useEffect(() => {5    console.log("A: useEffect");6  });7 8  useLayoutEffect(() => {9    console.log("B: useLayoutEffect");10  });11 12  return <p>Order summary</p>;13}

1import { useEffect, useLayoutEffect, useState } from "react";2 3export default function App() {4  const [size, setSize] = useState("Small");5 6  useEffect(() => {7    console.log("Effect:", size);8    return () => console.log("Effect cleanup:", size);9  }, [size]);10 11  useLayoutEffect(() => {12    console.log("Layout effect:", size);13    return () => console.log("Layout cleanup:", size);14  }, [size]);15 16  return <button onClick={() => setSize("Large")}>Cup size: {size}</button>;17}

1import { useEffect, useLayoutEffect, useState } from "react";2 3export default function App() {4  const [size, setSize] = useState("Small");5 6  useEffect(() => {7    console.log("Effect:", size);8    return () => console.log("Effect cleanup:", size);9  }, [size]);10 11  useLayoutEffect(() => {12    console.log("Layout effect:", size);13    return () => console.log("Layout cleanup:", size);14  }, [size]);15 16  return <button onClick={() => setSize("Large")}>Cup size: {size}</button>;17}

1import { useEffect, useRef, useState } from "react";2import { slowDown, watchPaints } from "./paints.js";3 4function SizeGuide({ buttonTop }) {5  const ref = useRef(null);6  const [height, setHeight] = useState(0);7  slowDown(200);8 9  useEffect(() => {10    setHeight(ref.current.offsetHeight);11  }, []);12 13  return (14    <div ref={ref} className="tip" style={{ top: buttonTop - height - 8 }}>15      Small: 250 ml. Large: 400 ml.16    </div>17  );18}19 20export default function App() {21  const [buttonTop, setButtonTop] = useState(null);22 23  function toggle(event) {24    watchPaints();25    setButtonTop(buttonTop === null ? event.currentTarget.offsetTop : null);26  }27 28  return (29    <div className="page">30      <button onClick={toggle}>Size guide</button>31      {buttonTop !== null && <SizeGuide buttonTop={buttonTop} />}32    </div>33  );34}

1import { useLayoutEffect, useRef, useState } from "react";2import { slowDown, watchPaints } from "./paints.js";3 4function SizeGuide({ buttonTop }) {5  const ref = useRef(null);6  const [height, setHeight] = useState(0);7  slowDown(200);8 9  useLayoutEffect(() => {10    setHeight(ref.current.offsetHeight);11  }, []);12 13  return (14    <div ref={ref} className="tip" style={{ top: buttonTop - height - 8 }}>15      Small: 250 ml. Large: 400 ml.16    </div>17  );18}19 20export default function App() {21  const [buttonTop, setButtonTop] = useState(null);22 23  function toggle(event) {24    watchPaints();25    setButtonTop(buttonTop === null ? event.currentTarget.offsetTop : null);26  }27 28  return (29    <div className="page">30      <button onClick={toggle}>Size guide</button>31      {buttonTop !== null && <SizeGuide buttonTop={buttonTop} />}32    </div>33  );34}

1import { useRef, useState } from "react";2 3function ProductName({ full, short }) {4  const ref = useRef(null);5  const [fits, setFits] = useState(true);6 7  // Measure the heading here, before the browser paints.8 9  return <h3 ref={ref} className="name">{fits ? full : short}</h3>;10}11 12export default function App() {13  return (14    <>15      <ProductName full="Green tea" short="Green tea" />16      <ProductName full="Organic first flush Darjeeling tea" short="Darjeeling tea" />17    </>18  );19}

1import { useLayoutEffect, useRef, useState } from "react";2 3function ProductName({ full, short }) {4  const ref = useRef(null);5  const [fits, setFits] = useState(true);6 7  useLayoutEffect(() => {8    const heading = ref.current;9    setFits(heading.scrollWidth <= heading.clientWidth);10  }, [full]);11 12  return <h3 ref={ref} className="name">{fits ? full : short}</h3>;13}14 15export default function App() {16  return (17    <>18      <ProductName full="Green tea" short="Green tea" />19      <ProductName full="Organic first flush Darjeeling tea" short="Darjeeling tea" />20    </>21  );22}

1import { useLayoutEffect, useRef, useState } from "react";2import { slowDown } from "./paints.js";3 4function SaleBanner() {5  const ref = useRef(null);6  const [wide, setWide] = useState(false);7 8  useLayoutEffect(() => {9    setWide(ref.current.offsetWidth > 300);10    slowDown(400); // Pretend this sends the view to an analytics server.11    console.log("Sent: the offer was seen");12  }, []);13 14  return <p ref={ref}>{wide ? "Sale: 20% off all tea, this week only" : "Sale: 20% off"}</p>;15}16 17export default function App() {18  const [open, setOpen] = useState(false);19  return (20    <div>21      <button onClick={() => setOpen(!open)}>{open ? "Hide the offer" : "Show the offer"}</button>22      {open && <SaleBanner />}23    </div>24  );25}

1import { useEffect, useLayoutEffect, useRef, useState } from "react";2import { slowDown } from "./paints.js";3 4function SaleBanner() {5  const ref = useRef(null);6  const [wide, setWide] = useState(false);7 8  useLayoutEffect(() => {9    setWide(ref.current.offsetWidth > 300);10  }, []);11 12  useEffect(() => {13    slowDown(400); // Pretend this sends the view to an analytics server.14    console.log("Sent: the offer was seen");15  }, []);16 17  return <p ref={ref}>{wide ? "Sale: 20% off all tea, this week only" : "Sale: 20% off"}</p>;18}19 20export default function App() {21  const [open, setOpen] = useState(false);22  return (23    <div>24      <button onClick={() => setOpen(!open)}>{open ? "Hide the offer" : "Show the offer"}</button>25      {open && <SaleBanner />}26    </div>27  );28}

1import { useLayoutEffect, useRef, useState } from "react";2 3function Tooltip({ button, children }) {4  const ref = useRef(null);5  const [height, setHeight] = useState(0);6 7  useLayoutEffect(() => {8    setHeight(ref.current.offsetHeight);9  }, []);10 11  const top = button.top - height - 8;12  const place = "above";13 14  return (15    <div ref={ref} className="tip" style={{ top }}>16      {children} ({place})17    </div>18  );19}20 21export default function App() {22  const [button, setButton] = useState(null);23 24  function toggle(event) {25    const { offsetTop, offsetHeight } = event.currentTarget;26    setButton(button === null ? { top: offsetTop, bottom: offsetTop + offsetHeight } : null);27  }28 29  return (30    <div className="page">31      <button onClick={toggle}>Returns</button>32      {button !== null && <Tooltip button={button}>Free returns within 30 days</Tooltip>}33    </div>34  );35}

1import { useLayoutEffect, useRef, useState } from "react";2 3function Tooltip({ button, children }) {4  const ref = useRef(null);5  const [height, setHeight] = useState(0);6 7  useLayoutEffect(() => {8    setHeight(ref.current.offsetHeight);9  }, []);10 11  const fitsAbove = button.top - height - 8 >= 0;12  const top = fitsAbove ? button.top - height - 8 : button.bottom + 8;13  const place = fitsAbove ? "above" : "below";14 15  return (16    <div ref={ref} className="tip" style={{ top }}>17      {children} ({place})18    </div>19  );20}21 22export default function App() {23  const [button, setButton] = useState(null);24 25  function toggle(event) {26    const { offsetTop, offsetHeight } = event.currentTarget;27    setButton(button === null ? { top: offsetTop, bottom: offsetTop + offsetHeight } : null);28  }29 30  return (31    <div className="page">32      <button onClick={toggle}>Returns</button>33      {button !== null && <Tooltip button={button}>Free returns within 30 days</Tooltip>}34    </div>35  );36}

Check your understanding

Key takeaways

• React renders, commits, and runs layout effects in one go; then the browser paints; then React usually runs useEffect.
• After a click or a key press, React runs useEffect before the paint, but the renders it asks for can still wait until after it.
• useLayoutEffect runs before the paint every time, and so do the renders it asks for. Use it to measure and fix what the screen would show wrong.
• It holds up the paint, so keep it quick, and keep everything else in useEffect.
• useInsertionEffect runs before layout effects and is for CSS-in-JS libraries only.
• No Effect runs on the server. A measured component shows its first guess in the HTML until the JavaScript runs.

Coming next: The rules of hooks. It shows why every hook, from useState to useLayoutEffect, has to be called in the same order on every render.