Керування Станом за Допомогою useState

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

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