Lorsque nous créons des applications dans React, nous rencontrons souvent les termes composants de rendu et de re-rendu. Bien que cela puisse paraître simple à première vue, les choses deviennent intéressantes lorsque différents systèmes de gestion d'état comme useState, Redux, ou lorsque nous insérons des hooks de cycle de vie comme useEffect sont impliqués. Si vous souhaitez que votre application soit rapide et efficace, il est essentiel de comprendre ces processus.

Qu’est-ce que le rendu ?

Le rendu est le processus par lequel React restitue votre interface utilisateur (UI) à l'écran, en fonction de l'état ou des accessoires. Lorsque votre composant est rendu pour la première fois, cela s'appelle le premier rendu.

Comment fonctionne le rendu initial ?

Lorsqu'un composant est "monté" pour la première fois sur le DOM, voici ce qui se passe :

1. Initialisation de l'état :
Que vous utilisiez useState, props ou Redux, l'état initial du composant est créé.

2. Fonction de rendu :
React parcourt le code JSX et génère un DOM virtuel basé sur l'état actuel.

3. Crée un DOM virtuel (Virtual DOM) pour l'état actuel du composant.

4. Comparaison (différence) :
Le DOM virtuel est comparé au DOM réel (puisqu'il s'agit du premier rendu, tous les éléments seront entièrement rendus).

5. Affichage :
Le composant s'affiche à l'écran.
Une fois le composant rendu, le prochain défi est le rendu.

Re-rendu : quand et pourquoi ?

Le rendu se produit à chaque fois que l'état ou les accessoires changent. Avez-vous cliqué sur le bouton qui modifie le numéro à l'écran ? Vous avez modifié une valeur dans la boutique Redux ? Toutes ces actions peuvent amener React à restituer le composant, et c'est là que le rendu entre en jeu.

Comment fonctionne le rendu ?

Détection de changement d'état :

• Avec useState, lorsque vous appelez setState, React sait qu'il doit mettre à jour le composant.

• Avec Redux, lorsqu'une valeur dans le magasin change, chaque composant associé à cette partie de l'état est restitué.

Déclencheur de rendu :

Lorsque l'état change, React crée un nouveau DOM virtuel basé sur ce changement.

Comparaison (différence) :

• React compare le nouveau DOM virtuel avec l'ancien et calcule les modifications à appliquer. C'est une façon pour React d'optimiser le rendu.

Afficher les modifications :

• Une fois les modifications calculées, React les applique au DOM réel. Ainsi, seules les parties modifiées de la page sont à nouveau affichées.

Quels composants sont restitués ?

Tous les composants ne sont pas affectés par chaque modification. React restitue uniquement les composants qui :

Utiliser les états locaux :
Si vous utilisez useState, le composant est restitué à chaque fois que setState est appelé.

Utiliser l'état Redux :
Si votre composant dépend de l'état Redux (via useSelector ou connect), il sera restitué lorsque cette partie de l'état changera.

Utiliser des accessoires :
Si la valeur des accessoires change, le composant est restitué avec les nouvelles valeurs.

Optimisation du rendu

Bien sûr, il n'est pas toujours idéal de restituer inutilement tous les composants. Si nous voulons que l'application fonctionne rapidement et efficacement, voici quelques techniques d'optimisation :

1. Composants de mémorisation
React offre des fonctionnalités de mémorisation de composants via React.memo. Si votre composant ne dépend pas des accessoires ou des changements d'état, vous pouvez le "souvenir", de sorte qu'il ne sera restitué que lorsque les valeurs pertinentes changeront.

Exemple:

const MemoizedComponent = React.memo(MyComponent);

2. Mémisation des fonctions et des valeurs

Pour éviter de recréer des fonctions ou des valeurs à chaque rendu, utilisez useCallback pour mémoriser les fonctions et useMemo pour mémoriser les valeurs.

• useCallback vous permet de mémoriser une fonction et d'empêcher sa recréation jusqu'à ce que les dépendances changent.

• useMemo mémorise le résultat de la fonction, il n'est donc pas recalculé à chaque rendu.

Exemple:

const increment = useCallback(() => {
  setCount(prevCount => prevCount   1);
}, []);

const expensiveCalculation = useMemo(() => {
  return count * 2;
}, [count]);

3. Optimisation Redux

Si vous utilisez Redux, vous pouvez optimiser davantage l'application avec des sélecteurs mémorisés tels que reselect. Cela permet d'éviter de restituer des composants qui ne sont pas affectés par le changement d'état.

Hooks de cycle de vie et rendu

Dans les classes React classiques, nous avons utilisé ShouldComponentUpdate pour contrôler le moment où le composant sera restitué. Dans les composants fonctionnels, ce concept peut être simulé à l'aide de useEffect et de la mémoisation.

Conclusion

Le rendu et le nouveau rendu sont cruciaux pour l'affichage de l'interface utilisateur dans les applications React, mais une bonne compréhension et optimisation de ces processus peut faire la différence entre une application lente et ultra-rapide. L'utilisation correcte de la mémorisation, useCallback, useMemo, ainsi qu'une gestion prudente de Redux, permettent d'éviter les rendus inutiles et de maintenir nos applications rapides et réactives.

Exemple de code : rendu et rerendu en action
Voici un exemple de composant qui utilise useState, Redux et memoization pour optimiser le rendu :

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  // Lokalni state
  const [count, setCount] = useState(0);

  // Redux state
  const reduxValue = useSelector(state => state.someValue);
  const dispatch = useDispatch();

  // Memoizacija funkcije kako bi se izbeglo ponovno kreiranje na svakom renderu
  const increment = useCallback(() => {
    setCount(prevCount => prevCount   1);
  }, []);

  // Memoizacija izračunate vrednosti
  const expensiveCalculation = useMemo(() => {
    return count * 2;
  }, [count]);

  // Efekat koji se pokreće samo pri promeni reduxValue
  useEffect(() => {
    console.log("Redux value changed:", reduxValue);
  }, [reduxValue]);

  return (
    

      
Count: {count}
      
Expensive Calculation: {expensiveCalculation}
      Increment
       dispatch({ type: 'SOME_ACTION' })}>
        Dispatch Redux Action
      
    
  );
};

Comme nous pouvons le voir, une combinaison d'état local, de Redux, de mémoisation et de hook useEffect est utilisée ici pour rendre l'application aussi efficace que possible.