React Hooks Guide Avancé en Français

# React Hooks Guide Avancé

Apprenez à maîtriser les React Hooks avancés pour construire des applications efficaces et maintenables.

## Hooks Fondamentaux avec TypeScript

### useState avec Types

```typescript
import { useState } from "react";

interface Utilisateur {
  id: number;
  nom: string;
  email: string;
  actif: boolean;
}

function ProfilUtilisateur() {
  const [utilisateur, setUtilisateur] = useState<Utilisateur | null>(null);
  const [chargement, setChargement] = useState(true);
  const [erreurs, setErreurs] = useState<string[]>([]);

  const mettreAJourNom = (nouveauNom: string) => {
    setUtilisateur((prev) => 
      prev ? { ...prev, nom: nouveauNom } : null
    );
  };

  return (
    <div>
      {chargement ? (
        <p>Chargement...</p>
      ) : utilisateur ? (
        <h1>Bienvenue, {utilisateur.nom}</h1>
      ) : (
        <p>Utilisateur non trouvé</p>
      )}
    </div>
  );
}
```

## useReducer pour État Complexe

```typescript
interface Produit {
  id: string;
  nom: string;
  prix: number;
  quantite: number;
}

interface EtatPanier {
  articles: Produit[];
  total: number;
  nombreArticles: number;
}

type ActionPanier =
  | { type: "AJOUTER_ARTICLE"; payload: Produit }
  | { type: "SUPPRIMER_ARTICLE"; payload: string }
  | { type: "VIDER_PANIER" };

function reducteurPanier(etat: EtatPanier, action: ActionPanier): EtatPanier {
  switch (action.type) {
    case "AJOUTER_ARTICLE": {
      const existant = etat.articles.find((p) => p.id === action.payload.id);
      
      if (existant) {
        const articlesMisAJour = etat.articles.map((p) =>
          p.id === action.payload.id
            ? { ...p, quantite: p.quantite + 1 }
            : p
        );
        return calculerTotaux({ ...etat, articles: articlesMisAJour });
      }
      
      return calculerTotaux({
        ...etat,
        articles: [...etat.articles, { ...action.payload, quantite: 1 }],
      });
    }
    
    case "SUPPRIMER_ARTICLE": {
      const articlesFiltres = etat.articles.filter((p) => p.id !== action.payload);
      return calculerTotaux({ ...etat, articles: articlesFiltres });
    }
    
    case "VIDER_PANIER":
      return { articles: [], total: 0, nombreArticles: 0 };
      
    default:
      return etat;
  }
}
```

## Hooks Personnalisés

### useLocalStorage

```typescript
import { useState, useEffect } from "react";

export function useLocalStorage<T>(
  cle: string,
  valeurInitiale: T
): [T, (valeur: T | ((prev: T) => T)) => void] {
  const [valeurStockee, setValeurStockee] = useState<T>(() => {
    if (typeof window === "undefined") return valeurInitiale;
    
    try {
      const element = window.localStorage.getItem(cle);
      return element ? JSON.parse(element) : valeurInitiale;
    } catch (erreur) {
      console.error("Erreur de lecture localStorage:", erreur);
      return valeurInitiale;
    }
  });

  useEffect(() => {
    try {
      window.localStorage.setItem(cle, JSON.stringify(valeurStockee));
    } catch (erreur) {
      console.error("Erreur d écriture localStorage:", erreur);
    }
  }, [cle, valeurStockee]);

  return [valeurStockee, setValeurStockee];
}

// Utilisation
function Parametres() {
  const [theme, setTheme] = useLocalStorage("theme", "clair");
  const [langue, setLangue] = useLocalStorage("langue", "fr");

  return (
    <div>
      <button onClick={() => setTheme(theme === "clair" ? "sombre" : "clair")}>
        Thème actuel: {theme}
      </button>
    </div>
  );
}
```

## Optimisation des Performances

```typescript
import { useMemo, useCallback, memo } from "react";

export function ListeProduits({
  produits,
  categorieSelectionnee,
  onSelectionner,
}: {
  produits: Produit[];
  categorieSelectionnee: string;
  onSelectionner: (id: string) => void;
}) {
  // Mémoriser les produits filtrés
  const produitsFiltres = useMemo(() => {
    console.log("Filtrage des produits...");
    return produits.filter(
      (p) => !categorieSelectionnee || p.categorie === categorieSelectionnee
    );
  }, [produits, categorieSelectionnee]);

  // Mémoriser la fonction de clic
  const gererClic = useCallback(
    (id: string) => {
      onSelectionner(id);
    },
    [onSelectionner]
  );

  return (
    <ul className="grid grid-cols-3 gap-4">
      {produitsFiltres.map((produit) => (
        <CarteProduit
          key={produit.id}
          produit={produit}
          onClick={gererClic}
        />
      ))}
    </ul>
  );
}
```

Ce guide React Hooks en français couvre tous les hooks essentiels avec des exemples pratiques.