Канал для адаптавання да інтэрв’ю ў 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.