React Frontend Developer

Question 1

Как работать с react-window и react-virtualized?

Accepted Answer

react-window и react-virtualized — это библиотеки для виртуализации длинных списков в React, позволяющие рендерить только видимые элементы, что значительно улучшает производительность. React-window проще и легче, чем react-virtualized, и подходит для большинства случаев. Для использования вам нужно создать виртуализированный список, передав в него массив данных и настроив высоту элементов.

Question 2

Почему переменные, объявленные через let или const в глобальной области, не становятся свойствами window?

Accepted Answer

Переменные var в глобальной области становятся свойствами window, а let и const — нет. Это связано с тем, что let и const создаются в глобальном лексическом окружении, а не как свойства объекта. Они доступны в глобальной области видимости, но не через window. Это сделано для более безопасной и предсказуемой работы со scope.

Question 3

Чем плох вариант с прослушиванием события window scroll для определения достижения конца страницы?

Accepted Answer

Прослушивание события scroll срабатывает очень часто, вызывая перерасчеты и потенциальные лаги. Это может привести к проблемам с производительностью, особенно на мобильных устройствах. Вместо этого рекомендуется использовать Intersection Observer API, который более эффективен и не вызывает лишних перерисовок.

Question 4

В чём разница между событиями window load и DOMContentLoaded?

Accepted Answer

DOMContentLoaded срабатывает, когда HTML полностью загружен и разобран, но внешние ресурсы (картинки, стили, скрипты) могут ещё загружаться. window load ждёт полной загрузки всех ресурсов, включая изображения и фреймы. Обычно DOMContentLoaded наступает раньше. Для манипуляций с DOM достаточно DOMContentLoaded, а для проверки размеров картинок или работы с ресурсами — load.

Question 5

На что нужно обратить внимание при подписке на события (например scroll на window) или запуске таймеров в компоненте, чтобы избежать утечек памяти?

Accepted Answer

При подписке на события или запуске таймеров в компоненте нужно обязательно очищать их при размонтировании компонента. Для этого используются методы жизненного цикла, такие как componentWillUnmount в классовых компонентах или useEffect с функцией очистки в функциональных. Иначе подписки и таймеры продолжают работать, ссылаясь на удалённый компонент, что приводит к утечкам памяти.

Question 6

Почему возникает mismatch между серверным и клиентским рендером при чтении localStorage или window во время рендера?

Accepted Answer

При серверном рендере нет доступа к localStorage и window, поэтому сервер отдаёт один HTML, а клиент при гидратации получает другой результат. React сравнивает разметку и находит расхождение, что вызывает ошибку hydration mismatch. Решение — читать браузерные данные в useEffect или после монтирования.

Вопросы React Frontend Developer

Вопросы React Frontend Developer