Mirror a prop into state only when necessary

tsx

const [draftName, setDraftName] = useState(name);
useEffect(() => {
  setDraftName(name);
}, [name]);

Explanation

Use sparingly; derived state is often avoidable.

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 UI Recipes

Update state on an interval with cleanup.

Open In sheettsxsame section

Use a ref and an effect to focus an input after mount.

Open In sheettsxsame section

Use a ref plus ResizeObserver.

Open In sheettsxsame section

Periodically refresh data until unmount.

Open In sheettsx3 tag match

Apply urgent optimistic state and schedule reconciliation.

Open In sheettsx2 tag match