# Оптимізація продуктивності React (React / Next.js)

> React.memo, useMemo, useCallback, lazy loading, code splitting, React DevTools Profiler

- 22 питань зі співбесід
- Senior
- [Питання зі співбесід: React / Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy.md)

## 1. Яка основна роль React.memo?

**Відповідь**

React.memo - це Higher-Order Component, який мемоізує результат рендерингу компонента. Він виконує поверхневе порівняння props і пропускає повторний рендеринг, якщо props не змінилися. Особливо корисний для оптимізації витратних дочірніх компонентів, які часто отримують однакові props.

## 2. Яка основна різниця між useMemo та useCallback?

**Відповідь**

useMemo мемоізує результат функції (повернене значення), тоді як useCallback мемоізує саму функцію. useMemo використовується для оптимізації витратних обчислень, а useCallback - для стабілізації посилань на функції, що передаються як props, запобігаючи непотрібним повторним рендерингам мемоізованих дочірніх компонентів.

## 3. У якому випадку використання React.memo може бути контрпродуктивним?

**Відповідь**

React.memo може бути контрпродуктивним для компонентів, які отримують різні props при кожному рендерингу, оскільки вартість поверхневого порівняння props додається без користі (компонент все одно буде повторно відрендерений). Краще зарезервувати React.memo для компонентів, які часто отримують однакові props і мають витратний рендеринг.

## Ще 19 доступних питань

- Чому варто використовувати useCallback для функції, що передається як prop компоненту, мемоізованому за допомогою React.memo?
- Яка головна перевага code splitting з React.lazy?

Зареєструйся безкоштовно: https://sharpskill.dev/uk/login

## Інші теми співбесід React / Next.js

- [Основи JavaScript](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/javascript-essentials.md): 25 запитань, Junior
- [Основи React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-fundamentals.md): 20 запитань, Junior
- [React Hooks](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-hooks.md): 22 запитань, Junior
- [Життєвий цикл компонента](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/component-lifecycle.md): 18 запитань, Junior
- [React Router](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-router.md): 20 запитань, Junior
- [Управління станом з Context](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/state-management-context.md): 18 запитань, Junior
- [Форми та Controlled Components](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/forms-controlled-components.md): 20 запитань, Mid-Level
- [Отримання даних та API](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/fetching-data-api.md): 20 запитань, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-query-tanstack.md): 20 запитань, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/styling-css-in-js.md): 18 запитань, Mid-Level
- [Основи Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-fundamentals.md): 25 запитань, Mid-Level
- [TypeScript з React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/typescript-react.md): 20 запитань, Mid-Level
- [Data Fetching у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-data-fetching.md): 24 запитань, Mid-Level
- [Server Actions у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-server-actions.md): 20 запитань, Mid-Level
- [Маршрутизація та Навігація в Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-routing-navigation.md): 22 запитань, Mid-Level
- [API Routes у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-api-routes.md): 20 запитань, Mid-Level
- [Metadata & SEO у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-metadata-seo.md): 18 запитань, Mid-Level
- [Middleware та Auth у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-middleware-auth.md): 22 запитань, Mid-Level
- [Тестування React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-testing.md): 20 запитань, Mid-Level
- [Zustand State Management](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/zustand-state-management.md): 18 запитань, Mid-Level
- [Error Boundaries & обробка помилок](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-error-boundaries.md): 18 запитань, Senior
- [Advanced React Patterns](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/advanced-react-patterns.md): 20 запитань, Senior
- [Розширені можливості Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-advanced-features.md): 24 запитань, Senior
- [Розгортання та Продакшн Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-deployment-production.md): 20 запитань, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-architecture-patterns.md): 22 запитань, Senior
- [React Server Components](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-server-components.md): 26 запитань, Senior
- [Інтернаціоналізація Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-internationalization.md): 20 запитань, Senior
- [React Безпека & Найкращі Практики](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-security-best-practices.md): 22 запитань, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-performance-optimization