Де зберігається стан компонента?
1. На рівні коду
Коли ти пишеш, наприклад:
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):
- React зберігає нове значення state у своїй внутрішній структурі (Fiber).
- Позначає компонент як "такий, що потребує оновлення".
- Перемальовує компонент (викличе функцію
Counter()заново). - При новому рендері React дістає збережений state і підставляє його в
[count, setCount].
Тому значення
count"пам'ятає" своє минуле, навіть якщо функціяCounterвикликається знову і знову.
4. Де саме зберігається (якщо спрощено)
Якщо уявити у вигляді структури:
FiberNode = {
type: Counter,
stateHooks: [
{ state: 0, queue: [updateFn1, updateFn2, ...] }
],
props: {},
memoizedState: ...,
...
}То стан зберігається в stateHooks або memoizedState об'єкта Fiber,
а не у твоїй функції напряму.
5. Підсумок:
| Питання | Відповідь |
|---|---|
| Де зберігається стан? | Всередині React (у структурі Fiber, пов'язаній з компонентом). |
| Чому не в самій функції? | Тому що компонент - це просто функція, яка викликається кожен рендер. |
| Як React "пам'ятає" минулий стан? | Він зберігає його між викликами функції, у своєму внутрішньому дереві компонентів. |
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.