useState Хук

Хук useState - це фундаментальний хук React, який дозволяє функціональним компонентам мати стан. Він надає спосіб оголошувати та оновлювати змінні стану всередині компонента.

Синтаксис:

Щоб використати хук useState, ми викликаємо його і передаємо початковий стан (initialState) як аргумент. Він повертає масив з двома елементами: поточне значення стану (state) і функцію (setState) для оновлення стану.

• Ми можемо вибрати будь-яке слово як ім'я для змінної state. Рекомендується використовувати назву змінної, яка точно описує, який стан зберігається або оновлюється, наприклад, inputValue, page, number, name і так далі.
• Аналогічно, при використанні функції setState ми маємо гнучкість у виборі назви функції. Однак слід дотримуватися певного шаблону: ім'я функції setState має починатися зі слова "set", за яким слідує ім'я відповідної змінної стану. Наприклад, якщо змінна state має значення mail, відповідна функція setState зазвичай називається setMail.

Примітка

Коли ми викликаємо setState, React повторно рендерить компонент і оновлює стан новим значенням. Важливо зазначити, що при використанні useState змінна стану не обов'язково має бути об'єктом. Це може бути примітивне значення (наприклад, число, рядок або буль) або складне значення (наприклад, масив або об'єкт).

Приклад 1:

Створимо компонент Counter, який буде підтримувати власний стан. При натисканні кнопки Increment ми будемо оновлювати стан і запускати ререндеринг компонента.

У цьому прикладі хук useState використовується для оголошення змінної стану count з початковим значенням 0. Функція setCount використовується для оновлення змінної count при кожному натисканні кнопки.

Пояснення по рядках:

• Рядок 1: Імпортуємо хук useState з бібліотеки React, щоб використати його функціональність.
• Рядок 3: Визначаємо компонент Counter, використовуючи звичайний синтаксис функцій.
• Крок 4: Ініціалізуємо стан за допомогою хука useState.
  1. count представляє значення лічильника. Його початкове значення 0, вказане в дужках useState(0).
  2. setCount - функція, яка оновлює стан, коли це необхідно.
• Рядки 6-8: Ця стрілочна функція JavaScript відповідає за логіку оновлення стану. Вона виконується при натисканні кнопки "increment". Всередині функції ми використовуємо функцію setCount для оновлення стану.
• Рядки 10-15: виводиться розмітка компонента. У рядку 12 виводиться поточне значення стану (count). Кнопка у рядку 13 використовує атрибут onClick для визначення функції, яка виконується при натисканні. У цьому випадку ми передаємо функцію increment.

Повний код програми:

Приклад 2:

Створимо компонент Form з незалежним станом. Запропонуємо користувачеві ввести своє ім'я в поле вводу, і в залежності від введених даних будемо змінювати вміст, що відображається.

У цьому прикладі хук useState використовується для оголошення змінної стану userName з початковим значенням порожнього рядка. Функція setUserName оновлює змінну userName щоразу, коли нам потрібно це зробити.

Пояснення по рядках:

• Рядок 1: Імпортуємо хук useState з бібліотеки React, щоб використовувати його функціональність.
• Рядок 3: Визначаємо компонент Form, використовуючи стандартний синтаксис функції синтаксисом функції.
• Рядок 4: Встановлюємо початковий стан за допомогою хука useState.
  1. userName представляє значення поля введення, спочатку встановлене як порожній рядок (""), вказаний у дужках useState("").
  2. setUserName - це функція, яка дозволяє нам оновлювати стан, коли це необхідно.
• Рядки 6-9: Ця стрілочна функція JavaScript відповідає за логіку оновлення стану. Вона спрацьовує, коли користувач вводить щось у поле. Ми отримуємо вхідне значення всередині функції за допомогою event.target.value. Потім ми використовуємо функцію setUserName, щоб оновити стан значенням з поля вводу.
• Рядки 11-21: Виводиться розмітка компонента.
  1. У рядку 15 ми призначаємо userName як початкове значення для введення за допомогою атрибута value.
  2. У рядку 16 ми використовуємо атрибут onChange, щоб вказати функцію, яка буде викликана при зміні вхідних даних.

Повний код програми: