A JavaScript library for building user interfaces, developed by Meta. It lets you compose UIs from reusable components, manage state declaratively, and update the DOM efficiently through a virtual representation. React is the foundation of countless web applications and the entry point to the modern front-end ecosystem.
The dependency array is the control panel for useEffect. It determines when the effect runs, when it is cleaned up, and when it is skipped. The rules that govern it are simple to state and easy to violate: include every value from the component scope that the effect reads. The consequences of violating them are…
An effect sets something up. A cleanup function tears it down. The cleanup is the other half of the effect, and it is the half that is most often forgotten. A subscription that is never unsubscribed, a timer that is never cleared, a network request that is never aborted, an event listener that is never…
Fetching data is the most common side effect in a React application. A component mounts, it needs data from a server, it shows a loading state, the data arrives, it shows the data. The pattern is simple to describe and full of traps: the effect that fetches can run twice, the response can arrive after…
Every asynchronous operation has three possible outcomes: it is still running, it succeeded, or it failed. A React component that fetches data must represent all three. The previous chapter introduced the three states as part of the fetch pattern. This chapter treats them as a design problem in their own right: how to model them,…
A custom hook is a function whose name starts with use and that calls other hooks. That is the entire definition. There is no special syntax, no registration, no framework API. A custom hook is a function that extracts component logic into a reusable unit. The logic inside it is the same hooks—useState, useEffect, useRef,…
React components often accumulate logic that has nothing to do with rendering. A component that fetches data, subscribes to a browser event, and manages a form field is doing three jobs at once. The rendering logic — the JSX — is buried under layers of state declarations and effect callbacks. Custom Hooks exist to pull…
Prop drilling is what happens when data has to pass through components that do not need it. A value originates at the top of the tree, and a component five levels down needs it. The components in between — the ones that merely relay the value — have no interest in it. They receive it…
Context begins with a single function call. createContext takes a default value and returns an object that components can provide and read. That object does not hold state, does not subscribe to anything, and does not re-render anything on its own. It is a token — a reference that connects a provider somewhere up the…
A context object on its own does nothing. It is a token — an identity that a provider and a consumer agree on. The provider gives the token a value, the consumer reads that value, and the connection between them is established by React walking the tree. Neither end knows where the other is. The…
useState works well when a component manages one or two independent values. A boolean for a modal, a string for an input, a number for a counter — each is a separate useState call, each updates independently, and the logic that changes each value is simple enough to live inline in an event handler. But…