useLayoutEffect before paint

tsx

useLayoutEffect(() => {
  inputRef.current?.focus();
}, []);

Explanation

Reserve `useLayoutEffect` for measurement or layout-sensitive updates; prefer `useEffect` by default.

Learn the surrounding workflow

Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.

Same sheet · prioritizing Effect Hooks

Run side effects after React commits updates.

Open In sheettsxsame section

Clean up subscriptions or listeners.

Open In sheettsxsame section

Insert styles before layout effects.

Open In sheettsxsame section

Fetch client-side data in an effect with cleanup guard.

Open In sheettsxsame section

Read latest values in an effect event without re-triggering the effect.

Open In sheettsxsame section

Create local component state.

Open In sheettsx2 tag match