React Hooks: State, Effects and Reusable Logic
Hooks connect function components to React features such as local state, context and external synchronization.
- Author
- absequ
- Published
- Updated
- Category
- React
- react hooks
- react
- practical guide
Hooks connect function components to React features such as local state, context and external synchronization. They are not a reason to put every calculation into an effect. A useful starting point is to classify work as rendering a value, responding to a user action, or synchronizing with something outside React. Different categories need different tools.
On this page
The mental model
State is a snapshot for a render. Calling a setter schedules another render; it does not rewrite the value already captured by the current event handler. When the next value depends on the previous value, an updater function makes that relationship explicit. Keep state minimal: storing a filtered list as well as the original list creates two values that must stay synchronized.
Refs retain mutable information without requesting a render. They suit handles such as a media element or an in-flight operation marker, not visible counters. Context distributes values through a component subtree; it is not automatically a complete state-management system. A custom Hook packages reusable behavior while preserving React's own lifecycle rules.
A practical workflow
Calculate inexpensive derived values during rendering. Put a purchase request or clipboard operation in the event handler that represents the user's intention. Reserve an effect for an external subscription, browser API or another system whose lifetime must follow the component. Return cleanup that reverses the subscription or resource acquisition.
Call ordinary Hooks at the top level of a component or custom Hook, not in a condition or loop. Dependencies describe the reactive values used by an effect; deleting dependencies to avoid reruns creates stale closures rather than solving ownership. If a dependency changes too frequently, reconsider the effect's responsibility before adding memoization.
Worked example
'use client';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
const doubled = count * 2;
return <button onClick={() => setCount(value => value + 1)}>
Count {count}; doubled {doubled}
</button>;
}The derived value is recomputed from the current snapshot, so no extra effect is needed to keep it correct. The updater receives the latest queued state. Give the button a meaningful label and use a native button so keyboard activation is supplied by the browser. A real application should also decide whether this state belongs locally, in a parent or in the URL.
For external events, subscribe in an effect and remove exactly the same callback during cleanup. When an API exposes a readable snapshot and subscriptions, consider useSyncExternalStore. React development checks may repeat setup and cleanup to expose lifecycle mistakes; code should remain correct under that sequence rather than disabling the checks.
Failure modes and security
An effect that fetches data can complete after its inputs change. Use cancellation or a result-ownership check so an older response cannot replace newer results. Avoid logging authorization headers or private response bodies while investigating races. Browser state is not a secure place for server credentials.
Memoization is a performance tool, not a correctness mechanism. Measure before adding useMemo or useCallback everywhere; retained objects and dependency bookkeeping also have a cost. Test behavior through interactions and cleanup, rather than asserting how many times an implementation happens to render in development.
Practice and verification
Implement a searchable list with one query state and a derived result array. Next add an external online/offline indicator with proper subscription cleanup. Test rapid query changes, unmounting and keyboard interaction. Ask whether the search term should survive a reload; if so, a URL parameter may be more appropriate than another global store. Keep server data loading separate from browser state unless the actual user experience requires client fetching.
References
React built-in Hooks — React
Synchronizing with effects — React
State as a snapshot — React