React 19 cheatsheet
React 19: JSX patterns
5 common React 19 tasks.
Render conditionally
Show content only when a condition is true.
{isLoggedIn ? <Dashboard /> : <Login />}
Render a list
Give each item a stable key so React can track it.
{items.map((item) => (
<li key={item.id}>{item.name}</li>
))}
Create a controlled input
Keep the input's value in state.
<input value={text} onChange={(e) => setText(e.target.value)} />
Write a custom hook
Extract reusable stateful logic into a function that starts with use.
function useToggle(initial = false) {
const [on, setOn] = useState(initial);
return [on, () => setOn((v) => !v)] as const;
}
Provide a context
Make a value available to every component below the provider.
const ThemeContext = createContext("light");
<ThemeContext value="dark">
<App />
</ThemeContext>