React Frontend Developer

Question 1

Как реализовать ленивую загрузку (lazy loading) элементов на странице с помощью атрибута loading? Какие есть альтернативные методы?

Accepted Answer

Ленивая загрузка — это техника, которая позволяет откладывать загрузку изображений или фреймов до тех пор, пока они не появятся в видимой области экрана. Атрибут loading="lazy" в теге или

Question 2

Объясните концепцию code splitting и lazy loading в React.

Accepted Answer

Code splitting — это техника, позволяющая разбивать приложение на небольшие части, которые загружаются по мере необходимости. Lazy loading (ленивая загрузка) загружает эти части только тогда, когда они действительно нужны, что помогает уменьшить размер начальной загрузки и повышает скорость работы приложения.

Question 3

Как работает ленивый роутинг (lazy loading) в React Router DOM?

Accepted Answer

Ленивый роутинг загружает компоненты маршрутов только при их необходимости. Это достигается использованием функции React.lazy в сочетании с динамическим импортом (import()), что позволяет уменьшить начальный размер бандла.

Question 4

Как передавать данные через loader в data маршрутах?

Accepted Answer

loader в data маршрутах используется для загрузки данных перед рендерингом компонента. Он возвращает данные, которые затем доступны через хук useLoaderData внутри компонента.

Question 5

Как динамические импорты и lazy loading влияют на размер бандла?

Accepted Answer

Динамические импорты и lazy loading позволяют разбивать код на части и загружать их по мере необходимости. Это уменьшает размер стартового бандла и ускоряет первый рендер. Пользователь загружает только тот код, который реально нужен в текущий момент. В результате приложение становится быстрее на старте.

Question 6

Как браузер обрабатывает скачивание файлов (download через ссылку)?

Accepted Answer

Когда пользователь кликает на ссылку с атрибутом `download`, браузер инициирует GET-запрос на указанный URL. Если сервер отвечает с корректными заголовками (например, `Content-Disposition: attachment`), браузер интерпретирует ответ как файл для сохранения, а не для отображения. Затем он показывает стандартное диалоговое окно сохранения файла в локальную файловую систему пользователя. Этот процесс обходит политику безопасности CORS для ссылок с тем же origin.

Question 7

Как preload и prefetch влияют на загрузку?

Accepted Answer

Атрибуты preload и prefetch — это подсказки для браузера, указывающие, как загружать ресурсы заранее. Preload говорит браузеру немедленно загрузить критически важный ресурс (например, шрифт или скрипт), который понадобится на текущей странице. Prefetch предлагает браузеру загрузить ресурс для будущей навигации (например, для следующей страницы) в фоновом режиме, когда есть свободная пропускная способность сети. Это позволяет ускорить отображение текущей страницы и сделать переходы между страницами быстрее.

Question 8

Где правильно устанавливать loading состояние — внутри try или снаружи?

Accepted Answer

Состояние загрузки (loading) следует устанавливать в true перед началом асинхронной операции, до блока try. В блоке finally или после try-catch его нужно сбросить в false. Это гарантирует, что loading будет активным во время выполнения запроса и корректно отключится даже при возникновении ошибки.

Question 9

Как инкапсулировать загрузку данных (loading, error, data)?

Accepted Answer

Для инкапсуляции состояний loading, error и data используется кастомный хук, который управляет асинхронным запросом. Хук возвращает объект с полями data, loading и error. Это позволяет переиспользовать логику загрузки в разных компонентах и избежать дублирования кода.

Question 10

Чем отличаются свойства onload и onerror?

Accepted Answer

Свойства onload и onerror — это обработчики событий, которые вызываются при загрузке или ошибке загрузки ресурса (например, изображения, скрипта). onload срабатывает, когда ресурс успешно загружен, а onerror — когда произошла ошибка (например, файл не найден или сеть недоступна). Они позволяют выполнить код после завершения загрузки или при возникновении проблемы.

Вопросы React Frontend Developer