Utiliser componentDidUpdate() dans React - Guide du développeur

Chaque composant de React a un cycle de vie qui peut être contrôlé et manipulé. Ces cycles de vie peuvent être divisés en trois phases principales : le montage, la mise à jour et le démontage.

Le montage ou la naissance d'un composant React démarre le cycle de vie du composant. C'est la phase dans laquelle nous configurons l'état de l'application et affichons l'interface utilisateur. C'est au cours de cette étape que nos props sont définis. Les méthodes utilisées pendant la phase de montage sont constructor(), render(), componentDidMount() et getDerivedStateFromProps().

Après la naissance du composant lors de l'étape de montage, l'application est prête pour l'étape de mise à jour. C'est à ce stade que les mises à jour de données sont reçues et que les actions de l'utilisateur sont prises en compte. Les méthodes de mise à jour comprennent shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() et componentDidUpdate(). Un composant est dit mis à jour lorsqu'un changement se produit dans l'état ou les accessoires.

L'Unmounting, également connu comme la mort d'un composant React, est la phase où notre composant est retiré du DOM. La méthode utilisée dans cette phase est la méthode componentwillUnmount()

Dans cet article, nous allons examiner en détail la méthode componentDidUpdate() qui est l'une des méthodes de la phase de mise à jour.

Qu'est-ce que la méthode componentDidUpdate() ?

La méthode componentDidUpdate() est une méthode de mise à jour qui est invoquée après la méthode componentDidMount() et qui intervient immédiatement après une mise à jour et non lors du rendu initial.

Il convient de noter qu'il n'est pas tout à fait exact et correct de dire que componentDidUpdate() est appelé après componentDidMount().

Le composantDidMount() est appelé dans la phase de montage, tandis que le composantDidUpdate() est appelé dans la phase de mise à jour. Cela signifie que certaines méthodes comme getSnapshotBeforeUpdate() peuvent être appelées entre componentDidMount() et componentDidUpdate(). La mise à jour peut avoir lieu à chaque fois qu'une mutation d'état se produit ou à chaque fois qu'il y a des changements dans les accessoires.

Chaque fois qu'une mutation ou un changement se produit, la méthode componentDidUpdate() récupère l'état précédent et les accessoires précédents en tant qu'arguments. En obtenant l'état précédent et les accessoires précédents en tant qu'arguments, cette méthode nous permet de vérifier si une condition a été remplie et d'effectuer une action spécifique si la vérification renvoie un résultat positif.

La syntaxe de cette méthode est la suivante :

componentDidUpdate(prevProps, prevState) {
 if (this.props.data !== prevProps.data) {
   console.log(this.props.data);
 }
}

La plupart du temps, et dans de très rares cas, la méthode componentDidUpdate( ) sera appelée après la méthode getSnapshotBeforeUpdate() et, dans ce cas, un troisième argument -snapshot- est transmis à la méthode componentDidUpdate():

componentDidUpdate(prevProps, prevState, snapshot) {
 if (this.props.data !== prevProps.data) {
   console.log(this.props.data);
 }
}

Comment ne pas utiliser la méthode componentDidUpdate()

Vous ne devez pas définir un état non vérifié dans la méthode componentDidUpdate(). Un exemple d'état non vérifié est présenté ci-dessous :

componentDidUpdate(prevProps, prevState) {
  let value = this.props.data;
  this.setState({ isUpdated: false });// VERY BAD: DO NOT DO THIS!!!
}

La raison en est que si nous utilisions le code ci-dessus, nous entrerions dans une boucle de rendu infinie, car nous effectuons d'abord le rendu, puis nous appelons la mise à jour, qui définit l'état, ce qui déclenche un autre rendu, et ainsi de suite.

La solution consiste à envelopper votre état dans des déclarations conditionnelles et à ne modifier l'état que dans des zones spécifiques, comme nous le verrons dans l'exemple ci-dessous :

componentDidUpdate(prevProps, prevState) {
  let value = this.props.data;
  if (this.state.value === value){
  this.setState({ value: '' });// A possible fix!!!
  }
}

Exemples de composantsDidUpdate()

Dans l'exemple ci-dessous, nous avons un gestionnaire de clic qui est déclenché chaque fois qu'un bouton est cliqué dans l'application et qui modifie alors l'état du bouton cliqué à l'opposé de l'état actuel.

import React from 'react';
class Counter extends React.Component {
  state = {
    clicked: false,
  };

