Comment mettre à jour l'état en contexte dans React.js sans que le composant ne soit restitué ?

Question

Donc, en gros, j'utilise l'API Google Maps et lorsque je clique sur un bâtiment, il affiche un modal avec quelques informations. L'état du mode est dans le contexte et mis à jour via des événements de clic sur la carte. Ce qui se passe, c'est que lorsque l'état est mis à jour, il restitue à nouveau la carte entière (la rendant plus petite) car l'état est mis à jour à partir du composant Map lui-même. Comment puis-je mettre à jour l'état du contexte sans que la carte soit restituée ?

J'ai essayé d'utiliser memo et useCallback mais comme les accessoires sont mis à jour (contexte), la carte est à nouveau restituée.

Answer 1

Si votre carte utilise des valeurs provenant d'un contexte qui change fréquemment, il n'y a aucun moyen d'empêcher le nouveau rendu. Si tu fais ça, ça ne marchera plus

useContext(Context) effectue un nouveau rendu de votre composant lorsque la valeur du fournisseur change. Peu importe ce que vous utilisez dans le contexte du composant, il sera restitué si vous utilisez useContext . Vous ne pouvez pas empêcher cela, c'est ainsi que fonctionne le contexte. Cependant, si votre composant utilise quelque chose dans le contexte qui ne change pas fréquemment, il existe des techniques que vous pouvez utiliser pour arrêter le nouveau rendu.

Créez de nouveaux composants qui utilisent les composants dont vous souhaitez vous souvenir. Le contexte est appelé là. Passez-le comme accessoire à votre composant. Utilisez React.memo sur vos composants. Mais vous devez vous assurer que toutes les propriétés transmises au composant sont mémorisées.

De plus, vous pouvez utiliser le deuxième argument du mémo pour exclure les éléments qui ne conservent pas de références entre les rendus (non recommandé si vous ne savez pas ce que vous faites, cela peut provoquer des problèmes d'arrêt)

const YourComponent = React.memo(({someContextValue}) => ...)
const YourNewComponent = () => {
   const {someContextValue} = useContext(SomeContext)
   // here someContextValue is a thing that does not change its value often
   return 
}

Ensuite, vous devez utiliser YourNewComponent au lieu de votre composant