> Почему второй setState не получает измененное значение state в React и как это исправить (React, TypeScript)

Проблема в том, что setState в React - асинхронный. Когда вы вызываете два setState подряд, React не гарантирует, что первый уже применил изменения к моменту вызова второго. Вместо этого React группирует (batches) обновления и применяет их за один проход, используя текущее состояние на момент начала рендера, а не после первого setState.

Пример проблемы:

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

setCount(count + 1); // count = 0, setState(1)
setCount(count + 1); // count всё ещё 0, setState(1) - итог: 1, а не 2

Исправление: используйте функциональную форму setState, которая принимает предыдущее состояние:

TSX
setCount(prev => prev + 1);
setCount(prev => prev + 1); // теперь каждый вызов получает актуальное prev

Для TypeScript это выглядит так:

TSX
const [count, setCount] = useState<number>(0);

setCount((prev: number) => prev + 1);
setCount((prev: number) => prev + 1);

Также можно использовать useReducer для более сложной логики зависимых обновлений.