{user.name}
:Loading...
; ``` What you should see: a loading message, an error on failure, no warning about setting state after unmount. Solution ``` useEffect(() => { let cancelled = false; setLoading(true); fetch(`/api/users/${userId}`) .then((res) => (res.ok ? res.json() : Promise.reject(new Error("Failed")))) .then((data) => !cancelled && setUser(data)) .catch((err) => !cancelled && setError(err.message)) .finally(() => !cancelled && setLoading(false)); return () => { cancelled = true; };}, [userId]); ``` There is no error handling, and nothing guards against `userId` changing before the fetch resolves. The `cancelled` flag stops a stale response from calling `setUser` after unmount or a newer request; without `userId` in the dependency array, the effect would never refetch. ### Drill 5: extract a `useLocalStorage` custom hook Turn this component's manual `localStorage` reads and writes into a reusable hook. ``` const [notes, setNotes] = useState( JSON.parse(localStorage.getItem("notes")) || "");const handleChange = (event) => { setNotes(event.target.value); localStorage.setItem("notes", JSON.stringify(event.target.value));}; ``` What you should see: notes persist across reloads, and the storage logic leaves the component. Solution ``` function useLocalStorage(key, initialValue) { const [value, setValue] = useState(() => { const stored = localStorage.getItem(key); return stored !== null ? JSON.parse(stored) : initialValue; }); useEffect(() => { localStorage.setItem(key, JSON.stringify(value)); }, [key, value]); return [value, setValue];}// const [notes, setNotes] = useLocalStorage("notes", ""); ``` A custom hook is a function that calls other hooks and starts with `use`. The lazy initializer, `useState(() => ...)`, reads `localStorage` once on mount, and the write moves into its own effect keyed on `[key, value]`. Never call a hook conditionally or inside a loop. ### Drill 6: a shopping cart with `useReducer` Replace ad-hoc `useState` calls with `useReducer` to handle adding and removing items in one place. ``` const [items, setItems] = useState([]);const addItem = (item) => setItems([...items, { ...item, qty: 1 }]);const removeItem = (id) => setItems(items.filter((i) => i.id !== id)); ``` What you should see: the same add and remove behaviour, driven by one reducer and a `dispatch` call per action. Solution ``` function cartReducer(state, action) { switch (action.type) { case "add": return [...state, { ...action.item, qty: 1 }]; case "remove": return state.filter((i) => i.id !== action.id); default: return state; }}const [items, dispatch] = useReducer(cartReducer, []);// dispatch({ type: "remove", id: item.id }) ``` `useReducer` earns its keep once several related transitions touch the same state, which is exactly a cart: the logic moves into one pure function instead of several `useState` setters. The common mistake when converting is mutating `state` inside a case (`state.push(...)`) instead of returning a new array; React compares state by reference, so a mutated array will not trigger a re-render. ## Common mistakes - Missing dependencies. Trust ESLint's `react-hooks/exhaustive-deps` warning instead of silencing it. - Reading state instead of using the updater. `setState(state + 1)` can read a stale snapshot; the updater form never does. - Forgetting cleanup in `useEffect`. A subscription, timer, or listener needs a returned cleanup, or it outlives the component. - Fetching without a cancelled flag. A slow response for an old prop value can otherwise overwrite a newer one. - Calling hooks conditionally. Hooks must run unconditionally at the top level, never inside an `if` or loop. ## Where to practice next on Scrimba React hooks anchor the [Frontend Developer Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/); these courses go deeper on the same patterns. | Course | What it drills | Access | Length | | --- | --- | --- | --- | | [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/) | `useState` with a callback updater (Drill 1) and a nine-lesson run on forms in React State; `useEffect`, the empty dependencies array, and cleanup in Side Effects. 170+ challenges, all free | Free | 15.1 hrs | | [What's New in React 19?](https://scrimbaguide.tech/docs/courses/react/whats-new-in-react-19/) | 15 scrims, all free: `useTransition`, form actions, `useActionState` in three parts, `useOptimistic`, `useFormStatus`, and `use()`. Three challenges arrive as comment blocks in the file | Free | 1.2 hrs | | [Advanced React](https://scrimbaguide.tech/docs/courses/react/advanced-react/) | Reusability (68 scrims): a headless Toggle, refs taught through a deliberate infinite render loop, then a nine-part `useToggle` custom hook. Performance (19 scrims): `React.memo` and `useCallback`. Three sample scrims free, everything else Pro | Pro | 18.8 hrs | | [React Interview Questions](https://scrimbaguide.tech/docs/courses/react/react-interview-questions/) | Spoken answers on state vs props, `useEffect` timing per dependency array, and refs vs state, plus one coding task: convert a class counter to `useState`. First two scrims free, the other nine Pro | Pro | 41 min | ## Related practice guides - [Practice React Projects](https://scrimbaguide.tech/docs/practice/practice-react-projects/), put hooks to work in full builds - [Practice API Calls](https://scrimbaguide.tech/docs/practice/practice-api-calls/), more on fetching and error states - [All practice drills](https://scrimbaguide.tech/docs/practice/) **Q: Why does my useState value stay stale inside setInterval or an event handler?** The callback closes over the state from the render where the effect ran. Use the updater form, setCount((prev) => prev + 1), to read the latest value. **Q: Do I always need a cleanup function in useEffect?** Only when the effect starts something that outlives a render: a subscription, an interval, a listener, or a request. **Q: When should I use useReducer instead of useState?** When several state updates share the same actions, like a cart. It centralises the logic in one function. **Q: Is Scrimba's free React course enough to practice hooks, or do I need Pro?** Learn React is free and covers useState and useEffect in full. Advanced React (Pro) goes deeper into custom hooks. ## Turn hooks drills into real components Learn React is free; Advanced React and the Pro paths go deeper on custom hooks and patterns. **[Try Scrimba free](https://scrimba.com/?via=u42d4986)** ### Related Guides - [React Learning Path](https://scrimbaguide.tech/blog/scrimba-react-learning-path/) - [Practice API Calls](https://scrimbaguide.tech/docs/practice/practice-api-calls/) - [Frontend Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/)