# Optymalizacja wydajności React (React / Next.js)

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

- 22 pytań z rozmów
- Senior
- [Pytania z rozmów: React / Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne.md)

## 1. Jaka jest główna rola React.memo?

**Odpowiedź**

React.memo to Higher-Order Component, który zapamiętuje wynik renderowania komponentu. Wykonuje płytkie porównanie props i pomija ponowne renderowanie, jeśli props się nie zmieniły. Szczególnie przydatny do optymalizacji kosztownych komponentów potomnych, które często otrzymują te same props.

## 2. Jaka jest główna różnica między useMemo a useCallback?

**Odpowiedź**

useMemo zapamiętuje wynik funkcji (zwróconą wartość), podczas gdy useCallback zapamiętuje samą funkcję. useMemo służy do optymalizacji kosztownych obliczeń, natomiast useCallback służy do stabilizacji referencji funkcji przekazywanych jako props, zapobiegając niepotrzebnym ponownym renderowaniom zapamiętanych komponentów potomnych.

## 3. W jakim przypadku użycie React.memo może być kontrproduktywne?

**Odpowiedź**

React.memo może być kontrproduktywne na komponentach, które otrzymują różne props przy każdym renderowaniu, ponieważ koszt płytkiego porównania props jest dodawany bez korzyści (komponent i tak zostanie ponownie wyrenderowany). Lepiej zarezerwować React.memo dla komponentów, które często otrzymują te same props i mają kosztowne renderowania.

## Jeszcze 19 dostępnych pytań

- Dlaczego warto używać useCallback dla funkcji przekazywanej jako prop do komponentu zapamiętanego za pomocą React.memo?
- Jaka jest główna zaleta code splitting z React.lazy?

Zarejestruj się za darmo: https://sharpskill.dev/pl/login

## Inne tematy rekrutacyjne React / Next.js

- [Podstawy JavaScript](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/javascript-essentials.md): 25 pytań, Junior
- [Podstawy React](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-fundamentals.md): 20 pytań, Junior
- [React Hooks](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-hooks.md): 22 pytań, Junior
- [Cykl życia komponentu](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/component-lifecycle.md): 18 pytań, Junior
- [React Router](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-router.md): 20 pytań, Junior
- [Zarządzanie stanem z Context](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/state-management-context.md): 18 pytań, Junior
- [Formularze i Controlled Components](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/forms-controlled-components.md): 20 pytań, Mid-Level
- [Pobieranie danych i API](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/fetching-data-api.md): 20 pytań, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-query-tanstack.md): 20 pytań, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/styling-css-in-js.md): 18 pytań, Mid-Level
- [Podstawy Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-fundamentals.md): 25 pytań, Mid-Level
- [TypeScript z React](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/typescript-react.md): 20 pytań, Mid-Level
- [Pobieranie danych w Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-data-fetching.md): 24 pytań, Mid-Level
- [Server Actions w Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-server-actions.md): 20 pytań, Mid-Level
- [Routing i Nawigacja w Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-routing-navigation.md): 22 pytań, Mid-Level
- [API Routes w Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-api-routes.md): 20 pytań, Mid-Level
- [Metadata & SEO w Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-metadata-seo.md): 18 pytań, Mid-Level
- [Middleware i Auth w Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-middleware-auth.md): 22 pytań, Mid-Level
- [Testowanie React](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-testing.md): 20 pytań, Mid-Level
- [Zustand State Management](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/zustand-state-management.md): 18 pytań, Mid-Level
- [Error Boundaries & Error Handling](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-error-boundaries.md): 18 pytań, Senior
- [Advanced React Patterns](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/advanced-react-patterns.md): 20 pytań, Senior
- [Zaawansowane funkcje Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-advanced-features.md): 24 pytań, Senior
- [Wdrożenie i Produkcja Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-deployment-production.md): 20 pytań, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-architecture-patterns.md): 22 pytań, Senior
- [React Server Components](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-server-components.md): 26 pytań, Senior
- [Internacjonalizacja Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-internationalization.md): 20 pytań, Senior
- [React Bezpieczeństwo & Najlepsze Praktyki](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-security-best-practices.md): 22 pytań, Senior

---

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