React Frontend Developer

Question 1

Что такое утечка памяти в JavaScript? Как её можно диагностировать?

Accepted Answer

Утечка памяти в JavaScript происходит, когда программа удерживает ссылки на объекты, которые больше не используются, из-за чего память не освобождается. Это может привести к снижению производительности и даже краху приложения. Для диагностики утечек памяти можно использовать инструменты разработчика, такие как профайлер в Chrome, который помогает отслеживать использование памяти и выявлять объекты, не освобождающиеся из памяти.

Question 2

Как избежать утечек памяти в js?

Accepted Answer

Утечки памяти в JS возникают, когда объекты, которые больше не нужны, не удаляются сборщиком мусора, потому что на них остаются ссылки. Чтобы этого избежать, нужно: 1) Убирать слушатели событий (Event Listeners) с DOM-элементов при их удалении. 2) Не хранить ссылки на DOM-элементы в глобальных переменных или замыканиях дольше необходимого. 3) Осторожно работать с замыканиями и большими объектами, хранящимися в памяти. 4) В современных фреймворках (React, Vue) следить за отпиской от подписок (setInterval, WebSocket) в хуках жизненного цикла размонтирования.

Question 3

Какие проблемы могут возникнуть при работе с setInterval в useEffect?

Accepted Answer

При использовании setInterval в useEffect без очистки (cleanup) интервал продолжит выполняться после размонтирования компонента, что может вызвать утечку памяти и ошибки при обращении к состоянию несуществующего компонента. Также важно правильно указывать зависимости в массиве зависимостей useEffect, чтобы интервал не пересоздавался при каждом рендере. Для работы с актуальным состоянием внутри setInterval нужно использовать рефы или функциональную форму обновления состояния.

Question 4

Почему производительность drag-and-drop деградирует со временем, а не сразу?

Accepted Answer

Производительность drag-and-drop может деградировать со временем из-за накопления неотменённых обработчиков событий, особенно при повторных перетаскиваниях. Если обработчики не удаляются после завершения перетаскивания, они продолжают висеть в памяти и вызываться, замедляя работу. Также возможны утечки памяти из-за создания новых DOM-элементов без их очистки.

Вопросы React Frontend Developer