Question 1

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

Accepted Answer

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.

Question 2

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

Accepted Answer

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.

Question 3

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

Accepted Answer

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.

Optimisation Performance React

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

Réponse

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

Réponse

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

Réponse

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 ?

Autres sujets d'entretien React / Next.js

Les bases de JavaScript

Fondamentaux React

React Hooks

Cycle de vie des composants

React Router

Gestion d'état avec Context

Formulaires & Composants contrôlés

Fetching de données & API

React Query (TanStack Query)

Styling & CSS-in-JS

Fondamentaux Next.js

TypeScript avec React

Data Fetching Next.js

Server Actions Next.js

Routing & Navigation Next.js

API Routes Next.js

Metadata & SEO Next.js

Middleware & Auth Next.js

Testing React

Zustand State Management

Error Boundaries & Error Handling

Advanced React Patterns

Fonctionnalités avancées Next.js

Déploiement & Production Next.js

Architecture & Design Patterns

React Server Components

Internationalisation Next.js

Sécurité & Best Practices React

Maîtrise React / Next.js pour ton prochain entretien