Percer les secrets du contexte React : puissance, pièges et performances

React Context est un outil fantastique, comme un pipeline magique qui fournit des données partagées entre les composants sans le chaos du forage d'accessoires. Mais cette commodité a un inconvénient : une utilisation non contrôlée peut entraîner des goulots d’étranglement en termes de performances qui paralysent votre application.

Dans ce blog, nous explorerons comment maîtriser React Context tout en évitant les pièges courants. À la fin, vous serez un pro du contexte avec une application optimisée et performante.

---

1. Qu'est-ce que le contexte React et pourquoi devriez-vous vous en soucier ?

React Context est le fil invisible qui tisse les composants de votre application ensemble. Il permet le partage de données sans avoir à passer des accessoires à chaque niveau de l'arborescence des composants.

Voici un exemple rapide :

const ThemeContext = React.createContext('light'); // Default: light theme

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const theme = React.useContext(ThemeContext);
  return <button>




<hr>

<h2>
  
  
  <strong>2. The Hidden Dangers of React Context</strong>
</h2>

<h3>
  
  
  <strong>Context Change = Full Re-render</strong>
</h3>

<p>Whenever a context value updates, all consumers re-render. Even if the specific value a consumer uses hasn’t changed, React doesn’t know, and it re-renders anyway.</p>

<p>For example, in a responsive app using AdaptivityContext:<br>
</p>

<pre class="brush:php;toolbar:false">const AdaptivityContext = React.createContext({ width: 0, isMobile: false });

function App() {
  const [width, setWidth] = React.useState(window.innerWidth);
  const isMobile = width <= 680;

  return (
    <AdaptivityContext.Provider value={{ width, isMobile }}>
      <Header />
      <Footer />
    </AdaptivityContext.Provider>
  );
}

Ici, chaque consommateur d'AdaptivityContext effectuera un nouveau rendu à tout changement de largeur, même s'il ne se soucie que d'isMobile.

---

3. Contexte de suralimentation avec les meilleures pratiques

Règle 1 : Créer des contextes plus petits

Décomposez votre contexte en unités logiques pour éviter les nouveaux rendus inutiles.

const SizeContext = React.createContext(0);
const MobileContext = React.createContext(false);

function App() {
  const [width, setWidth] = React.useState(window.innerWidth);
  const isMobile = width <= 680;

  return (
    <SizeContext.Provider value={width}>
      <MobileContext.Provider value={isMobile}>
        <Header />
        <Footer />
      </MobileContext.Provider>
    </SizeContext.Provider>
  );
}

Règle 2 : Stabiliser les valeurs de contexte

Évitez de créer de nouveaux objets pour les valeurs de contexte à chaque rendu en utilisant useMemo.

const memoizedValue = React.useMemo(() => ({ isMobile }), [isMobile]);

<MobileContext.Provider value={memoizedValue}>
  <Header />
</MobileContext.Provider>;

Règle 3 : Utilisez des consommateurs de contexte plus petits

Déplacez le code dépendant du contexte dans des composants plus petits et isolés pour limiter les nouveaux rendus.

function ModalClose() {
  const isMobile = React.useContext(MobileContext);
  return !isMobile ? <button>Close</button> : null;
}

function Modal() {
  return (
    <div>
      <h1>Modal Content</h1>
      <ModalClose />
    </div>
  );
}

---

4. Quand le contexte ne suffit pas : connaissez vos limites

Le contexte brille pour les données globales et légères telles que les thèmes, les paramètres régionaux ou l'authentification des utilisateurs. Pour une gestion d'état complexe, pensez à des bibliothèques comme Redux, Zustand ou Jotai.

---

5. Aide-mémoire : React Context en un coup d'œil

Concept	Description	Example
Create Context	Creates a context with a default value.	const ThemeContext = React.createContext('light');
Provider	Makes context available to child components.	...
useContext Hook	Accesses the current context value.	const theme = React.useContext(ThemeContext);
Split Contexts	Separate context values with different update patterns.	const SizeContext = React.createContext(); const MobileContext = React.createContext();
Stabilize Values	Use useMemo to stabilize context objects.	const memoValue = useMemo(() => ({ key }), [key]);
Avoid Full Re-renders	Isolate context usage in smaller components or use libraries like use-context-selector.	{({ isMobile }) => ...}
When Not to Use Context	Avoid for complex state; use dedicated state management libraries.	Use Redux or Zustand for large-scale state management.

Concept

---

Description

Exemple ête> Créer un contexte

Crée un contexte avec une valeur par défaut. const ThemeContext = React.createContext('light'); Fournisseur

---

Rend le contexte disponible aux composants enfants. ...

useContext Hook

Accès à la valeur de contexte actuelle. const theme = React.useContext(ThemeContext); Contextes divisés Séparez les valeurs de contexte avec différents modèles de mise à jour. const SizeContext = React.createContext(); const MobileContext = React.createContext();

Stabiliser les valeurs

Utilisez useMemo pour stabiliser les objets contextuels. const memoValue = useMemo(() => ({ clé }), [clé]); Éviter les nouveaux rendus complets

Isolez l'utilisation du contexte dans des composants plus petits ou utilisez des bibliothèques comme use-context-selector. {({ isMobile }) => ...} Quand ne pas utiliser le contexte

Éviter en cas d'état complexe ; utilisez des bibliothèques de gestion d'état dédiées. Utilisez Redux ou Zustand pour la gestion d'état à grande échelle.

6. L'avenir du contexte React

---

L'équipe React travaille activement sur les sélecteurs de contexte, une fonctionnalité permettant aux composants de s'abonner uniquement à des valeurs de contexte spécifiques. D'ici là, des outils comme use-context-selector et React-tracked sont d'excellentes options. 7. Points clés à retenir React Context est puissant mais pas une solution miracle. Une mauvaise gestion du contexte peut entraîner des baisses de performances significatives. En suivant les meilleures pratiques telles que le fractionnement des contextes, la stabilisation des valeurs et l'optimisation des consommateurs, vous pouvez libérer tout son potentiel. Commencez à mettre en œuvre ces techniques dès aujourd'hui et faites passer vos applications React au niveau supérieur ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!