Intermédiaire
const SomeComponent = ({ onChange, id }) => {
const handleClick = useCallback(() => {
onChange(id);
}, []);
return <button onClick={() => handleClick()}>Click me !</button>;
};
Quels sont le/les soucis avec ce code?
Auteur: Clément DEVOSStatut : PubliéeQuestion passée 4422 fois
Modifier
8
Évaluations de la communauté
Ihor Oherchuk
30/04/2024
Why is
"You must absolutely encapsulate the onClick handler in a useCallback, otherwise performance will be impacted"
the wrong answer?
the button with onClick={()=>handleClick()} will rerender whenever the parent component does, even if handleClick is wrapped in useCallback, we need to write this way onClick={handleClick} to avoid extra rerenders and a negative impact for performance
Amaury PICHAT
29/05/2024
I don t know too
Auteur anonyme
15/08/2024
useCallback is required only when performance is impacted, as this function itself adds extra work for each render. if onClick action does not impact performance, it should not be used.
15
Écrire un composant React en tant que fonction15
Appeler une fonction au premier rendu d'un composant React14
Enregistrer l'état utilisé pour afficher la page sélectionnée dans un composant React.9
Utiliser useCallback pour optimiser le rendu en React10
Écrire un composant React qui met à jour le titre du document à chaque clic et le réinitialise à 'React App' lorsque le composant se démonte.25
Écrire le code manquant pour afficher les enfants du composant UserProfile.28
Écrire l'équivalent non-JSX du code suivant :