nmk

Перелік питань з лекцій (1-18)

Лекція 1

  1. Які проблеми прямої маніпуляції DOM (наприклад, через jQuery) вирішує React?
  2. У чому полягає фундаментальна різниця між імперативним та декларативним стилями програмування інтерфейсів?
  3. Чому React класифікується саме як бібліотека рівня View, а не повноцінний MVC-фреймворк?
  4. Що таке концепція (формула) UI = f(state) і як вона реалізується в React?
  5. Для чого потрібен процес трансляції JSX (за допомогою інструментів на кшталт Babel) перед відправкою коду в браузер?

Лекція 2

  1. Звідки береться проблема продуктивності при маніпуляціях “реальним DOM” об’єктом у браузері?
  2. Опишіть суть двох базових евристик (припущень), завдяки яким алгоритм Reconciliation досягає складності $O(n)$.
  3. Чому React прирівнює створення компонентів різних типів до необхідності “знищити і перебудувати все всередині (unmount / mount)”?
  4. Надайте технічні обґрунтування: чому використання індексів масиву як властивостей key може призвести до збоїв у стані інтерфейсу (наприклад, стан полів вводу зсувається)?
  5. Яку головну проблему багатокомпонентних додатків вирішила архітектура React Fiber у порівнянні з попереднім Stack-алгоритмом?

Лекція 3

  1. Звідки береться потреба у Node.js під час написання фронтенд-коду (React), якщо наш фінальний застосунок виконується виключно в інтернет-браузері користувача?
  2. Поясніть принципову різницю “Семантичного керування версіями” (SemVer). Які зміни принесе оновлення пакету від версії 2.4.1 до 3.0.0?
  3. В чому ключова архітектурна різниця між підсумками підготовки dev-середовища через Webpack (напр., Create React App) та Vite? Як ця різниця впливає на тривалість запуску?
  4. Чому інструмент pnpm вважається більш ефективним порівняно зі звичайним npm щодо використання жорсткого диску та швидкості установки?
  5. Назвіть концептуальну відмінність між завданнями, які вирішує ESLint, та завданнями, якими керується Prettier.

Лекція 4

  1. Які проблеми традиційних шаблонізаторів (як-от в Angular або Vue) вирішує підхід із написанням JSX?
  2. Поясніть причину появи помилки “Adjacent JSX elements must be wrapped in an enclosing tag” та правильні способи її вирішення.
  3. У чому полягає різниця між використанням class в HTML та className в JSX? Чому була запроваджена така зміна?
  4. Надайте пояснення тому факту, чому використання інструкцій (наприклад if-else або циклу for) безпосередньо у фігурних дужках {} всередині JSX викликає краш компілятора?
  5. Яким чином React захищає додаток від виконання користувачем шкідливого скрипту, який він ввів у поле коментаря, і яке значення має властивість $$typeof у захисті архітектури?

