Comment forcer la mise à jour d'un composant React

Introduction

Dans cet article, nous allons vous montrer comment forcer la mise à jour d'un composant dans React.js. Plus précisément, nous donnerons une brève introduction aux rendus React, nous montrerons comment forcer les mises à jour dans les composants basés sur les classes et comment forcer les mises à jour dans les composants fonctionnels.

Réagir aux nouveaux rendus

React lui-même gère automatiquement le rendu des composants pour vous, dans la plupart des cas. La cause de cela peut être basée sur le moment où les accessoires ou l'état ont été mis à jour. Ainsi, lorsqu'un état ou une propriété change, le composant s'affiche à nouveau. Mais que se passe-t-il si votre composant dépend d'autre chose et pas nécessairement de votre état ou de votre propriété ? Dans ce cas, vous devrez peut-être forcer la mise à jour du composant car React n'a peut-être pas détecté le changement.

Voyons comment utiliser cette mise à jour forcée sur un composant React. Pour le montrer, nous allons créer une application simple à des fins de démonstration.

Notes: Nous couvrirons quelques concepts de React, il est donc conseillé d'avoir une connaissance de base de React.

Forcer les mises à jour sur les composants basés sur des classes

Le composant de classe a une méthode intégrée pour restituer un composant, appelée forceUpdate(), qui est utilisé pour forcer un composant à restituer. Vous pouvez en savoir plus sur le forceUpdate() méthode sur React site web officiel.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

Notes: Il est déconseillé de miser sur la mise à jour des composants à l'aide du forceUpdate() méthode. Lorsque vous avez besoin de cette méthode, vous devez d'abord essayer d'analyser votre code et déterminer s'il existe une autre raison pour laquelle React ne met pas à jour le composant. Vous constaterez peut-être qu'un bogue en est la cause ou que vous pouvez restructurer votre code de manière à permettre à React de restituer correctement le composant par lui-même.

Voici un exemple de comment forcer une mise à jour sur un composant basé sur une classe :

import React from 'react'

class App extends React.Component {
    constructor() {
        super();
        this.handleForceupdateMethod = this.handleForceupdateMethod.bind(this);
    };

    handleForceupdateMethod() {
        this.forceUpdate();
    };

    render() {
        return (
            <div>
                <h1>Hello StackAbuse</h1>
                <h3>Random Number: { Math.random() }</h3>
                <button onClick={this.handleForceupdateMethod}>
                    Force re-render
                </button>
            </div>
        );
    }
}

export default App

Il se passe beaucoup plus de choses dans cette méthode qu'il n'y paraît. Par exemple, appeler forceUpdate() déclenche également les méthodes de cycle de vie pour les composants enfants. Et comme nous le savons avec React, il ne mettra à jour le DOM que si le balisage a réellement changé.

Vous pouvez accéder à la code en direct ici.

Forcer les mises à jour sur les composants fonctionnels

Les composants fonctionnels n'ont pas de méthode intégrée pour restituer un composant comme le font leurs homologues basés sur des classes. Cela signifie que nous n'avons pas le forceUpdate() méthode à notre disposition. Cependant, rappelez-vous que dans React, les composants sont généralement rendus à nouveau en raison de changements d'état ou d'accessoires. En utilisant cela, nous pouvons trouver des moyens de forcer la mise à jour.

Depuis la v16.8+, React a un concept appelé Hooks qui peut être utilisé dans les composants fonctionnels pour mettre à jour l'état, effectuer des effets secondaires, etc. Nous utiliserons ces hooks à notre avantage pour obtenir un composant à restituer.

Voici quelques exemples de comment forcer une mise à jour dans un composant fonctionnel :

Le useReducer crochet

const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

function handleClick() {
    forceUpdate();
}

Un réducteur dans React est généralement utilisé lorsque vous avez une logique d'état et des actions complexes. Ici on l'utilise simplement pour déclencher la mise à jour en mettant à jour une variable d'état factice, x. L'état doit effectivement changer pour déclencher la mise à jour, c'est pourquoi il est incrémenté à chaque appel.

Utilisez l'option useState crochet

import React, { useState } from "react";


function useForceUpdate() {
    let [value, setState] = useState(true);
    return () => setState(!value);
}

export default function App() {
    
    const handleForceupdateMethod = useForceUpdate();

    return (
        <div className="App">
            <h1>Hello StackAbuse </h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

L'idée derrière ce type de mise à jour de force est très similaire à useReducer en ce sens que nous mettons constamment à jour l'état pour forcer le changement. Au lieu d'incrémenter un compteur, comme nous l'avons fait dans la dernière méthode, nous basculons ici simplement une valeur booléenne afin qu'elle soit annulée à chaque appel.

Le useState ainsi que le useCallback crochets

import React, { useState , useCallback} from "react";

export default function App() {
    const [, updateState] = useState();
    const handleForceupdateMethod = useCallback(() => updateState({}), []);

    
    console.log("Rendering...");

    return (
        <div className="App">
            <h1>Hello StackAbuse</h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

Encore une fois, cette stratégie fonctionne en changeant l'état. Dans ce cas, bien que nous ne modifiions pas techniquement le Plus-value de l'État, nous en lui envoyant un nouvel objet, qui est considéré comme nouveau par React puisqu'il n'effectue pas de contrôles d'égalité "profonds" sur l'état.

Comme vous pouvez le constater, il existe plusieurs façons d'obtenir la même chose ici. Gardez à l'esprit qu'il s'agit techniquement d'anti-modèles et qu'ils doivent être évités dans la mesure du possible. Mais si vous n'êtes pas en mesure de résoudre le problème sous-jacent et que vous devez forcer la mise à jour d'un composant, l'une des méthodes que nous avons présentées ici devrait fonctionner.

Conclusion

Dans cet article, nous avons vu comment forcer les mises à jour sur les composants React. Nous avons également vu comment cela peut être réalisé dans les composants fonctionnels et basés sur les classes. Bien que ce ne soit pas nécessairement une bonne pratique, il est utile de comprendre comment cela fonctionne au cas où nous aurions besoin de l'utiliser dans des cas particuliers.