Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Де зберігається стан компонента?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

### 1. На рівні коду

Коли ти пишеш, наприклад:

```javascript
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
```

Здається, ніби `count` зберігається просто у змінній всередині функції.
Але це **не так**, тому що функція викликається **заново при кожному рендері**,
а отже, всі локальні змінні всередині неї скидаються.

---

### 2. Де реально зберігається `state`

Насправді **стан зберігається всередині самого React**, а не в компоненті напряму.

React під час рендеру створює для кожного компонента **внутрішню структуру (Fiber node)**, де він зберігає всю службову інформацію:

- поточний стан (`state`)
- хуки (`useState`, `useEffect`, `useRef` тощо)
- посилання на дочірні компоненти
- попередні props і state
- прапорці для оновлень тощо

Тобто `useState` не створює змінну у твоїй функції,
він **реєструє її всередині React Fiber**.

---

### 3. Що відбувається при `setState` / `setCount`

Коли ти викликаєш `setCount(newValue)`:

1. React **зберігає нове значення state** у своїй внутрішній структурі (Fiber).
2. Позначає компонент як **"такий, що потребує оновлення"**.
3. Перемальовує компонент (викличе функцію `Counter()` заново).
4. При новому рендері React **дістає збережений state** і підставляє його в `[count, setCount]`.

> Тому значення `count` "пам'ятає" своє минуле,
> навіть якщо функція `Counter` викликається знову і знову.

---

### 4. Де саме зберігається (якщо спрощено)

Якщо уявити у вигляді структури:

```javascript
FiberNode = {
  type: Counter,
  stateHooks: [
    { state: 0, queue: [updateFn1, updateFn2, ...] }
  ],
  props: {},
  memoizedState: ...,
  ...
}
```

То стан зберігається в `stateHooks` або `memoizedState` об'єкта Fiber,
а не у твоїй функції напряму.

---

### 5. Підсумок:

| Питання | Відповідь |
|---|---|
| Де зберігається стан? | Всередині React (у структурі Fiber, пов'язаній з компонентом). |
| Чому не в самій функції? | Тому що компонент - це просто функція, яка викликається кожен рендер. |
| Як React "пам'ятає" минулий стан? | Він зберігає його між викликами функції, у своєму внутрішньому дереві компонентів. |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати314 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.