Оптимізація продуктивності React
React.memo, useMemo, useCallback, lazy loading, code splitting, React DevTools Profiler
1Яка основна роль React.memo?
Яка основна роль React.memo?
Відповідь
React.memo - це Higher-Order Component, який мемоізує результат рендерингу компонента. Він виконує поверхневе порівняння props і пропускає повторний рендеринг, якщо props не змінилися. Особливо корисний для оптимізації витратних дочірніх компонентів, які часто отримують однакові props.
2Яка основна різниця між useMemo та useCallback?
Яка основна різниця між useMemo та useCallback?
Відповідь
useMemo мемоізує результат функції (повернене значення), тоді як useCallback мемоізує саму функцію. useMemo використовується для оптимізації витратних обчислень, а useCallback - для стабілізації посилань на функції, що передаються як props, запобігаючи непотрібним повторним рендерингам мемоізованих дочірніх компонентів.
3У якому випадку використання React.memo може бути контрпродуктивним?
У якому випадку використання React.memo може бути контрпродуктивним?
Відповідь
React.memo може бути контрпродуктивним для компонентів, які отримують різні props при кожному рендерингу, оскільки вартість поверхневого порівняння props додається без користі (компонент все одно буде повторно відрендерений). Краще зарезервувати React.memo для компонентів, які часто отримують однакові props і мають витратний рендеринг.
Чому варто використовувати useCallback для функції, що передається як prop компоненту, мемоізованому за допомогою React.memo?
Яка головна перевага code splitting з React.lazy?
+19 питань зі співбесід
Інші теми співбесід React / Next.js
Основи JavaScript
Основи React
React Hooks
Життєвий цикл компонента
React Router
Управління станом з Context
Форми та Controlled Components
Отримання даних та API
React Query (TanStack Query)
Styling & CSS-in-JS
Основи Next.js
TypeScript з React
Data Fetching у Next.js
Server Actions у Next.js
Маршрутизація та Навігація в Next.js
API Routes у Next.js
Metadata & SEO у Next.js
Middleware та Auth у Next.js
Тестування React
Zustand State Management
Error Boundaries & обробка помилок
Advanced React Patterns
Розширені можливості Next.js
Розгортання та Продакшн Next.js
Architecture & Design Patterns
React Server Components
Інтернаціоналізація Next.js
React Безпека & Найкращі Практики
Опануй React / Next.js для наступної співбесіди
Отримай доступ до всіх питань, flashcards, технічних тестів, вправ code review та симуляторів співбесід.
Почни безкоштовно