Лекція 5

  1. З точки зору комп’ютерних наук та функціонального програмування, які дві ключові вимоги висуваються до компонента, щоб вважати його “чистою функцією”?
  2. Чому спроба безпосередньо змінити властивість об’єкта props (наприклад, props.user.name = 'Нове ім'я') є антипатерном і як саме це ламає архітектуру односпрямованого потоку даних?
  3. Поясніть сутність процесу “Lifting State Up” (підняття стану). Як дочірній компонент може ініціювати зміну даних, якщо пропси для нього є “read-only”?
  4. Які архітектурні переваги (з точки зору зв’язності коду) надає патерн передачі вмісту через children (створення Wrapper-компонентів)?
  5. Яку конкретну проблему вирішує статична типізація TypeScript при розробці бібліотеки компонентів рівня Enterprise? Як працює тип ComponentPropsWithoutRef?
  6. Поясніть явище “втрати мемоїзації”. Чому передача config= безпосередньо у пропси компонента, огорнутого в React.memo, призведе до його гарантованого ререндеру?

Лекція 6

  1. Чому React фізично забороняє та скидає помилку, якщо розробник помістив виклик хука useState всередину простої умови if або викликав після слова return?
  2. З точки зору архітектури Event Loop та процесів React 18 “Automatic Batching”, чому три підряд виклики setCount(0 + 1) створять лише один рендер із кінцевим результатом 1, а не 3?
  3. В якій ситуації і з якою метою інженер зобов’язаний застосовувати патерн ледачої ініціалізації (Lazy Initialization), передаючи функцію useState(() => init())?
  4. Що таке Derived State (Похідний стан) і чому його збереження через useState вважається критичною архітектурною помилкою?
  5. Що відбуватиметься “під капотом” React Fiber, якщо всередині обробника кліку ми використаємо синтаксис Updater Function (напр., setCount(prev => prev + 1)) кілька разів підряд?

Лекція 7

  1. Чому розробники React вирішили відмовитись впроваджувати нативні підписники подій (addEventListener) безпосередньо на кожен вкладений DOM-елемент, і що таке Event Delegation?
  2. Яким чином зміна кріплення системи делегування подій (з document на root div) у React 17 вплинула на архітектуру мікрофронтендів (коли кілька додатків працюють на одній сторінці)?
  3. Опишіть переваги та архітектурні недоліки використання жорстко Керованих компонентів (Controlled) для великих форм (наприклад, 40 полів вводу).
  4. Чому хук useRef називають “сейфом (Escape Hatch) поза системою рендерингу” в парадигмі React? У чому функціональна різниця між ініціалізацією таймера через useRef та через useState?
  5. Надайте обґрунтування: чому суворе правило вимагає “Ніколи не мутувати та не читати ref.current у тілі обчислення функції-компонента”, і дозволяє це робити лише у обробниках подій (onClick) та хуку життєвого циклу (useEffect)?

Лекція 8

  1. З точки зору виконання коду браузером, чому HTTP-запити та підписки addEventListener архітектурно заборонено виконувати в тілі компонента (до return JSX), і їх необхідно обгорнути в useEffect?
  2. Опишіть поведінку useEffect за наявності порожнього масиву залежностей [] порівняно з відсутністю масиву взагалі. Який життєвий цикл стимулюється?
  3. Що таке механізм Cleanup-функції і яким чином вона допомагає вирішити проблему Race Condition (Стан гонитви) при виконанні мережевих запитів з повільним інтернетом?
  4. Поясніть причину використання React StrictMode у розробці та навіщо він навмисно форсує життєвий цикл ефекту “Монтування -> Очищення -> Монтування” перед тим, як показати результат розробнику.
  5. За яких екстремальних умов інженер прийме рішення відмовитися від useEffect та застосує useLayoutEffect? Що відбувається з процесом візуального малювання (Paint) у браузері в момент виклику обох хуків?

Лекція 9

  1. З позиції оптимізації складності алгоритмів, чому без передачі маркера key додавання елемента на початок масиву перетворює операцію маніпуляції DOM на катастрофічно неефективну дію?
  2. Опишіть конкретний сценарій розробки в інтернет-магазині, коли використання індексу .map((item, id) => ...) як ключа допустиме і не спричинить багів відображення/стану інтерфейсу.
  3. Чому розгортання умови в JSX у вигляді <div> {items.length && <List/>} </div> із порожнім масивом [] залишить на екрані цифру 0? Як інженерно грамотно нейтралізувати цю проблему?
  4. Якщо ви отримуєте завдання вивести на клієнт таблицю з логами сервера (40 000+ текстових рядків в одному компоненті), який архітектурний підхід варто використати, щоб уникнути Memory Leak та тривалого зависання вікна браузера?
  5. В чому принципова архітектурна відмінність між приховуванням елемента через CSS (display: none) та приховуванням його через механізм умовного рендерингу React (!isHidden && <Element/>)? Який з підходів є більш жорстким до життєвого циклу (Lifecycle)?

Лекція 10

  1. З точки зору архітектури каскадних оновлень React, як зміна тексту в маленькому компоненті Navbar (розміщеному в корені додатку App) гарантовано вплине на важкий статичний компонент Footer, і як цьому запобігти?
  2. Поясніть сутність поняття “Shallow Comparison” (Поверхневе порівняння), на якому працює функція HOC обгортки React.memo. Чому не використовується глибоке (Deep) порівняння всіх полів об’єкта?
  3. В чому принципова технічна різниця повернення значень між хуками useMemo(() => func()) та useCallback(func) під час їх декларації в коді?
  4. Опишіть патологічний сценарій (Over-optimization), коли додавання useMemo до кожного виразу в компоненті зробить рендеринг повільнішим і призведе до втрати продуктивності процесора пристрою?
  5. Чому передача порожнього масиву залежностей [] в анонімну функцію-колбек неможлива без руйнування бізнес логіки, якщо всередині тієї функції ми використовуємо змінні зі Стейту компонента (замикання)?

Лекція 11

  1. З точки зору інженерної зв’язності коду (Coupling), у чому полягає шкода патерну Prop Drilling при вкладеності понад 5 рівнів?
  2. Поясніть на рівні алгоритму рендерингу (Re-rendering), чому передача інлайн-об’єкта <Context.Provider value=> є критичним антипатерном при масштабному застосуванні?
  3. Яку саме проблему оптимізації вирішує архітектурний підхід Split Contexts (створення окремих StateContext та DispatchContext)?
  4. Чому некоректно порівнювати React Context API та Redux як конкуруючі бібліотеки “State Management”?
  5. Назвіть 3 реальні сценарії даних (use-cases) веб-додатку, для яких ідеально підходить Context API, і 2 сценарії (таблиці, ігри), де застосування Контексту призведе до катастрофічного падіння FPS.

Лекція 12

  1. З технічної точки зору взаємодії клієнта з сервером, яка кардинальна різниця відбувається, якщо користувач клікне на тег <a href="/about"> порівняно з компонентом <Link to="/about"> у React Router? Що станеться з об’єктом стану Redux/Zustand у кожному з двох випадків?
  2. В чому полягала архітектурна зміна механізму парсингу маршрутів у React Router v6 (відмова від <Switch>)? Чому порядок визначення маршрутів більше не має критичного значення?
  3. В якій ситуації і з якою метою розробник повинен використати компонент <Outlet />? Опишіть патерн “Вкладені маршрути” (Nested Routes) на прикладі панелі управління інтернет-магазину.
  4. Порівняйте призначення та застосування хуків useParams та useSearchParams. Який із цих хуків доцільно використати для сторінки детального опису товару, а який — для сортування цього товару за ціною?
  5. Чому при програмному редіректі неавторизованого користувача на сторінку /login (в системі захищених рутів) інженери обов’язково додають опцію { replace: true } у метод navigate()? Як це впливає на апаратні кнопки браузера?

Лекція 13

  1. З точки зору виконання програми в браузері (Render Thread vs Network Thread), що сталося б, якби React-компоненти дозволяли інженерам використовувати звичайний синхронний функціонал для очікування відповіді від бази даних (без промісів і useEffect)?
  2. Проаналізуйте різницю у реакції нативного fetch та бібліотеки axios у ситуації, коли бекенд-сервер повертає HTTP статус помилки 404 Not Found. Як саме спрацює блок try/catch у обох випадках?
  3. В чому полягає критична користь від патерну “Три стани” (Тріади) у процесах обміну даними (data, isLoading, error) для якісного користувацького досвіду (UX Design)?
  4. Детально опишіть механізм появи багу “Race Condition” при реалізації “живого пошуку” (Search Autocomplete) без застосування API скасування запитів.
  5. Чому виникла необхідність в абстрактних інструментах управління “Серверним станом” на кшталт TanStack Query, якщо нативна зв’язка useEffect + useState виконує отримання даних абсолютно коректно?

Лекція 14

  1. Чому парадигма перевірки типів у Runtime (наприклад, через бібліотеку PropTypes або ручні перевірки typeof x === 'string' всередині рендеру) програє концепції Compile-time перевірки (через TypeScript) при розгортанні великих Production-додатків?
  2. Опишіть правила типізації хука useState у ситуаціях, коли початкове значення є порожнім об’єктом, і коли воно є скалярним(примітивним) значенням 0. В якому з випадків TypeScript потребує явного вказування типу <T> і чому?
  3. В екосистемі обробки подій React існує тип React.ChangeEvent<HTMLInputElement>. Поясніть з інженерної точки зору, чому розробники React не дозволяють просто написати рідний тип браузера Event, і що означає префікс Synthetic в об’єкті події.
  4. В чому полягає фундаментальна різниця типізації між зберіганням setInterval Id і зберіганням прямого доступу до HTML вузла інпута в хуку useRef? (Підказка: роль початкового значення null).
  5. Уявіть, що ви розробляєте власну бібліотеку UI-компонентів. Навіщо вам використовувати тип React.ComponentProps<'input'> під час створення кастомного текстового поля <AppInput/>, в яке обгорнутий нативний HTML-тег? Яку архітектурну проблему вирішує цей патерн?

Лекція 15

  1. Згідно з парадигмою Kent C. Dodds, чому перевірка в тесті типу expect(wrapper.state('count')).toBe(1) (тестування внутрішнього стейту) є серйозним антипатерном і порушенням філософії надійності?
  2. В чому принципова різниця (щодо архітектури обробки подій) між використанням методу нативної відправки fireEvent.change() та симуляцією через пакет @testing-library/user-event? Наведіть приклад, коли використання лише першого варіанту “ховає” баг від тестувальника.
  3. Поясніть сутність процесу Mocking (заглушки) зовнішніх залежностей. Якщо компонент отримує прогноз погоди через axios, як саме ми повинні поводитися з цим викликом при написанні Unit-тесту компонента?
  4. Проаналізуйте різницю між Queries в методах пошуку RTL: за якої обставини архітектурно правильно застосувати метод queryByRole замість getByRole? (Порада: розгляньте сценарій умовного рендерингу відсутності елемента).
  5. Чому розробники не можуть покрити абсолютно весь код (100% покриття Coverage) лише E2E-тестами (End-to-End на базі Cypress/Playwright), оминаючи Unit-тести, якщо E2E-тести дають найдостовірнішу перевірку реалізації? Яке явище заважає цьому у безперервному розгортанні (CI/CD)?

Лекція 16

  1. Чому імпорт двох звичайних файлів .css з однаковим класом .header у різні незалежні React-компоненти спричинить візуальну поломку на екрані, і як парадигма CSS Modules архітектурно вирішує цей конфлікт специфічності (Specificity)?
  2. Проаналізуйте недоліки підходу CSS-in-JS (Styled Components) у контексті продуктивності в Runtime (під час виконання). Чому створення CSS-класів за допомогою JavaScript прямо в браузері є “важчою” операцією, ніж отримання готового статичного .css файлу?
  3. Поясніть концепцію “атомарного класу” у парадигмі Utility-first (Tailwind CSS). Як JIT-компілятор (Just-In-Time) Tailwind обробляє тисячі можливих класів, щоб на виході видати CSS-файл розміром лише 10-15 кілобайт?
  4. У чому полягає філософська та архітектурна різниця між “Важкими” бібліотеками компонентів (Material UI, Ant Design) і так званими “Безголовими” бібліотеками (Radix UI, Headless UI)?
  5. Що таке WAI-ARIA (Accessibility) і чому написання звичайного <div onClick={close}>X</div> замість правильно скомпонованої модалки порушує інженерні критерії європейського та американського законодавства про доступність веб-контенту? Як Headless UI допомагає розробнику з цією проблемою?

Лекція 17

  1. З технічної точки зору парсингу (перетворення байтів HTML у дерево DOM), поясніть конкретну причину, чому пошукові боти можуть індексувати сайти на чистому React (CRA) значно гірше, ніж сайти на Next.js.
  2. Яким чином стратегія ISR (Incremental Static Regeneration) долає обмеженість SSG методу щодо “старості” (Staleness) даних впродовж довготривалої експлуатації великого e-commerce майданчика? Що відбувається у фоні на сервері Next.js?
  3. Процес “Гідратації”: Що відбудеться з користувацьким досвідом (UX), якщо користувач натисне на кнопку “Додати в кошик”, відрендерену через SSR, на повільному (3G) інтернет-зв’язку у проміжок часу між закінченням завантаження HTML (1-ша секунда) та початком завантаження файлу bundle.js (5-та секунда)?
  4. Чому використання React-хуків useState та useContext фізично заборонене (буде викликана помилка інструментом компіляції) в архітектурі React Server Components (RSC)? Опишіть обмеження серверного середовища для таких стейтів.
  5. Що таке патерн “Islands Architecture” (Архітектура Острівців) в розробці сучасних веб-додатків на базі Next.js 13+? Наведіть приклад компонента, який ви б зробили “клієнтським острівцем” ("use client";) на повністю серверній сторінці перегляду “Новини”.

Лекція 18

  1. Опишіть 5 ключових кроків автоматизованого пайплайну (CI/CD) на базі GitHub Actions після того, як розробник відкрив Pull Request з новою фічею. Які операції обов’язково повинні завершитися без помилок перед дозволом на злиття коду?
  2. В чому полягає різниця між підходом PaaS (Vercel), де розробник просто вказує репозиторій, і підходом IaaS (Docker), і в якій індустрії (наприклад, банківській чи медійній) і чому архітектор обере другий варіант?
  3. З точки зору кібербезпеки, детально поясніть вектор атаки XSS (Cross-Site Scripting) у React-додатку. Яка специфічна властивість React “відкриває” двері для цієї вразливості та за допомогою якого підходу її можна нейтралізувати?
  4. Проаналізуйте недоліки збереження токену доступу (JWT) у localStorage браузера порівняно з Cookie, яка має прапорець HttpOnly. Чим зловмисник може скористатися в першому випадку і що блокує його в другому?
  5. Які організаційні та інженерні проблеми (командна робота, час компіляції) класичної Монолітної Frontend-архітектури вирішує парадигма “Мікрофронтендів”?
  6. Чому наявність ідеальних E2E тестів до фінального релізу все одно змушує інженерні команди інтегрувати системи моніторингу типу Sentry під час експлуатації продукту в Production-середовищі? Що вони можуть зафіксувати такого, чого не помітять тести?