React
Avancé
Optimizing re-renders with React.memo and useCallback

Type d'évaluation

Mise en situation réelle

Analyse

Intelligence Artificielle

Compétences ciblées

react
memo
usecallback
performance
optimization

Scénario Technique

Context A large dashboard renders a list of 200 rows. Each row contains an action button tied to a callback defined in the parent. The Problem Every state change in the parent causes all 200 row components to re-render, even when their data has not changed, causing visible UI lag. Constraints Wrap the row component with React.memo to skip unnecessary re-renders. Stabilize the callback reference using useCallback with correct dependencies. Verify the optimization using React DevTools Profiler. Expected Deliverable A React implementation demonstrating React.memo and useCallback working together to prevent unnecessary child re-renders, with an explanation of the dependency array choices.

Prêt à évaluer ce talent ?

Accédez à l'interface de test complète pour soumettre votre architecture ou votre code.

Commencer le Défis