The most popular UI library for building dynamic, component-based apps
9 articles
React 18 shipped three new hooks that tackle different problems: useId for stable unique IDs, useTransition for non-blocking UI updates, and useDeferredValue for deprioritising expensive renders.
Hooks are just functions, but testing them well requires care. This final article covers testing hooks through components (the preferred way), using renderHook for isolated custom hook tests, and common async patterns.
useContext lets any component read shared state without threading props through every layer. This article covers createContext, Provider setup, and the patterns that keep context from becoming a performance trap.
Hooks come with two hard rules enforced by the ESLint plugin. This article explains why those rules exist, the most common anti-patterns developers fall into, and how to restructure code when you feel the urge to break them.
Two escape hatches most tutorials skip: useImperativeHandle for exposing a controlled API from a child component, and useLayoutEffect for DOM measurements that must happen before the browser paints.
The final part covers performance optimisation with useCallback and useMemo, then shows you how to extract reusable logic into custom hooks — the most powerful pattern React Hooks enable.
useRef gives you a mutable container that survives renders without causing them. useReducer brings Redux-style state machines to any component. Together they handle the cases useState and useEffect cannot.
useEffect is how React functional components interact with the outside world — fetching data, setting up subscriptions, and manipulating the DOM. This article explains the dependency array, cleanup, and common pitfalls.
Learn how useState lets functional components hold and update local state. We cover the basics, the callback pattern to avoid race conditions, and object/array state management.