  buttonPress = () => {
    this.setState({
      clicked: !this.state.clicked,
    });
  };
  componentDidUpdate(prevProps, prevState) {
    prevState.clicked === this.state.clicked
      ? console.log('same state')
      : console.log('changed clicked state');
  }
  render() {
    return (
      <React.Fragment>
        <button
          style={{
            margin: 'auto',
            width: '50%',
            padding: 20,
            marginTop: '10%',
            border: 'solid 1px black',
            textAlign: 'center',
            fontSize: 18,
            color: 'black',
            cursor: 'pointer',
          }}
          onClick={this.buttonPress}
        >
          Click me
        </button>
      </React.Fragment>
    );
  }
}
export default Counter;

Dans l'exemple ci-dessus, nous voyons que la méthode componentDidUpdate() reçoit l'état précédent en tant que paramètre et vérifie ensuite que l'état précédent est identique à l'état actuel de clicked, puis enregistre le message approprié dans la console. si l'état n'avait pas été mis à jour, ce message serait différent.

Cas d'utilisation de la méthode componentDidUpdate()

Travailler avec le DOM

L'une des façons d'utiliser la méthode componentDidUpdate() est de travailler avec le DOM. Puisque la méthode componentDidUpdate() est appelée après la phase de montage, cela signifie que nous pouvons également accéder aux nœuds du DOM. Nous pouvons utiliser cette méthode pour agir sur le DOM lorsque le composant a été mis à jour, comme le montre l'exemple ci-dessous :

import React from 'react';
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 39 };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({ counter: 39 + 4 });
    }, 2000);
  }
  componentDidUpdate(prevState, prevProps) {
    if (prevState !== this.state) {
      document.getElementById('mydiv').innerHTML =
        'The updated counter is ' + this.state.counter;
    }
  }
  render() {
    return (
      <div>
        <h1>My counter says: {this.state.counter}</h1>
        <div id="mydiv"></div>
      </div>
    );
  }
}
export default Counter;

L'exemple ci-dessus illustre les phases de montage et de mise à jour du cycle de vie de notre composant. Nous avons créé l'état de notre application, puis nous avons appelé la méthode componentDidMount(), mis à jour notre état et défini un délai d'attente afin de pouvoir suivre le cycle de vie de notre composant. La méthode componentDidUpdate() a été appelée après la méthode componentDidMount(). Dans cette méthode, nous avons obtenu notre état précédent et nos accessoires précédents comme arguments. Nous vérifions ensuite si l'état précédent n'est pas égal à l'état actuel. Si la condition est vraie, nous accédons au DOM et définissons l'HTML interne de la div avec un message de notre choix.

Récupérer des données du serveur / Appels API

Un autre cas d'utilisation de la méthode componentDidUpdate() est la réalisation d'appels au serveur ou l'interrogation d'un point de terminaison de l'API. La raison pour laquelle cette méthode est utile est qu'elle récupère davantage de données sans rafraîchir la page, après la récupération initiale lors du chargement de la page.

import React from 'react';
class Counter extends React.Component {
  // The first state lives here 
}

class ProjectsComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { projects: [] };
  }
  // Emulates fetching data from server, data is returned after 300 ms timeout
  fetch = (person) => {
    setTimeout(() => {
      this.setState({
        projects:
          person === 'Isaac'
            ? ['Create a dashboard with React', 'Play Monopoly with friends']
            : [
                'Work on a project with Isaac',
                'Win a game of chess against a grandmaster',
              ],
      });
    }, 300);
  };
  componentDidUpdate(prevProps, prevState) {
    // check whether person has changed
    if (prevProps.person !== this.props.person) {
    // fetch if the person has changed
      this.fetch(this.props.person);
    }
  }
  render() {
    // render a list of projects
    return (
      
    );
  }
}
export default Counter;

Vous trouverez ci-dessous un lien vers une boîte à codes qui contient le code complet :

tps://codesandbox.io/s/blissful-breeze-w12rps

Dans l'exemple ci-dessus, nous avons créé une fonction fetch qui émule l'utilisation de fetch ou d'axios. Dans la méthode componenDidUpdate(), nous vérifions si le nom de la personne a changé en comparant les éléments précédents avec les éléments actuels. Si le nom de la personne a changé, nous demandons une liste de projets, puis nous mettons à jour l'état du composant avec les projets.

Il convient de noter que nous ne mettons pas à jour l'état interne du composant afin d'éviter une boucle de mise à jour infinie et c'est pourquoi nous vérifions le nom de la personne dans les accessoires afin d'éviter cela.

Conclusion

Dans cet article, nous avons examiné la méthode componentDidUpdate, ses particularités, ses exemples et ses cas d'utilisation. Nous avons également examiné les mauvaises pratiques liées à l'utilisation de la méthode componentDidUpdate et les solutions à y apporter. J'espère que cet article répondra aux questions que vous vous posez sur la méthode componentDidUpdate() et qu'il vous permettra de mieux comprendre son fonctionnement.