Модуль 14 · Урок 53
Minimal state, snapshots і one-way data flow
State — component memory і snapshot конкретного render. Зберігайте мінімальне джерело правди, а filtered data, count та Boolean views обчислюйте під час render.
Що справді є state
| Value | Рішення |
|---|---|
| Server/fixture response | State external process |
| Search query | State user input |
| Filtered books | Derived during render |
| Result count | Derived from filtered list |
Якщо значення повністю обчислюється з current props/state, не дублюйте його. Для shared state знайдіть closest common parent, передайте values/callbacks униз і тримайте single owner.
Snapshot, queue та immutable update
setPage(page => page + 1); setBooks(books => books.map(book => book.id === id ? { ...book, inStock: true } : book));Setter планує next render; current handler бачить старий snapshot. Functional updater потрібен, коли next залежить від queued previous state. Object/array state не mutate: створюйте next representation. Deliberate key може reset subtree state, але не маскує неправильного owner.
Практика
Заповніть state ownership і derived-state registers, перевірте submit/reset, batch кількох updates та immutable toggle без зміни чужих items.
Офіційні джерела
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.