React Hooks : Comprendre useState, useEffect et useContext

Table des matières

React Hooks : Comprendre `useState`, `useEffect` et `useContext`

Introduction aux React Hooks

Les Hooks sont une fonctionnalité introduite dans React 16.8 pour permettre aux développeurs de gérer l'état et les effets secondaires dans les composants fonctionnels. Avant les hooks, seules les classes permettaient de gérer l'état, mais avec les hooks, React permet de rendre les composants fonctionnels plus puissants et plus concis.

1. `useState` : Gérer l'état dans un composant fonctionnel

Qu'est-ce que useState ?

useState est un hook qui permet de définir un état local dans un composant fonctionnel. C'est l'équivalent de this.state dans les composants de classe.

Syntaxe de base :

const [state, setState] = useState(initialValue);

state: La valeur actuelle de l'état.
setState: Fonction pour mettre à jour l'état.
initialValue: Valeur initiale de l'état.

Exemple :

import React, { useState } from 'react';

const Compteur = () => {
    const [compte, setCompte] = useState(0);

    return (
        
            Compteur : {compte}
            
        
    );
};

export default Compteur;

2. `useEffect` : Gérer les effets secondaires dans un composant fonctionnel

Qu'est-ce que useEffect ?

useEffect permet de gérer les effets secondaires dans un composant fonctionnel. Un effet secondaire peut être une requête API, une modification du DOM, ou des souscriptions à des événements.

Syntaxe de base :

useEffect(() => {
    // Code à exécuter (effet)
}, [dependencies]);

Le premier argument est une fonction contenant l'effet.
Le deuxième argument est un tableau de dépendances. Si une valeur dans ce tableau change, l'effet sera réexécuté.

Exemple :

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

const TitrePage = () => {
    const [compte, setCompte] = useState(0);

    useEffect(() => {
        document.title = `Vous avez cliqué ${compte} fois`;
    }, [compte]);

    return (
        
            Vous avez cliqué {compte} fois
            
        
    );
};

export default TitrePage;

3. `useContext` : Utiliser un contexte dans un composant fonctionnel

Qu'est-ce que useContext ?

useContext est un hook qui permet à un composant fonctionnel de consommer une valeur à partir du contexte React. Le Contexte permet de partager des données entre les composants sans avoir à les passer explicitement via les props.

Syntaxe de base :

const valeur = useContext(MyContext);

Exemple :

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

const AffichageTheme = () => {
    const theme = useContext(ThemeContext);
    return Le thème est : {theme};
};

const App = () => {
    return (
        
            
        
    );
};

export default App;

4. Bonnes pratiques et conseils

Optimisation avec useState : Lors de la mise à jour d'un état basé sur l'ancien état, il est préférable d'utiliser une fonction dans setState :
```
setCompte(prevCompte => prevCompte + 1);
            
```
Mise en garde avec useEffect : Veillez à ajouter toutes les dépendances nécessaires dans le tableau des dépendances pour éviter des comportements inattendus.
Quand utiliser useContext ? Utilisez-le principalement pour des valeurs globales partagées dans l'arbre des composants.

Résumé

useState : Permet de gérer l'état local d'un composant fonctionnel.
useEffect : Permet de gérer les effets secondaires, comme les appels API, la modification du DOM, etc.
useContext : Permet de consommer des valeurs d'un contexte React, idéal pour partager des données globales.

React Hooks : Comprendre useState, useEffect et useContext