Hooks let function components use React features such as State, Ref, Effect and Context. Before learning the names, distinguish when a re-render is needed, what you are synchronizing with, and why you preserve values and functions.
§ 00 · Hooks — functions that access React features
A Hook’s name begins with use, and it lets function components use State and other React features. Combine built-in Hooks and extract recurring state logic into a separate function to create a custom Hook. Custom Hooks share logic; they do not automatically make multiple components share State itself.
Call Hooks only at the top level of a component or another Hook. Do not call them inside conditions, loops or nested functions: React matches each Hook’s state by call order. Do not call Hooks from ordinary JavaScript functions.
§ 01 · useState and useRef — visible and invisible memory
Use useState when a value affects the screen. Updating it through its setter schedules the next render. If the next value is calculated from the previous State, an updater function such as setCount(count => count + 1) can reduce mistakes caused by relying on stale values.
useRef preserves a value between renders, but changing ref.current does not trigger a re-render. It is suitable for referencing a DOM node or storing information not directly needed to calculate the screen, such as a timer ID or a previous value. Put a value that must appear on screen in a Ref, and the value can change without the screen following.
| Question | useState | useRef |
|---|---|---|
| Preserves values between renders | Yes | Yes |
| Re-renders on change | Yes | No |
| Value displayed on screen | Suitable | Unsuitable |
| DOM, timers and external instances | Usually unnecessary | Suitable |
§ 02 · useEffect — synchronize with external systems
useEffect synchronizes a component with systems outside React, such as network connections, browser APIs, timers and third-party widgets. Memorizing it simply as “where code runs after rendering” can lead you to move values calculable from State into Effects, causing unnecessary re-renders and repeated execution.
The setup function can return a cleanup function when needed. Cleanup removes connections, subscriptions and timers before resynchronization and when the component disappears. Include every reactive value read by the Effect in its dependency array. Instead of forcing an execution count by emptying the array, reconsider what the Effect synchronizes with.
§ 03 · useReducer — collect state transitions in one function
When many state-update rules exist or multiple fields change together, useReducer gathers those rules in a reducer function. The component uses dispatch to send an action describing what happened; the reducer takes the current state and action and calculates the next state.
A reducer must be pure and must not modify existing State directly. It is not always superior to useState. useState is easier to read for a few simple values; useReducer becomes more useful as types of state transitions multiply and update logic spreads across event handlers.
§ 04 · Context — pass shared values deep into the tree
Context supplies values needed by many descendants—such as theme, language and login information—down the tree without passing them as Props through every intermediate component. A Provider supplies the value; useContext reads and subscribes to the nearest Provider above it.
Context is not a universal store for making all State global. Changes to a value re-render the components reading it, so carelessly placing one large, frequently changing object in Context broadens the impact. First see whether Props and moving State can solve the problem. Use Context when several distant consumers truly need the same value.
§ 05 · useCallback — preserve the function itself
useCallback returns the same function definition while its dependencies remain unchanged. It can be useful when passing a callback as a Prop to a child wrapped in memo, or when a function’s identity matters as a dependency of another Hook. It does not execute the function or store its result.
useMemo preserves a calculation’s result; useCallback preserves the function itself. memo is an optimization for skipping a component’s re-render when Props are unchanged. All three are tools for reducing measured performance problems, not syntax required for correctness. Adding useCallback to every function may only increase dependency-management overhead and code complexity.
Read this note at sass.studio.