Best Tutorial for 11 React Hooks

React hooks changed how I write components. Before hooks, any component that needed state or lifecycle methods had to be a class. Now, functions handle everything — and the code is cleaner for it.

Here's my breakdown of the 11 hooks available in React. What they do, when to use them, and when to avoid them.

What Are React Hooks?

Hooks let function components have state, side effects, and access to React's lifecycle. They replaced class components for most use cases. The result: less boilerplate, more composable logic, and easier testing.

1. useState

Manages local state inside a component. Returns the current value and a setter function.

const [state, setState] = useState(initialState)

Use it for: Form inputs, toggles, counters — any local UI state.

Watch out for: Don't shove everything into useState. If the state is derived from props, compute it instead. If it's shared across components, consider useContext or a state management library.

2. useEffect

Runs side effects after render. Think API calls, subscriptions, and DOM manipulation.

Use it for: Data fetching, event listeners, timers.

Watch out for: Missing dependencies cause stale closures. Too many effects in one component is a code smell — extract them into custom hooks.

3. useContext

Reads a value from React's context system. Avoids prop drilling.

Use it for: Theme, auth state, locale — values many components need.

Watch out for: Context re-renders every consumer when the value changes. For high-frequency updates, this can kill performance.

4. useReducer

Like useState, but for complex state logic. Takes a reducer function and dispatches actions.

Use it for: State with multiple sub-values or when the next state depends on the previous one.

Watch out for: Overkill for simple state. If you're writing a reducer for a single boolean, use useState.

5. useCallback

Memoizes a function so it keeps the same reference between renders.

Use it for: Passing callbacks to optimized child components that rely on reference equality (via React.memo).

Watch out for: Premature optimization. useCallback has its own cost. Only use it when you've measured a performance problem.

6. useMemo

Memoizes a computed value. Only recalculates when its dependencies change.

Use it for: Expensive calculations that shouldn't re-run on every render.

Watch out for: Same as useCallback — don't reach for it by default. Measure first.

7. useRef

Holds a mutable value that persists across renders without triggering re-renders.

Use it for: DOM references, storing previous values, tracking intervals or timeouts.

Watch out for: Mutating refs doesn't cause re-renders. If you need the UI to update, use state instead.

8. useImperativeHandle

Customizes the instance value exposed to parent components when using ref. Used with forwardRef.

Use it for: Exposing specific methods on a component (like focus or scroll) without exposing the entire DOM node.

Watch out for: This is an escape hatch. If you're using it frequently, your component API design might need rethinking.

9. useLayoutEffect

Same as useEffect, but fires synchronously after all DOM mutations and before the browser paints.

Use it for: Measuring DOM elements, adjusting layout before the user sees the result.

Watch out for: Blocks visual updates. Use useEffect unless you need synchronous DOM reads.

10. useDebugValue

Displays a label in React DevTools for custom hooks.

Use it for: Making custom hooks easier to inspect during development.

Watch out for: Only useful in custom hooks. Don't use it in components directly.

11. useId

Generates a unique ID that's stable across server and client renders.

Use it for: Accessibility attributes like htmlFor and aria-describedby that need matching IDs.

Watch out for: Don't use it as a key for list items. It's for DOM identity, not data identity.

The Bottom Line

You don't need all 11 hooks in every project. Most of my components use useState, useEffect, and useRef. The rest I reach for when the situation demands it. Learn what each hook does, and let the problem guide which one you pick.