React : comment utiliser la méthode componentWillMount() dans un Hook ?

Le framework JavaScript React a été développé et maintenu par les équipes de Facebook. Il a eu de nombreuses mises à jour qui ont changé des éléments ou apporté des fonctionnalités supplémentaires. Les Hooks sont arrivés avec la version 16.8. Ces fonctions spéciales permettent de manipuler l'état d'un composant et de gérer également son cycle de vie. La méthode "componentWillMount()" est liée aux Hooks, mais on ne peut pas les utiliser ensemble.

En effet, les Hooks ne sont pas liés aux mêmes objets que la méthode "componentWillMount()". La version de 14 a introduit les composants fonctionnels. Ce sont des composants que l'on peut créer avec une simple fonction. Les Hooks s'utilisent uniquement avec ce type de composant. La méthode "componentWillMount()" s'utilise, elle, avec un composant sous forme de classe React. Si vous souhaitez utiliser un code avec le même fonctionnement que la méthode "componentWillMount()", vous devez utiliser le Hook "useEffect()". Il permet de gérer les évènements liés aux méthodes "componentWillMount()", "componentDidUpdate()" et "componentWillUnmount()". La fonction en premier paramètre du Hook sera appelée lorsque le composant est monté, de la même façon qu'avec "componentWillMount()" pour un composant de classe. Si le Hook retourne une fonction, alors celle-ci sera utilisée lorsque le composant est supprimé, comme avec "componentWillUnmount()". Vous devez par contre faire attention à l'écriture de l'appel de "useEffect()". Vous devez bien spécifier un tableau vide en deuxième paramètre, pour que le code ne soit appelé qu'une seule fois. Si vous ne le faites pas, alors le code sera interprété à chaque affichage du composant, il s'agit d'un comportement alors similaire à la méthode "componentDidUpdate()".

//Fonction avec un composant de classe
componentDidMount() {
  window.addEventListener('mousemove', () => {})
}

componentWillUnmount() {
  window.removeEventListener('mousemove', () => {})
}

//Fonctionnement avec un Hook pour un composant fonctionnel
useEffect(() => {
  window.addEventListener('mousemove', () => {}),

  return () => {
    window.removeEventListener('mousemove', () => {})
  }
}, [])

JavaScript