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.
A reducer centralizes state transitions. A context distributes state across the tree. Each solves a different problem in isolation: useReducer gives a component a single function that computes the next state from the current state and an action, and createContext gives a component a way to make a value available to every descendant without prop…
React is declarative. You describe what the UI should look like for a given state, and React updates the DOM to match. Most of the time, you never touch the DOM directly. But some operations are inherently imperative. Focusing an input, scrolling to a position, measuring an element’s size, playing a video, or integrating a…
useRef returns a plain object with a single property, current. React creates that object once, on the first render, and returns the same object on every subsequent render. Nothing about the object is special. It is not a proxy, it is not reactive, and it is not tracked by the reconciler. It is a box….
A React component re-renders when its state changes, when its props change, or when a parent re-renders. On every re-render, the entire component function runs from top to bottom. Every variable is recreated, every computation is repeated, and every object literal is a new object. Most of the time this is fine. A few arithmetic…
useCallback is the function-specific version of useMemo. It returns a memoized function that only changes identity when its dependencies change. The comparison is the same: on every render, React compares the dependency array, and if the dependencies are unchanged, it returns the same function reference from the previous render. If a dependency has changed, it…
React re-renders a component when its state changes, when its props change, or when its parent re-renders. The third case is the one that surprises developers. A parent re-renders because of its own state change, and every child re-renders with it, even the children whose props have not changed. For a small component tree, this…
React’s model is declarative: the parent describes what it wants, and the child renders it. The parent does not reach into the child and call the methods; it passes the props, and the child reacts. But some operations are inherently imperative. The parent needs to focus the input inside the child, scroll the list inside…
useEffect is the hook that runs the side effects after the render is committed to the screen. The browser has already painted the DOM, and the effect runs asynchronously, after the paint. For most effects — the data fetching, the subscriptions, the logging — this is exactly right. The effect does not need to run…
A custom hook is a black box. The component calls useOnlineStatus() or useFetch(url) or useFormInput(initial), and the hook does its work behind the abstraction. When the hook works, the abstraction is a blessing: the component is clean, and the logic is in one place. When the hook misbehaves, the abstraction is a curse: the React…
A React application has two kinds of updates. The first is the urgent update: the user types a character, clicks a button, presses a key. The response must be immediate, or the interface feels broken. The second is the non-urgent update: the search results filter, the chart recalculates, the tab content loads. The response can…