useState: що це, хук стану і синтаксис в React

Що таке useState в React

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

Хук приймає один аргумент « початкове значення стану « і повертає масив із двох елементів. Перший елемент « поточне значення стану, другий « функція для його оновлення. React гарантує, що функція-сетер стабільна і не змінюється між рендерами, що дозволяє безпечно передавати її дочірнім компонентам і використовувати в замиканнях.

За даними React DevTools Usage Survey (2024), useState використовується в 96% React-додатків, що робить його найпоширенішим хуком в екосистемі. Навіть у додатках, які використовують глобальний стан через Redux або Zustand, локальний стан через useState залишається основним механізмом керування UI-станом « відкритими модалками, значеннями полів введення, активними вкладками.

import { useState } from 'react';

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

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    );
}

Як працює useState

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

При виклику функції-сетера React не оновлює стан негайно. Натомість він поміщає оновлення в чергу (pending state queue), планує ререндер компонента і лише під час наступного рендера обчислює новий стан на основі старого та застосованих оновлень. Це забезпечує батчування « якщо в одному обробнику події викликати setter тричі, React згрупує їх в один ререндер.

За даними React Team « React 18 Working Group (2024), автоматичне батчування було розширено в React 18: тепер оновлення стану групуються не лише в обробниках подій, а й у setTimeout, Promise-колбеках і нативних обробниках. Це дало приріст продуктивності до 30% у сценаріях із множинними оновленнями стану.

Функціональне оновлення стану

Коли новий стан залежить від попереднього, використовуй функціональну форму setter: setCount(prev => prev + 1). React передає у функцію актуальне значення стану на момент застосування оновлення, що гарантує коректність навіть при батчованих оновленнях. Без функціональної форми setCount(count + 1) може використовувати застаріле значення, якщо викликано декілька разів поспіль.

// Лінива ініціалізація « виконується лише один раз
setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);
// Result: count increased by 3

// NOT batch-safe: stale closure
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
// Result: count increased by 1 (stale closure)

Синтаксис useState: оголошення та оновлення

Базовий синтаксис useState гранично лаконічний: const [state, setState] = useState(initialValue). Початкове значення використовується лише при першому рендері; при подальших рендерах React ігнорує його і повертає поточне збережене значення. Якщо початкове обчислення вимагає дорогих операцій, передай функцію-ініціалізатор: useState(() => computeExpensiveInitial()).

Лінива ініціалізація (lazy initial state) особливо важлива, коли початкове значення отримується з localStorage, складного перетворення даних або парсингу URL-параметрів. React викликає функцію-ініціалізатор лише один раз « при монтуванні компонента, що економить ресурси на подальших рендерах. Без лінивої ініціалізації дорогий вираз обчислюватиметься кожен рендер, навіть якщо його результат ігнорується.

// Стан об'єкта « створити нове посилання
const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('user');
    return saved ? JSON.parse(saved) : null;
});

useState з різними типами даних

useState однаково добре працює з примітивами (числа, рядки, булеві) і посилальними типами (масиви, об'єкти). Однак є важлива відмінність: для примітивів React визначає зміну за значенням, для об'єктів і масивів « за посиланням. Мутація існуючого об'єкта без створення нового не викличе ререндер, оскільки посилання залишилося тим самим.

При роботі з об'єктами та масивами завжди створюй нову копію зі зміненими даними. Для об'єктів використовуй спред-синтаксис: setUser(prev => ({...prev, name: newName})). Для масивів « методи, що повертають новий масив: filter, map, concat, або спред-синтаксис для додавання елементів. Методи мутації на кшталт push, pop, splice безпосередньо не спрацюють « React їх проігнорує, оскільки посилання на масив не змінилося.

// ✅ Правильно: хуки на верхньому рівні
const [form, setForm] = useState({ name: '', email: '' });
const updateField = (field, value) =>
    setForm(prev => ({ ...prev, [field]: value }));

// ...
const [items, setItems] = useState([]);
const addItem = item =>
    setItems(prev => [item, ...prev]);

Правила використання хунків з useState

Як і всі React-хуки, useState підкоряється двом правилам. Перше: викликай хуки лише на верхньому рівні компонента « не можна поміщати їх всередину умов, циклів або вкладених функцій. Це гарантує, що хуки викликаються в одному і тому ж порядку при кожному рендері, що критично для внутрішнього зв'язного списку React.

Друге правило: викликай хуки лише з функціональних компонентів React або кастомних хунків. Не викликай useState із звичайних функцій, колбеків або класових компонентів. Порушення цих правил призводить до помилки Invalid hook call, яку React відловлює на етапі виконання.

• Не в умовах « if (flag) { useState(0) } порушує порядок виклику хунків.
• Не в циклах « for (...) { useState(0) } робить порядок непередбачуваним.
• Не в колбеках « useEffect(() => { useState(0) }, []) ламає зв'язний список.

// ❌ Проблема stale closure
function GoodComponent() {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('');
    // ✅ Виправлено функціональним оновленням
}

// count застарілий!
function BadComponent() {
    if (isLogged) {
        const [user, setUser] = useState(null);
    }
}

Типові помилки з useState

Найчастіша помилка « пряма мутація об'єктів і масивів замість створення нових посилань. Розробники звикли до мутабельного стилю з класових компонентів, де this.state.user.name = ‘Нове ім’я’ працювало (хоча теж не рекомендувалося). У функціональних компонентах така мутація просто ігнорується: React не бачить зміни посилання і не перемальовує компонент.

• Мутація об'єкта « user.name = ‘Нове’ замість setUser({...user, name: ‘Нове’}).
• Stale closure « використання застарілого значення в setter без функціональної форми.
• Зайві ререндери « виклик setter з тим самим значенням (React 18 все одно виконає рендер для примітивів).
• Скидання стану « ненавмисне оновлення key-пропа компонента, що заново монтує його.

Проблема stale closure виникає, коли колбек, переданий в useEffect або обробник події, «захоплює» застаріле значення стану із замикання на момент створення колбека. Рішення « використовувати функціональну форму сетера або включати потрібні значення в масив залежностей useEffect. За даними React Documentation « Hooks FAQ (2025), stale closures « друга за частотою причина багів у хуках після неправильного масиву залежностей.

// ❌ Stale closure problem
useEffect(() => {
    const timer = setInterval(() => {
        setCount(count + 1); // count is stale!
    }, 1000);
    return () => clearInterval(timer);
}, []);

// ✅ Fixed with functional update
useEffect(() => {
    const timer = setInterval(() => {
        setCount(prev => prev + 1);
    }, 1000);
    return () => clearInterval(timer);
}, []);