Summary - useState

Practice state by writing a collapsible accordion component.

Summary - useState

In this group you learned state. useState returns a value and an updater; the value is remembered across renders.

You never mutate state directly; you always call the updater. For updates based on the old value, the function form setN(n => n + 1) is safe.

Several pieces of state live in separate useState calls; related values can be grouped in one object and updated with spread.

Exercise useState summary task

Complete the skeleton. Write a Mood component; import useState. Define const [happy, setHappy] = useState(true);. Inside toggle call setHappy(h => !h). Return <button onClick={toggle}>{happy ? "Happy" : "Sad"}</button>. Export it.

Show example solution

import { useState } from "react";

function Mood() {
  const [happy, setHappy] = useState(true);
  function toggle() { setHappy(h => !h); }
  return <button onClick={toggle}>{happy ? "Happy" : "Sad"}</button>;
}

export default Mood;

Test yourself

Which is wrong?
```
Direct mutation does not update state.
```
- useState(0) is the initial value
- setCount(count + 1) updates
- count++ updates state
- useState is called at the top
Show answer

count++ updates state — count++ is direct mutation; React does not see it.
Summary - useState: match the terms

useState

Hook
updater

New value
function form

Safe increment
spread ...f

Object update

Next lesson: Project: Counter app

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies