Вопрос проверяет понимание механизма множественного добавления элементов в React с использованием хука useState, чтобы избежать ошибок при асинхронных обновлениях состояния.
В React хук useState позволяет управлять состоянием компонента, но важно понимать, что обновления состояния не происходят синхронно. Когда вы вызываете функцию обновления состояния (например, setItems) несколько раз подряд в одном синхронном блоке кода (например, в обработчике события), React может объединить эти обновления, и каждое из них будет использовать одно и то же старое значение состояния. Это приводит к тому, что только последнее обновление применяется, а предыдущие "теряются".
Представьте, что у вас есть список элементов, и вы хотите добавить несколько новых элементов при нажатии кнопки. Если вы сделаете это через прямое обновление, код может выглядеть так:
const [items, setItems] = useState([]);
const handleAdd = () => {
setItems([...items, 'item1']);
setItems([...items, 'item2']); // Ошибка: items здесь всё ещё старый массив
};В этом примере оба вызова setItems используют начальное значение items (пустой массив), потому что React ещё не обновил состояние после первого вызова. В результате в состоянии окажется только ['item2'], а 'item1' будет потерян.
Чтобы решить эту проблему, нужно использовать функциональную форму setItems, которая принимает предыдущее состояние в качестве аргумента и возвращает новое состояние. Это гарантирует, что каждое обновление основывается на самом актуальном состоянии:
const handleAdd = () => {
setItems(prevItems => [...prevItems, 'item1']);
setItems(prevItems => [...prevItems, 'item2']);
};Теперь первый вызов добавит 'item1' к текущему массиву, а второй вызов возьмёт уже обновлённый массив (с 'item1') и добавит 'item2'. В итоге состояние станет ['item1', 'item2'].
Этот подход полезен в сценариях, где состояние обновляется несколько раз в быстрой последовательности, например:
Использование функциональных обновлений делает код более предсказуемым и избегает распространённых ошибок, связанных с асинхронностью React.
Вывод: Функциональные обновления состояния в React следует применять, когда нужно выполнить несколько последовательных изменений состояния в одном событии, чтобы гарантировать корректность и избежать потери данных.
