React і сучасний фронтенд: хуки, стани, перформанс, React 19 і те, про що питають на технічних інтерв’ю.
22 статей
Next.js 16.4 рекомендує Cache Components для всіх застосунків, вмикає їх у нових проєктах і готує default у Next.js 17. Розбираємо use cache, нові гарантії та міграцію без магії.
Нові API Next.js 16.4: ensureStatic як build-time гарантія статичності, navigation() і prefetch() як явний контроль prefetch-бюджету. Розбираємо на офіційних прикладах, коли це потрібно і як не зловити падіння build.
Next.js 16.4 додає agent-assisted upgrade flow: міграційні гайди, codemods і verification steps, які фреймворк сам готує для агента. Що робить next upgrade --agent, навіщо experimental.agentUpgrade і де все одно потрібен Senior.
Що змінилося в Turbopack у Next.js 16.4: кеш на 20–25% менший, lazy server HMR, спільний runtime, коротші class names у production і Bundle Analyzer зі снапшотами й diff-ами. Розбираємо, що реально відчує великий проєкт.
Що насправді вимірюють LCP, INP і CLS, чим лабораторні цифри відрізняються від польових, і які саме React/Next.js-причини псують кожну метрику – з планом вимірювання у production.
Ментальна модель кешу Next.js 16.3 замість зубріння API: хто володіє даними, що означає stale, і чому revalidateTag, updateTag і refresh – це три різні відповіді на питання «наскільки свіжим має бути UI».
Stream, Cache або Block: розбираємо нову ментальну модель навігацій у Next.js 16.3 – reusable shell замість prefetch-на-кожен-лінк, Partial Prefetching, instant() у Playwright і чесні trade-offs.
Звідки береться flaky у E2E-тестах і як його лікувати: locator-first підхід, web-first assertions, ізоляція тестових даних, Trace Viewer і чесна відповідь, чому retry – це не fix.
Практичний аудит доступності без води: keyboard-only прохід, focus-visible і traps, semantic HTML перед ARIA, помилки форм, діалоги за APG-патерном, axe проти ручних перевірок і definition of done для PR.
React Compiler стабільний з жовтня 2025. Що він мемоізує автоматично, чого не робить, як впровадити поступово у великому проєкті – і чому «видалити всі useMemo» наступного ж дня – погана ідея.
React 19.3 дозволяє повісити ref на <Fragment> і отримати FragmentInstance: фокус, події та observer-и для групи сусідніх елементів без зайвого wrapper-div. Розбираємо API і реальні кейси.
Не піраміда тестів, а decision tree: який ризик ловить кожен рівень, що тестувати unit-тестами, що через Testing Library, що в Playwright – і що не тестувати взагалі.
Розбираємо useEffectEvent із React 19.2: чому зміна теми не повинна reconnect-ити WebSocket, чим Effect Event відрізняється від useCallback і useRef, і коли цей хук стає способом сховати баг.
View Transitions стали stable у React 19.3. Розбираємо ментальну модель <ViewTransition>, зв’язок із startTransition і Suspense, addTransitionType – і чесно про те, де звичайний CSS transition досі кращий.
Навіщо фреймворк поверх React, чим відрізняються SSR, SSG, ISR і Server Components, як влаштовані роутинг і data fetching в App Router – і які питання про Next.js реально ставлять на співбесідах.
Чому useMemo на все підряд не прискорює застосунок: як читати React DevTools Profiler, звідки насправді беруться ре-рендери і коли мемоізація дійсно потрібна. З прикладами до/після.
State у React – це знімок. Чому setCount(count + 1) тричі поспіль дає +1, як лікується stale closure в setInterval, коли callback-форма потрібна, а коли зайва. Робочі приклади TypeScript і 5 пасток зі співбесід.
Підготовка до React-співбесіди – це три різні вправи: пояснити, як працює React, написати компонент із типами й тестами та аргументувати архітектурні рішення. Розбираємо всі три з прикладами коду.
Три задачі, які реально дають на React live coding: список із пошуком, асинхронне завантаження зі станами, форма з валідацією. Слабкий і сильний варіанти рішення з TypeScript і поясненням, що оцінює інтерв’юер.
Як React порівнює дерева при ре-рендері, навіщо потрібні keys і чому key={index} ламає списки з інпутами. Повний приклад до/після, правила вибору key і питання зі співбесід.
Senior відрізняється не знанням API, а вмінням аргументувати: межі компонентів, вибір місця для стану, обробка помилок і формат «контекст → варіанти → вибір → ціна». З прикладами сильних і слабких відповідей.
Коли спрацьовує useEffect, а коли useLayoutEffect, чому мерехтить тултіп при вимірюванні DOM і як це полагодити. Робочі приклади, правила залежностей і cleanup, випадки, коли ефект взагалі не потрібен.
Хочеш розібратися в цій темі швидше?
На безкоштовному 30-хвилинному дзвінку розберемо твій рівень і складемо маршрут.
Заповни коротку заявку – і отримаєш персональний роудмап. Або просто напиши мені в Telegram, якщо зручніше.