Library cheatsheet
React 19 Cheatsheet
Hooks, components and patterns for React 19 in TypeScript or JavaScript.
Setup
- Create an app with Vite — Scaffold a React and TypeScript project.
- Install and start — Install dependencies and start the dev server.
- Render the app — Mount the root component into the page.
State and effects
- Add state — Keep a value that re-renders the component when it changes.
- Update state from the previous value — Pass a function when the new value depends on the old one.
- Run an effect — Run code after render, here when the id changes, and clean up before the next run.
- Keep a mutable value or DOM node — A ref persists between renders without causing a re-render.
- Manage complex state with a reducer — Move state transitions into one function.
- Share data without props — Read the nearest value of a context.
Performance and transitions
- Cache a calculation — Recompute only when the dependencies change.
- Cache a function — Keep the same function between renders so memoized children don't re-render.
- Skip re-rendering a component — Re-render only when the props change.
- Keep the UI responsive during an update — Mark a state update as non-urgent.
- Load a component on demand — Split code and show a fallback while it loads.
React 19 features
- Handle a form action — Track the result and pending state of a form action.
- Show an optimistic update — Show the expected result immediately while the request is in flight.
- Read a promise or context with use — use can read a promise during render, suspending until it resolves, and can be called conditionally.
- Pass a ref as a prop — Function components accept ref as a normal prop, so forwardRef is no longer needed.
JSX patterns
- Render conditionally — Show content only when a condition is true.
- Render a list — Give each item a stable key so React can track it.
- Create a controlled input — Keep the input's value in state.
- Write a custom hook — Extract reusable stateful logic into a function that starts with use.
- Provide a context — Make a value available to every component below the provider.
Related cheatsheets
- Hugging Face cheatsheet — The hf command line, and Transformers and Datasets code for downloading, running, training and sharing models.
- Matplotlib and seaborn 3 cheatsheet — Draw line, scatter, bar and histogram charts with Matplotlib, and statistical charts with seaborn.
- pandas and NumPy 3 cheatsheet — Load, clean, reshape, group and analyze tabular data with pandas, and work with arrays in NumPy.
- Polars 2 cheatsheet — Fast DataFrames in Python: expressions, filtering, grouping, joins, lazy queries and file formats.
- Prisma ORM cheatsheet — Model your database in a schema, run migrations, and query with the type-safe Prisma Client. Examples use the prisma-client-js generator; check the docs for newer generators.
- PyTorch 2 cheatsheet — Tensors, autograd, models, training loops, saving and speed-ups in PyTorch 2.