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.