Канал для адаптавання да інтерв’ю ў React: хукі, атрыбуты відображэння і тое, што запитуюць великія компаніі

У спэцыяльных адзінавочных інтэрв’ю з React рэдкая час ацэнкаваець спэцыялісты вашу здатнасць дакладна пераказваць інструкцыі з документацыі. Яны ацэнкаваюць, чы розумеете вы тое, што відбываецца пад капотам — чаму компонент перыядроўваецца, чаму эфект выконваецца два разы, чаму апдэйт стану не праказваецца негайна. Кандыдаты, якія можаюць поясніць чаму, перамагаюць тых, якія ведаюць толькі як.

Нижчэй паказаны тыя тэмы, якія зазвычай выклікаюцься: фундаменталы, хукі, выконавальная спроможнасць, шаблоны і неспадзяваныя кейсы, якія з’яўляюцца ўсюды.

1. Основныя фундаменталы

Запитанні для розмэткавання практычна завжды стосуюцца:

• Virtual DOM — што это і чаму апдэйты выглядаюць быстрейшымі (выкорыстоўваецца метод diff/reconcile замест адразувых змін у DOM).
• Reconciliation — як React выбірае, што апдэйтаваць (ключы, пераканальванне типу элемента).
• JSX — спецыяльны синтаксіс, які компілюецца у React.createElement(); трэба гэта чытна ведаць.

Контрольваныя протыў неконтрольваных — контрольваныя элементы выкарыстоўваюць стан React (value + onChange); неконтрольваныя чытаюць DOM чераз refs.

Props протыў стану — props можна чытаць толькі звышу; стан є локальным і зменяецца за дапамогою setters/hooks.

Ключы ліста — выкарыстанне індэксу як ключа не працюе, калі змініцца порядак (выкарыстоўваецца некоректны DOM/стан).

Хітрыя запытанні: «Чаму не выкарыстоўваць індэкс масіва як ключ?» Адпаведзце на прыкладзе пераранжавання/дадаўнення, калі React прыкладзе стан да некоректнай строкі.

2. Hooks (наўпачатку спытанняў)

useState

• Апдэты выкананыя асінхронна/групава.
• Застарэлыя клаудзы: калькі setCount(count + 1) у аднама западзеце дзеляць той самы count; setCount(prev => prev + 1) вырашае гэту проблему.

useEffect

• Залежнае прыемлівасць: [] адназова, пры кожным прадстаўленні ігнаруецца, перыядычна паказваюцца толькі калі яны змяніліся.
• Час і мета чысткі (утэчкі памяці, анулюванне падпісаў/запытоў).
• Чаму эфекты выконваюцца два разы ў режыме разработкі — у строгам режыме React 18 выконанні вызываецца два разы, каб адкрыць відсутную чыстку. Практычна кожны сталкнуўся з гэтым хоць раз.

useMemo vs useCallback

• useMemo кэшуе значэнне; useCallback кэшуе ідэнтычнасць функцыі.
• Оба заходзяць аднаковасць пасыланняў для дзецэв React.memo або массиваў залежнасцяў.
• Чрэзмерны выкарыстоўванне мае наследкі; кандыдатам у асаблівых спэцыяльнастях паспадабляецца, калі чуць, што мемаўванне не є безкоштовным.

useRef

• Зміннае значэнне межы прадстаўленняў без перапрацоўкі.
• Узлы DOM, пакойшыя значэнні, ідэнтыфікаторы таймераў.

useContext

• Заканчваецца праця з дрыленьнем атрыбутаў для паддрэва.
• Увага: апцэнт кантэксту перыскаладзеўвае ўсіх спожывачаў у паддрэве, включаючы тых, якія чытаюць толькі адну палатку.

useReducer

• Лепей выбіраць гэты метод, калі логіка ўскладнена або калькулююцца колькія палатакаў адночасна (локальныя редуктары у стылі Redux).

Custom hooks

• Будзьце гатовы пісаць useDebounce, useFetch або useLocalStorage у рэальны час — адна з найпаўзначыцьяйшых практычных задач.

3. Адрасаванне та выконвальнае якосць

У сяродніх/высокіх раундах людзі тут раздзеляюцца.

• Чаму перыскаладзеўваць? Перыскаладзеўванне родніка, змена стацыі, змена кантэксту або атрыбуты, якія выглядаюць аднакова, але ўжо є новымі рэферэнсамі.
• React.memo — паверхневая пораўнанне атрыбутаў; беспараднае, якщо кожны раз пасылаць новыя об’екты/функцыі (вжываецца разам з useMemo/useCallback).

