# Optimisation Performance React (React / Next.js)

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

- 22 questions d'entretien
- Senior
- [Questions d'entretien: React / Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien.md)

## 1. Quel est le rôle principal de React.memo ?

**Réponse**

React.memo est un Higher-Order Component qui mémorise le résultat du rendu d'un composant. Il effectue une comparaison superficielle des props et évite un re-rendu si les props n'ont pas changé. Particulièrement utile pour optimiser les composants enfants coûteux qui reçoivent les mêmes props fréquemment.

## 2. Quelle est la différence principale entre useMemo et useCallback ?

**Réponse**

useMemo mémorise le résultat d'une fonction (la valeur retournée), tandis que useCallback mémorise la fonction elle-même. useMemo est utilisé pour optimiser des calculs coûteux, alors que useCallback est utilisé pour stabiliser les références de fonctions passées en props, évitant ainsi des re-rendus inutiles des composants enfants mémorisés.

## 3. Dans quel cas l'utilisation de React.memo peut-elle être contre-productive ?

**Réponse**

React.memo peut être contre-productif sur des composants qui reçoivent des props différentes à chaque rendu, car le coût de la comparaison superficielle des props s'ajoute sans bénéfice (le composant sera re-rendu de toute façon). Il est préférable de réserver React.memo aux composants qui reçoivent souvent les mêmes props et dont le rendu est coûteux.

## 19 questions supplémentaires disponibles

- Pourquoi utiliser useCallback pour une fonction passée en prop à un composant mémorisé avec React.memo ?
- Quel est l'avantage principal du code splitting avec React.lazy ?

S'inscrire gratuitement: https://sharpskill.dev/fr/login

## Autres sujets d'entretien React / Next.js

- [Les bases de JavaScript](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/javascript-essentials.md): 25 questions, Junior
- [Fondamentaux React](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-fundamentals.md): 20 questions, Junior
- [React Hooks](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-hooks.md): 22 questions, Junior
- [Cycle de vie des composants](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/component-lifecycle.md): 18 questions, Junior
- [React Router](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-router.md): 20 questions, Junior
- [Gestion d'état avec Context](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/state-management-context.md): 18 questions, Junior
- [Formulaires & Composants contrôlés](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/forms-controlled-components.md): 20 questions, Confirmé
- [Fetching de données & API](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/fetching-data-api.md): 20 questions, Confirmé
- [React Query (TanStack Query)](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-query-tanstack.md): 20 questions, Confirmé
- [Styling & CSS-in-JS](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/styling-css-in-js.md): 18 questions, Confirmé
- [Fondamentaux Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-fundamentals.md): 25 questions, Confirmé
- [TypeScript avec React](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/typescript-react.md): 20 questions, Confirmé
- [Data Fetching Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-data-fetching.md): 24 questions, Confirmé
- [Server Actions Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-server-actions.md): 20 questions, Confirmé
- [Routing & Navigation Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-routing-navigation.md): 22 questions, Confirmé
- [API Routes Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-api-routes.md): 20 questions, Confirmé
- [Metadata & SEO Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-metadata-seo.md): 18 questions, Confirmé
- [Middleware & Auth Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-middleware-auth.md): 22 questions, Confirmé
- [Testing React](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-testing.md): 20 questions, Confirmé
- [Zustand State Management](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/zustand-state-management.md): 18 questions, Confirmé
- [Error Boundaries & Error Handling](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-error-boundaries.md): 18 questions, Senior
- [Advanced React Patterns](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/advanced-react-patterns.md): 20 questions, Senior
- [Fonctionnalités avancées Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-advanced-features.md): 24 questions, Senior
- [Déploiement & Production Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-deployment-production.md): 20 questions, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-architecture-patterns.md): 22 questions, Senior
- [React Server Components](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-server-components.md): 26 questions, Senior
- [Internationalisation Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-internationalization.md): 20 questions, Senior
- [Sécurité & Best Practices React](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-security-best-practices.md): 22 questions, Senior

---

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