Recap and Related APIs

flushSync

Forces React to apply a state update synchronously instead of batching it. Useful when you must read the DOM immediately afterwards - and slow, because it gives up batching.

import { flushSync } from "react-dom";

function addAndScroll(item) {
  flushSync(() => {
    setItems([...items, item]);
  });
  // The new row exists in the DOM by this line
  listRef.current.lastChild.scrollIntoView();
}

Keys as a remount signal

Covered in the beginner track, but worth repeating here: changing a key is the cleanest way to force a subtree to rebuild with fresh state, and it beats a pile of reset effects.

<Editor key={documentId} documentId={documentId} />

What you have learned

• Portals move DOM position without moving React position - context, events and boundaries all still work.
• A modal needs focus management, Escape handling and scroll locking beyond the portal itself.
• Strict Mode doubles work in development to reveal impure renders and missing cleanup.
• useInsertionEffect is for style injection; flushSync is a rarely justified synchronous escape hatch.