Большинство разработчиков умеют использовать React — лишь немногие по-настоящему понимают, как он работает на самом деле.
Из сотен собеседований, которые я прошел, провалил или провел сам как интервьюер, мне запомнилось одно, на котором был вопрос, поставивший меня в тупик:
«Как именно работает React?»
Я начал отвечать уверенно.
Я создал на React более 24 производственных приложений.
Я ежедневно использую хуки.
Я оптимизирую рендеры.
Я выпускал функции в нереальные сроки.
Но в тот момент, когда я начал отвечать, осознал нечто постыдное:
Я описывал лишь как использовать React, а не то, как он работает:
«Эм… мы используем useState для состояния… useEffect для побочных эффектов… компоненты возвращают JSX…»
Интервьюер улыбнулся.
«Это то, как вы используете React. Серьезно?»
Этот момент озадачил меня.
И он показал мне пропасть между знанием React API и пониманием основ React.
Как React на самом деле работает — то, что я хотел бы знать тогда
1. Сверка (Reconciliation): настоящая рабочая лошадка
React не обновляет интерфейс волшебным образом.
Он выполняет процесс, называемый сверкой, в ходе которого:
- создается новое дерево виртуальной DOM;
- дерево сравнивается с предыдущим (дифференциальный алгоритм, diffing);
- обновляются только те части реального DOM, которые изменились.
Вот почему React-приложения работают быстро и эффективно.
2. React Fiber: секретный движок
React Fiber — полностью переписанный алгоритм ядра React.
Он позволяет React:
- разбивать рендеринг на небольшие единицы работы;
- устанавливать приоритеты важных обновлений (например, ввода пользователя);
- приостанавливать или возобновлять работу без блокировки пользовательского интерфейса;
- сохранять отзывчивость пользовательского интерфейса во время выполнения сложных задач.
Fiber — причина, по которой приложения React не зависают, когда задачи усложняются.
3. Конкурентный рендеринг: React-прогнозирование
Современный React является конкурентным (concurrent).
Это означает, что React обладает следующими возможностями:
- готовить обновления интерфейса в фоновом режиме;
- отбрасывать устаревшие результаты рендеринга;
- показывать на экране наиболее актуальное состояние;
- избегать подтормаживаний и рывков во время сложных обновлений.
Это основа таких функций, как useTransition и Suspense.
Дополнительный вопрос, который все прояснил
Затем интервьюер спросил:
«Хорошо… а когда же понимание того, как работает React, необходимо в вашей повседневной работе?«
Именно этот вопрос ставит в тупик большинство разработчиков — не потому, что они не знают API React, а потому, что им не хватает понимания внутреннего механизма API React.
Вот что на самом деле интересует интервьюеров.
5 важных причин разбираться во внутреннем механизме React
✔ Отладка ненужных повторных рендерингов.
✔ Понимание, почему обновления состояния не применяются мгновенно.
✔ Принятие решения, когда использовать useMemo, useCallback, or React.memo.
✔ Устранение проблем с производительностью на высоком профессиональном уровне.
✔ Создание плавного пользовательского интерфейса при высокой нагрузке.
Вот в чем разница между:
❌ Тем, кто использует React.
✔ Тем, кто понимает React.
Я не прошел тот этап — но он изменил меня
Я провалил то собеседование.
Но вопрос, как работает React, полностью изменил мой подход к тому, как я пишу, отлаживаю и преподаю React.
Сегодня я задаю кандидатам на должность разработчика тот же вопрос — не для того, чтобы отказать им, а чтобы понять, насколько глубоки их фундаментальные знания.
Потому что знание API React делает вас разработчиком.
А понимание внутреннего механизма React делает вас отличным разработчиком.
Читайте также:
- Топ-10 React-библиотек, которые стоит использовать в 2025 году
- useEffectEvent: почему так строго?
- Почему React 16 — это благословение для React разработчиков
Читайте нас в Telegram, VK и Дзен
Перевод статьи Richa Gautam: The One Frontend Interview Question That Humbled Me After 100+ Interviews
