Thomas Zilliox
Expert CSS Freelance à Lyon

Détecter les changements de props

J'étais passé à côté du fait qu'il y avait des paramètres possibles à la méthode componentDidUpdate(), et pourtant, c'est super pratique !

Cette méthode du cycle de vie des composants React est appelée à chaque fois qu'un composant est re-rendu. Quand je devais détecter des changements de props, je faisais des choses bien trop compliquées :

import React from "react";

function fetchData(userId) {
  // Do action when userId change
}

class React extends React.PureComponent {
  constructor(props) {
    super(props);

    // Store the first value of userId in an attribute
    this.previousUserId = props.userId;
  }

  componentDidUpdate() {
    // Detect prop change
    if (this.previousUserId !== this.props.userId) {
      // Actions
      fetchData(this.props.userId);

      // Update the value of the attribute
      this.previousUserId = this.props.userId;
    }
  }

  render() {
    return <div>{this.props.userId}</div>;
  }
}

Alors, qu'en fait, on peut accéder aux valeurs précédantes des props à l'aide du permier argument de componentDidUpdate(). Voici la signature complète de cette méthode : componentDidUpdate(prevProps, prevState, snapshot). Le même exemple pourrait donc aussi s'écrire :

import React from "react";

function fetchData(userId) {
  // Do action when userId change
}

class React extends React.PureComponent {
  componentDidUpdate(prevProps) {
    // Detect prop change
    if (prevProps.userId !== this.props.userId) {
      // Actions
      fetchData(this.props.userId);
    }
  }

  render() {
    return <div>{this.props.userId}</div>;
  }
}

Et voilà !

Source : La documentation React.

blogDidUpdate(), Thomas.

Thomas ZILLIOX

That's my face!

Je suis un développeur CSS freelance sur Lyon.
En tant qu’expert CSS, on dit parfois que je suis « l’homme qui murmure à l'oreille des chevrons ».

Je suis également le co-créateur de Zupple Escape Game Lyon qui propose une salle d’escape game, des jeux de piste, des team building, de nombreuses énigmes en ligne, et même un podcast. Une aventure extraordinaire, grâce à laquelle il n’y a pas deux jours qui se ressemblent.