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

Синтаксис:

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

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

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

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

Приклад 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 для вказівки функції, яка викликається при зміні значення у полі.

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