React hooks: useState, useEffect and co. explained clearly

In short: Hooks are functions with which React components use state and side effects; useState stores values, useEffect runs after rendering, and custom hooks bundle logic.

In more detail: In React components are functions that describe the interface. With hooks (since React 16.8) they get memory and reactions to events, without classes. Rules: call hooks at the top level of the component and only in components or custom hooks.

In Depth

useState: state

function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>Clicked: {n}</button>;
}

When the state is changed with setN, React re-renders the component. Never change state directly (n++, list.push), set new values instead (setList([...list, x])). When depending on the old value: setN(v => v + 1).

useEffect: side effects

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id); // clean-up
}, [tick]); // dependencies

For things outside React: loading data, timers, event listeners, document title. The dependency array decides when the effect runs again ([] = once after the first render). The clean-up function prevents leaks. Avoid effects where calculation during rendering suffices; better load data with server components, TanStack Query or SWR.

Other important hooks

• useRef: mutable value/DOM access without re-rendering.
• useMemo / useCallback: cache results/functions (only for real performance problems).
• useContext: values without passing through all levels.
• useReducer: complex state with actions.
• useTransition / useDeferredValue: keep input smooth.
• Custom hooks (useOnline(), useLocalStorage()) bundle reusable logic.

Typical mistakes

• Infinite loop: setting state in an effect without suitable dependencies.
• Stale closure: forgotten dependencies; use the ESLint rule react-hooks/exhaustive-deps.
• Derivable state? Then calculate instead of storing.
• Lift state up instead of duplicating.
• Choose keys in lists stably. Practise: small projects (to-do list, counter, search filter) and the official docs at react.dev.

See also: React, Next.js App Router, TypeScript, Events