web-dev-qa-db-fra.com

Comment empêcher le rendu du composant enfant lors de l'utilisation de React hooks et mémo?

Je viens de commencer à expérimenter avec React hooks et je me demande comment je peux empêcher un composant enfant de re-rendre quand il est re-rendu parent. Je cherche quelque chose de similaire à retourner false dans componentDidUpdate. Mon problème semble provenir du gestionnaire de clics que j'appelle dans le composant enfant pour changer l'état dans le composant parent. Puisque la fonction est créée dans le composant parent, elle est créée à nouveau sur chaque rendu parent qui déclenche un changement d'accessoire dans le composant enfant, ce qui provoque ensuite le rendu de l'enfant (je pense). Voici un exemple de code pour illustrer la situation.

function Parent() {
    const [item, setItem] = useState({ name: "item", value: 0 });

    const handleChangeItem = () => {
        const newValue = item.value + 1;
        setItem({ ...item, value: newValue });
    };

    return <Child item={item} changeItem={handleChangeItem} />;
}

const Child = React.memo(function Child({ item, changeItem }) {
    function handleClick(){
        changeItem();
    }
    return (
        <div>
            Name: {item.name} Value: {item.value}
            <button onClick={handleClick}>change state in parent</button>
        </div>
    );
});

Comment empêcher le rendu du composant enfant à chaque rendu du composant parent? Est-ce que handleChangeItem dans le parent doit vivre ailleurs pour qu'il ne soit pas recréé sur chaque rendu? Si oui, comment obtient-il l'accès à item et setItem renvoyé par useState?

Je suis assez nouveau pour réagir et je viens de commencer à jouer avec des crochets, donc je manque probablement quelque chose d'évident.

reactjsreact-hooks
15
user1843640

Shubham Khatri a répondu avec précision à la question d'origine, mais j'ajoute cette réponse pour indiquer la manière recommandée d'éviter ce problème de rappel.

De la documentation:

useReducer est généralement préférable à useState lorsque vous avez une logique d'état complexe qui implique plusieurs sous-valeurs. Il vous permet également d'optimiser les performances des composants qui déclenchent des mises à jour approfondies, car vous pouvez transmettre la répartition au lieu des rappels.

https://reactjs.org/docs/hooks-reference.html#usereducer

De la FAQ:

Dans les grandes arborescences de composants, une alternative que nous recommandons est de transmettre une fonction de répartition à partir de useReducer via le contexte ...

https://reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down

La clé de tout cela est que la répartition ne change jamais, contrairement aux rappels qui sont créés à chaque rendu.

0
user1843640