React Frontend Developer

Question 1

Что смотреть во вкладке Network в DevTools?

Accepted Answer

Во вкладке Network можно увидеть все запросы, которые делает страница: HTML, CSS, JS, изображения, API-вызовы. Полезно смотреть статус ответа (200, 404, 500), время загрузки, размер файла, заголовки запроса и ответа. Это помогает отлаживать ошибки, оптимизировать скорость загрузки и проверять корректность отправляемых данных.

Question 2

Какие инструменты Chrome DevTools используются для профилирования производительности фронтенд-приложения?

Accepted Answer

Chrome DevTools предоставляет несколько вкладок для профилирования: Performance для записи и анализа активности страницы, Network для анализа загрузки ресурсов, Memory для исследования утечек памяти и снятия снимков кучи, а также Lighthouse для аудита производительности и получения рекомендаций. Эти инструменты помогают выявить узкие места, такие как долгие скрипты, медленная загрузка или избыточное потребление памяти.

Question 3

Как пользоваться React DevTools Profiler для анализа ререндеров? Что означает цветовая подсветка компонентов?

Accepted Answer

React DevTools Profiler записывает сессию рендера и показывает, какие компоненты рендерились и сколько времени это заняло. Цветовая подсветка отражает длительность рендера: серый — компонент не рендерился, зелёный — быстрый рендер, жёлтый — средний, красный — самый долгий. Чем краснее компонент, тем больше времени он занял относительно других. Это помогает найти узкие места и лишние ререндеры.

Question 4

Как задать имя компоненту в React DevTools без displayName?

Accepted Answer

React берёт имя компонента из имени функции или переменной, в которую он присвоен. Если функция анонимная, DevTools покажет Anonymous. Чтобы задать имя без displayName, можно присвоить функцию именованной переменной, использовать именованную функцию или задать свойство name через Object.defineProperty. Также работает экспорт по умолчанию с именованной функцией.

Question 5

Для каких задач используется React DevTools?

Accepted Answer

React DevTools — это расширение для браузера, которое помогает отлаживать React-приложения. Оно показывает дерево компонентов, их props, state и hooks. С его помощью можно менять значения в реальном времени и смотреть, как это влияет на UI. Также есть вкладка Profiler для анализа производительности рендеров.

Question 6

Как React.memo с анонимной функцией отображается в React DevTools?

Accepted Answer

React.memo оборачивает компонент и создаёт новый компонент-обёртку. Если исходный компонент — анонимная функция, DevTools не сможет показать осмысленное имя и отобразит что-то вроде Anonymous или Memo(Anonymous). Чтобы имя отображалось корректно, задайте displayName или используйте именованную функцию.

Вопросы React Frontend Developer