Understanding React Hooks: useState and useEffect in Depth

Hooks give function components the power of state and side effects without classes. Two of them do most of the heavy lifting.

useState: your stateful primitive

Use state for data that changes over time and triggers a re-render. Always update with the setter rather than mutating state directly, so React can detect the change.

useEffect: synchronising with the outside world

Effects run after render and are the right place for subscriptions, timers, and fetching. Provide a cleanup function to avoid memory leaks, and list dependencies so the effect reruns only when needed.

The Rules of Hooks

Call hooks at the top level, never inside loops or conditions, and only from function components or custom hooks. These rules keep the hook order stable across renders.

Wrapping up

A solid grasp of state and effects unlocks nearly every pattern in modern React, from forms to data fetching.