Скачать или смотреть Базовий курс React JS | #5 useState hook

Таймкоди:
01:00 - Навіщо компонентам потрібен стан
02:12 - useState: синтаксис та принцип роботи
04:17 - Функціональна форма setState
04:49 - Stale closure: чому count не оновлюється в setInterval
06:24 - Правила виклику хуків (top-level rules)
08:04 - Lazy initial state і оптимізація важких обчислень
10:06 - Приклад із списком користувачів та додавання нового користувача
18:29 - Редагування ролі користувача
23:22 - Самостійна робота

Привіт!
У цьому відео ми детально розберемо один із ключових хуків React - useState.
Ти дізнаєшся:
➤ Як правильно зберігати стан у функціональних компонентах
➤ Чому React не оновлює UI, коли ти змінюєш змінну напряму
➤ Як працює setState та чому оновлення стану асинхронне
➤ Що таке lazy initial state і як оптимізувати важкі обчислення
➤ Як уникнути проблеми stale closure
➤ Як створювати форми з керованими компонентами
➤ Як оновлювати масиви стану (наприклад, додавати і редагувати користувачів)

🔗 Репозиторій з кодом цього уроку:
github.com/kobzacode/React-basic-course/tree/lesson-5

А тепер - ваша самостійна робота!
В продовження попереднього завдання із книжками:
1. Додайте useState для масиву книжок у компоненті App, щоб можна було динамічно змінювати список без перезавантаження сторінки.
2. Створіть компонент із формою для додавання нової книжки з полями: title, author, year, genre
3. Зробіть можливість редагування книжок. додайте форму, яка дозволяє змінювати поля: title, author, year, genre
Не забудьте прокинути колбек для зміни даних через компонент BookList
4. Додайте властивість rate у інтерфейс IBook – це буде числовий рейтинг книжки.
При зміні рейтингу викликайте колбек, щоб оновлювати його у стані.
5. Також додайте властивість comments у інтерфейс IBook – це буде масив коментарів. Під кожною книжкою відображайте всі коментарі та додайте поле для створення нового коментаря.
Колбек для додавання нового коментаря теж передайте через BookList.
6. Додайте чекбокс для позначення прочитаних книжок.
У режимі перегляду можна буде ставити або знімати позначку "Прочитано", і стан книжки має оновлюватися.

🔗 А якщо у вас виникнуть труднощі ось посилання на репозиторій homework-5 із готовим прикладом коду
github.com/kobzacode/React-basic-course/tree/homework-5

Підписуйтесь на канал, ставте👍 та залишайте коментарі!