Ручное удаление узла React
Вопрос
Код вызывает listRef.current.firstChild.remove() для элемента, который рендерит React. Чем это опасно при следующем обновлении списка?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Варианты ответа
- React заметит удаление через MutationObserver и уберёт элемент из дерева
- React попытается обновить отсутствующий узел и упадёт или испортит разметкуправильный ответ
- Ничего плохого: React всё равно перерисует список с нуля при обновлении
- Узел вернётся автоматически при следующем коммите без ошибок
Разбор
React не следит за ручными изменениями DOM. Его внутреннее дерево по-прежнему содержит этот узел, и при следующем обновлении он попытается с ним работать, что приводит к ошибкам вроде removeChild или к рассинхрону разметки. Список с нуля React не перерисовывает, а восстанавливать узел ему неоткуда знать. Менять вручную можно только узлы, которые React не рендерит (например, пустой контейнер для сторонней библиотеки).
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.