Вивчайте Керування станом за допомогою useState

Свайпніть щоб показати меню

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

Синтаксис:

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

const [state, setState] = useState(initialState);

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

Примітка

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

Приклад 1:

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

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

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

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

Рядок 1: Імпортується хук useState з бібліотеки React для використання його функціоналу;
Рядок 3: Оголошення компонента Counter за допомогою звичайного синтаксису функції;
Рядок 4: Ініціалізація стану за допомогою хука useState;

count — значення лічильника. Початкове значення — 0, вказане у дужках useState(0);
setCount — функція для оновлення стану за потреби.

Рядки 6-8: Ця стрілочна функція JavaScript відповідає за логіку оновлення стану. Виконується при натисканні кнопки "increment". Усередині функції використовується setCount для оновлення стану;
Рядки 10-15: рендеринг розмітки компонента. У рядку 12 відображається поточне значення стану (count). Кнопка у рядку 13 використовує атрибут onClick для визначення функції, яка виконується при натисканні. У цьому випадку передається функція increment.

Приклад 2:

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

import React, { useState } from "react";

const Form = () => {
  const [userName, setUserName] = useState("");

  const handleChange = (event) => {
    const inputValue = event.target.value;
    setUserName(inputValue);
  };

  return (
    <div>
      <input
        type="text"
        value={userName}
        onChange={handleChange}
        placeholder="Your name"
      />
      <p>Hello, {userName}!</p>
    </div>
  );
};

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

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

Рядок 1: Імпортуємо хук useState з бібліотеки React для використання його функціоналу;
Рядок 3: Визначаємо компонент Form за допомогою стандартного синтаксису функції;
Рядок 4: Встановлюємо початковий стан за допомогою хука useState;

userName представляє значення поля вводу, яке спочатку встановлено як порожній рядок (""), що вказується у дужках useState("");
setUserName — це функція, яка дозволяє оновлювати стан за потреби.

Рядки 6-9: Ця стрілочна функція JavaScript обробляє логіку оновлення стану. Вона викликається, коли користувач вводить щось у поле. Значення поля отримується у функції через event.target.value. Потім використовується функція setUserName для оновлення стану значенням з поля вводу;
Рядки 11-21: Відображається розмітка компонента.

У рядку 15 ми призначаємо userName як початкове значення для поля вводу через атрибут value;
У рядку 16 використовуємо атрибут onChange, щоб вказати функцію, яка буде викликана при зміні у полі вводу.