Раздзелэнне коду — React.lazy + Suspense.

Віртуалізацыя — віртуалізацыя у стыле react-window для вельмі большых спісаў.

Менш частага перзапісвання — перадавайце статус назоўні, раздзеляйце контэксты, цярпеліва выкарыстоўвайце мемаізацыю.

Профіляр — мерайце, а не здагадваліцеся.

Класычны кейс: спіс з 10 000 рэядоў паслабляе работу пад час введення у пошук. Неабходныя рашэнні — дебаунс, віртуалізацыя і мемаізаваныя рэяды.

4. Калектывнае кераванне

• Локальны, глобальны і серверны статус — аддзельнае называнне сервернага статусу (каш, павтапераканаленне, завантажэння/памылка) ад статусу UI справляе глыбокае вражанне.
• Контэкст проты Redux/Zustand — Контэкст для рэдкасых глобальных элементаў (тэматыка, аутаналізацыя); Redux/Zustand калі трэбуюцца мідлвары, інструменты, сложныя апдэйты чы стацыонарныя запісы без проблем з контэкстам.
• React Query / SWR / TanStack Query — кэшаванне, абыранае перзапрашыванне, усуненне дублікаў, што дапамагае не пераздумвачваць прыметнік useEffect для запрашэння дадзеных.
• Асновы Redux (якщо стак він выкарыстоўвае): дзеяння, редукеры, хранэнне дадзеных, мідлвары типу thunk/saga, чыстыя редукеры.

5. Шаблоны дзяржаўнага проектавання

• HOC-ы — абгортаванне компонента; класычны прыклад withAuth.
• Render props — аднароджэнне логіки чераз функцыйны прыметнік; большасцю замененыя хукамі, але концэптуальна яшчэ выкарыстоўваюцца.
• Компаундныя компоненты — братскія компоненты, якія дзелюцца неявным станам чераз контэкст (Select / Select.Option).
• Контейнерны/прэзентатыўныя компоненты — дадзеныя протымаў UI; з хукамі менш строга, але раздзелэнне задач застаёцца важным.
• Компанаванне замест спадчыны — прабачальны падход React да пераўтварэння коду; будзьце гатовыя яго абясніць.

6. Жыцёвы цикл класаў (яшчэ запитваецца)

Проекты, якія выкарыстоўваюць хукі першымі, яшчэ часта апылваюць фундаментальны код або код базаў з минулага.

• componentDidMount ≈ useEffect(() => {}, [])
• componentDidUpdate ≈ эфект з завісамі
• componentWillUnmount ≈ чыстка эфекта
• Межы бягучых аднойчын — толькі для класаў (componentDidCatch / getDerivedStateFromError); хукі не маюць адпаведнага раштунку, таму і існуюць такія обгоркі як react-error-boundary.

7. Актуальнае веданне пра React 18+

• Адночаснае атрыбутаванне — можлівасць перарыву роботы для болей чутлівага інтерфейсу.
• useTransition — пазначэнне нечыстацкіх апдэйтаў, каб напісанне заставалася швыракім.
• useDeferredValue — адзінаванне некрытых элементаў UI.
• Автаматычная групаванне — агрупаванне задач унутроц обявленняў, тайма-аўтаматыў і вялікіх працоўнікаў (не толькі працоўнікаў React).
• Suspense для дадзеных — ўжо болей значныя у стаках у стылі Next.js/Remix.
• Server Components — што і дзе выконваецца, і чаму пакеты кліента скарочуюцца.

8. JavaScript, яны таямна праскрадваюцца

• Closures — застарэлы стан хуків.
• Цыкл змаганняў / мікро- і макратаскі — чаму групаванне выглядае так, як выглядае.
• Прыяўленне this — якщо з’являюцца класы.
• Debounce vs throttle — практычна завжды, часта як “оптымізаваць гэты поле пошуку”.
• Паверхневая vs глыбокае пораўнянне — React.memo / useMemo і чаму літералы об’ектаў унічтожаюць мемуізацыю.
• Promises / async-await — выкліканне парадоксаў пад час шырання запытоў, калі корыстнікі быстра пішуць.

9. Тэставанне

