← React Beginner Questions - Set 2 Q13

What is the purpose of the useState hook?

React Beginner Questions - Set 2

It gives a function component a piece of memory between renders, plus a setter that schedules a re-render.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import { useState } from 'react';

export default function Profile() {
  const [name, setName] = useState('Ana');
  const [visible, setVisible] = useState(true);

  return (
    <section>
      <button onClick={() => setVisible(v => !v)}>
        {visible ? 'Hide' : 'Show'} details
      </button>

      {visible && (
        <input value={name} onChange={e => setName(e.target.value)} />
      )}
    </section>
  );
}

What to notice

• Two `useState` calls = two independent values; there is no single state object unless you build one.
• `setVisible(v => !v)` toggles safely; `setVisible(!visible)` reads a value that may be stale in a handler.
• The initial value is only used on the first render — passing `props.x` on later renders changes nothing.