Explorer les crochets React et les innovations React 19

Les Hooks ont révolutionné le développement de React en permettant aux composants fonctionnels de gérer avec élégance l'état, les effets secondaires et la logique complexe. Avec React 19, de nouveaux hooks ont été introduits pour rationaliser davantage le flux de travail. Dans cet article, nous explorerons les hooks classiques, les hooks avancés et les nouveautés de la version 19 avec des exemples pratiques.

Crochets de réaction de base

useState : gestion simple de l'état

Gère les états locaux dans les composants fonctionnels. Idéal pour les valeurs qui évoluent dans le temps.

Exemple : Compteur interactif

importer { useState } depuis 'react' ;

fonction Compteur() { const [compte, setCount] = useState(0);

retour (

useEffect : effets secondaires

Exécute le code après le rendu, comme les appels API ou la manipulation DOM.

Exemple : Récupération de données à partir d'une API

importer { useState, useEffect } depuis 'react' ;

fonction ListeUtilisateurs() { const [utilisateurs, setUsers] = useState([]);

utiliserEffet(() => { récupérer('https://api.example.com/users') .then(réponse => réponse.json()) .then(données => setUsers(données)); }, []); // Exécuté une seule fois

retour (

{users.map(utilisateur => (
• {user.name}
))}

useContext : partage d'état global

Accède aux valeurs de contexte sans perçage d'accessoires.

Exemple : Thème sombre/clair

importer { createContext, useContext, useState } depuis 'react' ;

const ThemeContext = createContext();

fonction App() { const [thème, setTheme] = useState('light');

retour ( <ThemeContext.Provider value=> <Barre d'outils /> </ThemeContext.Provider> ); }

fonction Barre d'outils() { const { thème, setTheme } = useContext(ThemeContext);

retour ( <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}> Passer au thème {theme === 'light' ? 'sombre' : 'clair'} ); }

useRef : références mutables

Stocke les valeurs qui persistent entre les rendus sans provoquer de nouveaux rendus.

Exemple : Concentrez-vous sur la saisie

importer { useRef } depuis 'react' ;

fonction EntréeTexte() { const inputRef = useRef(null);

const focusInput = () => { inputRef.current.focus(); } ;

retour (

Hooks avancés et personnalisés

useReducer : État complexe

Gère les états avec une logique plus élaborée, similaire à Redux.

Exemple : Liste des tâches

importer { useReducer } depuis 'react' ;

function todosReducer(état, action) { commutateur (action.type) { cas 'ADD_TODO' : return [...state, { texte : action.text, terminé : false }] ; cas 'TOGGLE_TODO' : return state.map ((à faire, index) => index === action.index ? { ...todo, terminé : !todo.completed } : todo ); par défaut : état de retour ; } }

fonction TodoApp() { const [todos, dispatch] = useReducer(todosReducer, []);

const handleSubmit = (e) => { e.preventDefault(); dispatch({ type : 'ADD_TODO', texte : e.target.elements.todo.value }); e.target.reset(); } ;

retour (

useMemo et useCallback : optimisation des performances

• useMemo : Mémorise les valeurs calculées.
• useCallback : Mémorise les fonctions.

Exemple : calcul lourd

importer { useMemo, useState } depuis 'react' ;

function ExpensiveComponent({ liste }) { const sortedList = useMemo(() => { console.log('Liste de commande...'); return [...liste].sort(); }, [liste]);

return

Hooks personnalisés : réutilisation logique

Exemple : useFetch pour les requêtes HTTP

importer { useState, useEffect } depuis 'react' ;

fonction useFetch(url) { const [données, setData] = useState(null); const [chargement, setLoading] = useState(true);

utiliserEffet(() => { récupérer (url) .then(res => res.json()) .then(données => { setData(date); setLoading(faux); }); }, [url]);

return { données, chargement } ; }

// Utilisation dans le composant : function Profil utilisateur ({ ID utilisateur }) { const { données : utilisateur, chargement } = useFetch(https://api.example.com/users/${userId});

if (loading) return

Nouveaux crochets React 19

useOptimistic : mises à jour optimistes

Met à jour l'interface utilisateur avant la validation du serveur, et revient en arrière en cas d'échec.

Exemple : ajout de commentaires optimistes

importer { useOptimistic } depuis 'react' ;

function CommentForm({ onSubmit }) { const [optimisticComments, addOptimisticComment] = useOptimistic( [], (state, newComment) => [...state, { texte : newComment, envoi : true }] );

const handleSubmit = async (e) => { e.preventDefault(); const formData = new FormData(e.target); const comment = formData.get('comment');

addOptimisticComment(commentaire);

essayez {
  attendre onSubmit (commentaire);
} attraper (erreur) {
  // Rétablit l'interface utilisateur si la requête échoue
}

} ;

retour (

useResource : Intégration avec Suspense

Gère les données asynchrones de manière déclarative.

Exemple : Chargement de données avec repli

importer { useResource, Suspense } depuis 'react' ;

fonction fetchUser(id) { // Renvoie une promesse }

function Profil utilisateur ({ ID utilisateur }) { const userResource = useResource(() => fetchUser(userId));

return

// Utilisation dans le composant parent : <Suspense fallback={