React hooks explained: the concepts that actually matter

Hooks changed how we write React. Here are the ones you will actually use, explained with practical examples.

When hooks were introduced to React, they changed how we write components. If you are learning React now, you will use hooks from day one.

useState is the first hook you will learn. It lets your component remember things between renders. Every time you need a piece of data that changes, useState is your tool.

useEffect handles side effects: fetching data, subscribing to events, updating the document title. It runs after your component renders.

useContext lets you share data without passing props through every level. useReducer is like useState but for complex state logic.

At CEA, we teach hooks through building. You will use them in your first week because that is how modern React is written.

The mental model that unlocks everything: rendering is a function of state. Your component is called with its current props and state, returns UI, and React re-calls it whenever those inputs change. Once this clicks, hook rules stop being arbitrary — why can't you call hooks inside conditions? Because hooks are tracked by call order between renders; a conditional hook would change the order and scramble React's bookkeeping. Why does useState not reset every render? Because React stores it outside your component, keyed by position. The 'weird rules' are just the shape of this storage system.

useEffect deserves more respect than tutorials give it. Its job is synchronizing your component with systems outside React — a server, a websocket, the document title, localStorage. It is not a lifecycle method to scatter initialization logic into; it is 'keep this in sync'. That reframe explains the dependency array: it tells React which values the effect reads, so React knows when re-synchronization is needed. Fight the urge to silence the exhaustive-deps warning with an empty array — most 'weird effect bugs' are stale closures where the effect read a value React did not know about.

Data fetching in real applications outgrows bare useEffect quickly. You need loading states, error states, retries, caching, and deduplication of concurrent requests — reimplementing all of that per component leads to spaghetti. This is exactly what TanStack Query (React Query) solves, and learning it early makes you dramatically more employable because production codebases overwhelmingly use a data library rather than raw effects. Understand the raw version first so you know what problems exist; then let the library solve them.

Performance knowledge for interviews: memoization hooks — useMemo caches computed values, useCallback caches function identities, and both exist mainly because passing new object or function references each render defeats memoized children. But do not sprinkle them everywhere; unnecessary memoization adds complexity for negligible gain. Profile first (React DevTools Profiler shows exactly which components re-render), optimize the actual hotspot, and be able to explain why you did. Interviewers care less about whether you used useMemo than about whether you know when it matters.

Finally, build things that force multiple hooks to cooperate, because isolated demos never teach composition. A dashboard with filters (useState), server data (Query), URL sync (router params), and a websocket feed (custom hook) teaches you how state genuinely flows through an application — including the moment you realize some state should live in the URL instead of memory. That architectural judgment, not hook syntax, is the actual skill gap between beginners and hired developers.