React 19 cheatsheet
React 19: State and effects
6 common React 19 tasks.
Add state
Keep a value that re-renders the component when it changes.
const [count, setCount] = useState(0);
Update state from the previous value
Pass a function when the new value depends on the old one.
setCount((c) => c + 1);
Run an effect
Run code after render, here when the id changes, and clean up before the next run.
useEffect(() => {
const sub = subscribe(id);
return () => sub.unsubscribe();
}, [id]);
Keep a mutable value or DOM node
A ref persists between renders without causing a re-render.
const inputRef = useRef<HTMLInputElement>(null);
inputRef.current?.focus();
Manage complex state with a reducer
Move state transitions into one function.
const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: "increment" });
Share data without props
Read the nearest value of a context.
const theme = useContext(ThemeContext);