Hello les codeurs,

Comprendre le fonctionnement de React n’est pas forcément évident pour les développeurs débutants, ni même parfois pour les confirmés! Pour autant, avoir une bonne compréhension globale du framework JS vous permettra de penser et construire des applications React efficaces et robustes. C’est pourquoi je vous propose de décortiquer les principes de base de ReactJS ensemble dans cette série d’articles.

Aujourd’hui, je vous propose de voir ensemble ce qu’on entend par cycle de vie du composant React. Dans un second temps, nous passerons en revue les différentes méthodes de cycle de vie (lifecycle methods) et quelles sont leurs utilités respectives.

Le cycle de vie des composants React

Le cycle de vie d’un composant regroupe les étapes de la vie d’un composant. On va tout d’abord discerner le moment où le composant va être inséré dans le DOM, le “mounting” ou montage en français, et le moment où le composant va être retiré du DOM, l’“unmounting”, le démontage. Quand un composant est monté, il va alors pouvoir être mis à jour ou “re-rendered”, quand son state est modifié via la méthode this.setState, par exemple. Voyons ensemble quelles méthodes sont mis à notre disposition pour travailler avec et autour de ces étapes du cycle de vie.

Les méthodes liées au “mounting”

Deux méthodes sont prévues pour pouvoir agir avant et immédiatement après que le composant soit monté. On va utiliser pour ça deux méthodes appelées componentWillMount() et componentDidMount().

class MonComposant extends React.Component {
  componentWillMount() {
    // Ce bloc de code sera exécuté juste avant que le composant soit monté
  }

  componentDidMount() {
    // Ce bloc de code sera exécuté dès que le composant aura été monté
  }

}

Les méthodes liées à l'”unmounting”

Une méthode va être mise à notre disposition pour réaliser des actions avant l’unmounting de notre composant, la méthode componentWillUnmount(). Cette méthode peut être utile pour détruire un interval javascript, par exemple:

componentWillUnmount() {
  // Ce code sera exécuté juste avant que le composant soit démonté et retiré du DOM
  clearInterval(monInterval);
}

Les causes du “re-rendering” du composant

Quand un composant est monté et qu’il est affiché dans le DOM, il va être mis à jour dans 3 cas de figure:

  • si son **state est modifié** via `this.setState`
  • si ses **props sont modifiées**
  • si son composant parent est mis à jour

Les méthodes liées à la mise à jour du composant

4 méthodes sont mises à notre disposition pour travailler avec et autour de la mise à jour d’un composant monté:

  • `componentWillReceiveProps()`: nous permet de réaliser des actions juste avant que la nouvelle valeur d’une prop soit passée à notre composant
  • `componentDidUpdate()`: nous permet de réaliser des actions **après** que le composant ait été mis à jour
  • `componentWillUpdate()`: nous permet de réaliser des actions **juste avant** que le composant soit mis à jour
  • `shouldComponentUpdate()`: cette méthode va nous permettre de définir le comportement du composant et plus précisément dans quels cas de figure il doit être mis à jour (très utile pour éviter des re-rendering inutiles)

On a donc bien déterminé ensemble les différentes étapes du cycle de vie du composant React et les méthodes attachées à chaque étape. Nous verrons plus en détails les cas d’utilisation de chaque méthode dans des articles dédiés à venir. Bon coding et à bientôt !

Benjamin