Все про useState

ReactJunior~1 хв читання

Що робить `useState()`

useState() - це хук для зберігання стану всередині функціонального компонента. Він дозволяє "запам'ятати" значення між рендерами і оновлювати його, викликаючи повторний рендер компонента.

Синтаксис

javascript

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

initialValue - початкове значення стану (число, рядок, об'єкт, масив тощо)
Повертає масив із двох елементів:
1. поточне значення стану
2. функцію для його оновлення

Що повертає `useState()`

javascript

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

count - поточне значення стану (наприклад, 0)
setCount - функція, яка змінює стан

Як змінити стан

Щоб змінити стан, викликаємо функцію setCount() із новим значенням:

javascript

setCount(5);

або на основі попереднього стану:

javascript

setCount(prev => prev + 1);

Важливо: Не можна змінювати стан напряму (count++), бо React не дізнається, що потрібно перемалювати компонент. Оновлення повинне відбуватись через сеттер (setCount).

Приклад - лічильник

javascript

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 0 - початкове значення

  return (
    <div>
      <p>Ви натиснули {count} разів</p>
      <button onClick={() => setCount(count + 1)}>
        Збільшити
      </button>
    </div>
  );
}

При кожному кліку:

Викликається setCount(count + 1)
React оновлює count
Компонент перемальовується з новим значенням

Оновлення на основі попереднього значення

Якщо новий стан залежить від старого, використовуй функціональну форму:

javascript

setCount(prev => prev + 1);

Це гарантує правильне оновлення, навіть якщо React об'єднує кілька викликів setCount.

Що важливо пам'ятати

Правило	Чому
Не змінюй стан напряму (`state = ...`)	React не дізнається про зміну
Можна зберігати будь-які типи (числа, об'єкти, масиви)	`useState` універсальний
При виклику `setState` компонент перемальовується	Це викликає новий рендер
Оновлення асинхронні	React може об'єднувати їх для оптимізації

Приклад з об'єктом

javascript

const [user, setUser] = useState({ name: "Tim", age: 25 });

// Оновлюємо одне поле
setUser(prev => ({ ...prev, age: prev.age + 1 }));

Не можна писати user.age = 26; - це не змінить стан у React.

Підсумок

Питання	Відповідь
Що робить `useState()`	Додає внутрішній стан у функціональний компонент
Що повертає `useState()`	Масив: `[поточне значення, функція для зміни]`
Як змінити стан	Викликати `setState(newValue)` або `setState(prev => nextValue)`

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

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

Premium

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