Part 1
React Hooks Part 1: Managing State with useState 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.
A four-part deep-dive into React Hooks — from managing state with useState to squeezing performance out of useCallback and useMemo. Each article is standalone yet builds on the previous, giving you both quick reference and progressive mastery.
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.
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.
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.
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.
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.
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.
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.
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.
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.