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

Синтаксис:

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

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

• Можна обрати будь-яке слово як ім'я state змінної. Рекомендується використовувати назву, яка точно описує, який стан зберігається або оновлюється, наприклад: inputValue, page, number, name тощо;

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

Note

Після виклику 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;

1. count — значення лічильника. Початкове значення — 0, вказане у дужках useState(0);
2. 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;

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

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

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

Повний код застосунку: