Чому потрібно використовувати setState () для оновлення внутрішнього стану компонента?

Повне пояснення

Що це і навіщо

setState() — метод класових компонентів (React class) та функціональних через useState, який оновлює внутрішній стан і сигналізує React про необхідність повторного рендеру. Це забезпечує реактивність UI.

Ключові принципи

• Іммутабельність: setState() приймає нове значення або функцію, що повертає оновлений стан.
• Батчинг: React збирає кілька setState() в один рендер, щоб уникнути зайвих оновлень.
• Асинхронність: setState() асинхронний, тому новий стан доступний лише після завершення рендеру.

Як це працює

1. Виклик setState(newState).
2. React обчислює новий стан, зберігає його в черзі.
3. Після завершення поточного циклу рендеру React виконує оновлення DOM.

Практика і реалізація

class Counter extends React.Component {
  state = { count: 0 };
  increment = () => this.setState({ count: this.state.count + 1 });
}

const [count, setCount] = useState(0);
const increment = () => setCount(c => c + 1);

Тестування

import { render, fireEvent } from '@testing-library/react';
const { getByText } = render(<Counter />);
fireEvent.click(getByText('Increment'));
expect(getByText(/1/)).toBeInTheDocument();

Безпека і приватність

setState() не змінює зовнішні об’єкти; оновлення відбувається в локальному стані, що зменшує ризик непередбачуваних побічних ефектів.

Оптимізація

• Використовуйте функціональний setState, щоб уникнути проблем з асинхронністю.
• Застосовуйте shouldComponentUpdate або React.memo для запобігання зайвим рендером.

Часті помилки

1. Мутування стану – змінюйте копію, а не оригінал.
2. Виклик setState у конструкторі – використовуйте this.state.
3. Виклик setState у render – викликає нескінченний цикл.
4. Неочікуваний асинхронний стан – використовуйте колбек setState.
5. Використання this.state після setState – новий стан доступний лише після рендеру.
6. Виклик setState у useEffect без залежностей – може викликати нескінченний цикл.
7. Забудьте про ключі у списках – React не оновить елементи.
8. Використання setState у класах без bind – контекст this буде undefined.

Cheatsheet

• setState(newState) – синхронне оновлення.
• setState(prev => newState) – функціональний варіант.
• useState(initialValue) – хук для функціональних компонентів.

Follow‑up питання

1. Як працює батчинг setState у React 18?
2. Чому useState не викликає повторний рендер, якщо нове значення рівне старому?
3. Які альтернативи setState для глобального стану?