Як працює useState у React?

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

Як працює useState?

Ініціалізація стану. Хук useState приймає початкове значення і повертає масив з двох елементів:

Поточне значення стану.
Функція для оновлення стану.

Оновлення стану. Коли стан змінюється, компонент повторно рендериться з новим значенням стану.

Приклад використання useState

jsx

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // Ініціалізувати стан з початковим значенням 0

  const increment = () => {
    setCount(count + 1); // Оновити стан
  };

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

Важливі моменти при використанні useState

Функцію оновлення стану можна викликати з новим значенням стану або функцією, яка приймає попередній стан:

jsx

setCount(prevCount => prevCount + 1);

Якщо ви хочете оновити стан на основі його попереднього значення, використовуйте функцію, передану до setCount, щоб уникнути проблем з асинхронністю оновлення.

Приклад функції оновлення

jsx

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

  const increment = () => {
    setCount(prevCount => prevCount + 1); // Використовувати попередній стан
  };

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

useState та повторний рендеринг:

Коли стан змінюється, React повторно рендерить компонент з новим значенням стану, що дозволяє створювати динамічні та інтерактивні інтерфейси.

Як працює useState(() => compute())?

Коли ви передаєте функцію до useState, ця функція буде виконана лише один раз — при першому рендерингу компонент. Це може бути корисно для оптимізації продуктивності, якщо обчислення є важкими або якщо вам потрібно зробити щось перед встановленням початкового стану.

Замість того, щоб обчислювати значення щоразу під час рендерингу, React викликатиме цю функцію лише один раз і використовуватиме результат як початковий стан.

Приклад використання:

jsx

import { useState } from "react";

// Функція для складних обчислень
function compute() {
  console.log("Виконуються обчислення...");
  return 42; // Наприклад, складна логіка обчислення
}

function MyComponent() {
  const [count, setCount] = useState(() => compute()); // compute викликається лише один раз

  return (
    <div>
      <p>Value: {count}</p>
    </div>
  );
}

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Як працює useState у React?