Step-by-step articles on React, part of our Frontend collection.
Showing 10 articles
React 19 is mostly about making async work, especially forms and data mutations, simpler. Here are the features you'll use most, with short examples. Actions An Action is an async function used in a transition. React tracks its pending state, errors and optimi...
Before React 19, a form needed state for values, errors, loading and the response. useActionState folds most of that into one hook. The signature const [state, formAction, isPending] = useActionState(actionFn, initialState); // actionFn(previousState, formData...
When a user likes a post or sends a message, waiting for the server before updating the screen feels sluggish. Optimistic UI shows the result immediately and corrects it if the request fails. The hook const [optimisticState, addOptimistic] = useOptimistic(actu...
use is a React API that reads the value of a resource : a promise or a context. It's unusual because you can call it inside conditions and loops. Reading a promise When the promise is pending, the component suspends and the nearest <Suspense> boundary shows it...
React Server Components (RSC) render on the server and send their result to the browser, not their JavaScript. They can read databases and files directly, and they add nothing to your client bundle. Server vs client components Server Components (default in fra...
Re-renders in React are cheap until they aren't. Developers used useMemo , useCallback and React.memo to skip unnecessary work, but getting the dependency arrays right is tedious. React Compiler is a build-time tool that adds this memoization automatically. Wh...
Passing a ref to a custom component used to require wrapping it in forwardRef . In React 19, function components simply receive ref as a prop. Before and after // React 18 const Input = forwardRef(function Input(props, ref) { return <input ref={ref} className=...
Fetching in useEffect means handling loading, errors, caching, refetching and race conditions yourself. TanStack Query (formerly React Query) handles all of that for client-side data. Setup import { QueryClient, QueryClientProvider } from '@tanstack/react-quer...
"Which state library should I use?" depends on what kind of state you have. Most apps need less global state than they think. 1. Server state is not app state Data from your API (users, products, orders) belongs in a server-state tool: Server Components, TanSt...
React Testing Library encourages tests that interact with your UI the way users do: find a button by its label, click it, check what appears. Vitest runs those tests quickly and shares config with Vite. Setup npm install -D vitest jsdom @testing-library/react...