• Testing Library — аналіза поведання, а не внутраніх механізмаў (запыты на ролі/тэкст).
• Jest — імітацыя API; неабходнае разумеўце лімітаў кэшавання.
• Unit-тэсты, інтеграцыйныя тэсты, e2e-тэсты, а таксама месца, дзе зазвычай знаходзяцься тэсты компанентаў.

10. Жывая програмаванне, якае павтараецца

• Задзельванне функцый пошуку/автодаполнення
• Адзінственны useFetch з падтрымкай стану загрузкі/памылак/данных
• Бесканцовая прокрутка або пагінацыя
• Модальныя вікны за дапамою portal (createPortal) і прычыны ўжывання portal-аў (захаванне структуры React для адбывання запускоў/контэксту, падчас ухілу ад переплнення/z-index)
• Лічыльнік з можласцю анулювання/праўернення дзеянь за дапамою useReducer
• Аналіз багоў, вызваных застарэлымі функціямі аб відсутнасцю залежнасцей

Прыклад практычнага адбору

«Чаму гэты useEffect стварыў бесканцовую петлю?»

useEffect(() => {
  setData({ ...data, updated: true });
}, [data]);

Адпаведная адказ: эфект выклікае data як залежнасць, а пасля запішвае нэвялікі об’ект занова ў data, таму кожны запуск зменяе залежнасць і негаразду заставляе эфект запрацаваць зноў. Для вылечэння трэба адключыць data зі спісу залежнасцяў, калі ён не павінен прычыняць перзапуск, вывесці апдэйт за межы эфекта чы скарыстацца функцыйным апдэйтаром з болей строгімі залежнасцямі.

Паспяшэнне чаму гэта ламаецца — а не толькі прыдумка патча — і ўжо ўражае адпаведныя адказы на спэктаклі ў React.

Заканчэнне

Глыбіна розумэння працы API перамагае простае запам’ятаванне яго аспектаў. Кандыдацоў пераканваюць у розумэнні спосабу атрыбутаўвання, клаусураў і компрэсаванняя ў спектрыі выконвальных можаўсцей — тых багоў, якія з’являюцца ў рэальных умовах. Падготавіцеся, стварыўшы маленькія компаненты, якія навмысна выконваюцься некоректна (старыя клаусуры, нехватка залежнасцей, неканэктывае перыятрыўванне), і вылечыце іх. Самэ гэта чуткасць да дыбагавання і ёсць тое, што на самае справе ацэнююць пад час спытанняў.

Калі трэнуецеся, ставьце сабе часовы ліміт, як і пад час спытанняў: поясніце Virtual DOM за шастдзiesять секундаў, потым дыбагаваце фрагмент з старай клаусурой, а потым накрэсліце прыклад дыбаунаванага пошуку. Такія перыяды падходзяць да таго, як на самае справе адбываюцца спытання.

Як зазвычай развіваюцца спытання

Заняткі з праграмавання застаюцца ў Virtual DOM, карыстуючыся контрольванымі вводамі та клавішамі. У середніх рангах акцэнт ставится на хукі: групаванне апдейтаў, прынцып Strict Mode для запобежэння двойных эфектаў, разлік мемо-функцый і калбэк-функцый, а таксама стварэнне спецыяльных хукіў у рэальны час. У высокіх рангах разглядаюцца кейсы, зв’язаныя з выконавальнай скорасцю — спісы з дзесяткамі тысяч элементаў, проблемы з контэкстам, данні з Profilerа, а таксама выбор архітектуры між Context, Redux/Zustand і TanStack Query для керавання станам на сервере.

Трэба падтрымваць персональны репазітарый з “намерна зламанымі” прыкладамі: калькулятор закрыцця зменных, эфекты, вызваныя відсутнасцю залежнасцей, мемо-спісы, якія все равно перерасчыляюцца через аб’екты ўнутр у кодзе, і модальныя вікна. Адказ на пытанні ўсюго цяга чатверо такіх прыкладаў пакрывае значны частаку часу, выдзеленага на рэальнае кодаванне і працу на дошцы.

Якщо у абавязках згадваецца React 18+ , трэба быць гатовым дастаць по адной фразе пра паралельнае расчылянне, пераходы, відкладзеныя значэння, аўтаматычнае групаванне апдейтаў і серверныя компоненты. Глыбокае розумэнне адзінаго кейса выкорыстання новай версіі краща, чым тэрпячая адказнасць на кожны RFC.