Forcer le rendu des composants React

1. Forcer les composants React à effectuer un rendu avec les composants de classe
2. Forcer les composants React à effectuer un rendu avec les composants de fonction

Par défaut, les composants React sont déclenchés pour effectuer un nouveau rendu par les changements de leur state ou props. La plupart du temps, si vous suivez les bonnes pratiques de React, ce comportement est largement suffisant pour obtenir les résultats souhaités.

Dans certains cas, le comportement par défaut du framework n’est pas suffisant et vous devez effectuer un nouveau rendu du composant manuellement. Avant de le faire, examinez attentivement le code. Forcer un nouveau rendu n’est une option viable que dans un nombre limité de circonstances.

Forcer les composants React à effectuer un rendu avec les composants de classe

Lorsqu’il est utilisé correctement, un appel à la méthode setState() de React Class Component doit toujours déclencher un nouveau rendu. Le cycle de vie shouldComponentUpdate() peut contenir une logique conditionnelle qui empêche ce comportement.

Si vous appelez setState() mais que le composant ne se met pas à jour, il se peut qu’il y ait un problème avec votre code. Assurez-vous d’avoir une raison valable d’utiliser la méthode forceUpdate().

this.forceUpdate()

Si votre méthode render() repose sur des données en dehors de state ou props, et que vous souhaitez déclencher le nouveau rendu en fonction des modifications apportées à ces données, vous pouvez utiliser la méthode forceUpdate().

Exemple de code :

class App extends Component {
  render() {
    return (    
    <div>
        <h1>{Math.random()}</h1>
        <button onClick={() => this.forceUpdate()}>Force Update</button>
    </div>)
  }
}

Dans ce cas, un changement de state ou props ne déclenche pas la mise à jour. C’est la méthode forceUpdate() qui le fait.

Les meilleures pratiques

Les développeurs React ne doivent utiliser forceUpdate() qu’en dernier recours. La fonction de rendu ne doit lire qu’à partir de props et state. En suivant ces directives, vous pouvez garantir la simplicité et l’efficacité de vos composants React.

Il n’est pas recommandé d’utiliser fréquemment la méthode forceUpdate(). Si vous avez l’habitude de l’utiliser beaucoup, vous voudrez peut-être examiner votre code et voir s’il pourrait être amélioré.

Forcer les composants React à effectuer un rendu avec les composants de fonction

Les composants de fonction n’incluent pas la méthode forceUpdate(). Cependant, il est toujours possible de les forcer à effectuer un nouveau rendu en utilisant les hooks useState() ou useReducer.

useState

Semblable à la méthode setState() des Class Components, le hook useState() déclenche toujours une mise à jour, tant que l’objet state mis à jour a une valeur différente.

Vous pouvez créer un hook personnalisé qui utilise le hook useState() pour forcer une mise à jour. Voici un exemple de code pour un tel hook réutilisable :

const useForceUpdate = () => {
  const [ignored, newState] = useState();
  return useCallback(() => newState({}), []);
}

Comme nous le savons tous, le hook useState() renvoie deux valeurs : la valeur courante de state et son setter. Dans ce cas, nous n’avons besoin que du setter newState.

useReducer

Étant donné que le hook useState utilise en interne useReducer, vous pouvez utiliser ce hook directement pour créer une solution plus élégante. La solution recommandée par React official documents utilise également useReducer(). Voici un exemple de solution :

const [any, forceUpdate] = useReducer(num => num + 1, 0);
function handleChange(){
    forceUpdate();
}

Le hook useReducer() renvoie la fonction actuelle state et dispatch. Dans l’exemple ci-dessus, nous utilisons la syntaxe [variableName, dispatchName] pour stocker ces valeurs.

Dans cet exemple, l’appel d’un gestionnaire handleChange() forcerait votre composant à se mettre à jour à chaque fois.

Les crochets ne sont pas destinés à être utilisés de cette façon. Essayez d’utiliser ces solutions pour des tests ou des cas aberrants.