ReactJS - Cycle de vie du composant en utilisant les Hooks de React

Bonjour, développeurs en herbe ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde de ReactJS, en nous concentrant sur le cycle de vie des composants en utilisant les Hooks de React. Ne vous inquiétez pas si vous êtes nouveau dans le domaine de la programmation - je vais vous guider à travers chaque étape avec des explications claires et un grand nombre d'exemples. Alors, plongeons dedans !

Introduction aux Hooks de React

Avant de plonger dans le cycle de vie des composants, comprensons ce qu'est un Hook. Imaginez les Hooks comme des outils spéciaux qui vous permettent d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classe. Ils sont comme des baguettes magiques qui donnent à vos composants fonctionnels des superpuissances !

Pourquoi utiliser les Hooks ?

Dans les vieilles Zeiten (eh bien, pas si vieilles, mais dans les années techniques), nous devions utiliser des composants de classe pour gérer l'état et les effets secondaires. Mais les classes peuvent être déroutantes, surtout pour les débutants. Les Hooks simplifient ce processus, rendant notre code plus propre et plus réutilisable.

Le Cycle de Vie du Composant

Tout comme nous les humains, les composants React ont un cycle de vie. Ils naissent (montent), ils grandissent et changent (se mettent à jour), et finalement, ils ne sont plus nécessaires (démontent). Comprendre ce cycle de vie est crucial pour créer des applications React efficaces.

Les Trois Phases d'un Composant

1. Montage : Le composant est ajouté au DOM.
2. Mise à jour : Le composant est re-rendu à cause de changements dans les props ou l'état.
3. Démontage : Le composant est retiré du DOM.

Maintenant, voyons comment nous pouvons gérer ces phases en utilisant les Hooks !

useState : Gérer l'État du Composant

Le Hook useState est votre outil de choix pour ajouter un état aux composants fonctionnels. Regardons un exemple :

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Vous avez cliqué {count} fois</p>
<button onClick={() => setCount(count + 1)}>
Cliquez-moi
</button>
</div>
);
}

Dans cet exemple, useState(0) initialise une variable d'état count avec une valeur de 0. La fonction setCount nous permet de mettre à jour cet état. Chaque fois que le bouton est cliqué, setCount(count + 1) est appelé, incrémentant le compteur et provoquant le re-rendu du composant.

useEffect : Gérer les Effets Secondaires

Le Hook useEffect est comme un couteau suisse pour gérer les effets secondaires dans vos composants. Il combine la fonctionnalité de plusieurs méthodes de cycle de vie des composants de classe.

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
const [data, setData] = useState(null);

useEffect(() => {
// Cet effet s'exécute après chaque rendu
console.log('Composant rendu');

// Simulation d'un appel API
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
};

fetchData();

// Fonction de nettoyage
return () => {
console.log('Composant va être démonté ou re-rendu');
};
}, []); // Le tableau de dépendances vide signifie que cet effet ne s'exécute qu'une fois au montage

return (
<div>
{data ? <p>{data}</p> : <p>Chargement...</p>}
</div>
);
}

Cet exemple démontre plusieurs concepts clés :

1. L'effet s'exécute après que le composant a été rendu.
2. Nous simulons un appel API pour récupérer des données.
3. La fonction de nettoyage (retournée par l'effet) s'exécute avant que le composant soit démonté ou avant que l'effet se ré-exécute.
4. Le tableau de dépendances vide [] signifie que cet effet n'est exécuté qu'une fois au montage du composant.

Hooks Personnalisés : Créer un Logic Réutilisable

L'une des fonctionnalités les plus puissantes des Hooks est la capacité de créer des Hooks personnalisés. Ceux-ci vous permettent d'extraire la logique du composant dans des fonctions réutilisables. Créons un Hook personnalisé pour gérer les saisies de formulaire :

import { useState } from 'react';

function useInput(initialValue) {
const [value, setValue] = useState(initialValue);

const handleChange = (event) => {
setValue(event.target.value);
};

return [value, handleChange];
}

// Utilisation du Hook personnalisé
function LoginForm() {
const [username, handleUsernameChange] = useInput('');
const [password, handlePasswordChange] = useInput('');

const handleSubmit = (event) => {
event.preventDefault();
console.log(`Connexion avec ${username} et ${password}`);
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={username}
onChange={handleUsernameChange}
placeholder="Nom d'utilisateur"
/>
<input
type="password"
value={password}
onChange={handlePasswordChange}
placeholder="Mot de passe"
/>
<button type="submit">Connexion</button>
</form>
);
}

Ce Hook personnalisé useInput encapsule la logique pour gérer les saisies de formulaire, rendant notre composant LoginForm beaucoup plus propre et réutilisable.

Propriété children de React (Conteneur)

La propriété children en React vous permet de passer des composants comme des données à d'autres composants, offrant une manière de créer des composants enveloppants. Ce concept est souvent appelé "containment".

function Panel({ children, title }) {
return (
<div className="panel">
<h2>{title}</h2>
{children}
</div>
);
}

function App() {
return (
<Panel title="Bienvenue">
<p>Ceci est le contenu du panneau.</p>
<button>Cliquez-moi !</button>
</Panel>
);
}

Dans cet exemple, le composant Panel peut envelopper tout contenu passé à lui comme enfants, le rendant extrêmement réutilisable.

Conclusion

Nous avons couvert beaucoup de terrain aujourd'hui ! De la compréhension des bases des Hooks de React à l'exploration du cycle de vie des composants et même à la création de Hooks personnalisés. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces concepts dans vos propres projets.

Voici un tableau de référence rapide des Hooks que nous avons discutés :

Hook	But	Exemple
useState	Gérer l'état du composant	const [count, setCount] = useState(0);
useEffect	Gérer les effets secondaires	useEffect(() => { /* effet */ }, []);
Hooks Personnalisés	Créer une logique réutilisable	const [value, handleChange] = useInput('');

Bonne programmation, et que les Hooks soient avec vous !

Credits: Image by storyset