Comment créer ces propres hooks avec react
Créer ces propres hooks avec Réact
- 2 min read
🎣 Custom Hooks en React
Créer des hooks personnalisés (ou custom hooks) avec React est une excellente manière de réutiliser la logique d’état entre plusieurs composants.
Un custom hook est simplement une fonction JavaScript qui utilise un ou plusieurs hooks React (useState, useEffect, etc.).
✅ Pourquoi utiliser un custom hook ?
Imaginons que tu as plusieurs composants qui doivent :
- suivre la taille de la fenêtre,
- faire des appels API,
- gérer un minuteur, etc.
👉 Plutôt que de répéter le code dans chaque composant, tu l’isoles dans une fonction réutilisable : ton propre hook.
🛠️ Exemple 1 : useWindowWidth
import { useState, useEffect } from "react";
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
function handleResize() {
setWidth(window.innerWidth);
}
window.addEventListener("resize", handleResize);
// Nettoyage à la destruction du composant
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
return width;
}
export default useWindowWidth;
📦 Exemple d’utilisation
import React from "react";
import useWindowWidth from "./useWindowWidth";
function MyComponent() {
const width = useWindowWidth();
return (
<div>
<h1>La largeur de la fenêtre est : {width}px</h1>
</div>
);
}
🔁 Exemple 2 : useFetch (appel API générique)
import { useState, useEffect } from "react";
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(json => {
setData(json);
setLoading(false);
});
}, [url]);
return { data, loading };
}
export default useFetch;
📦 Exemple d’utilisation
import React from "react";
import useFetch from "./useFetch";
function UserList() {
const { data, loading } = useFetch("https://jsonplaceholder.typicode.com/users");
if (loading) return <p>Chargement...</p>;
return (
<ul>
{data.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
💾 Exemple 3 : useLocalStorage (lecture/écriture avec localStorage)
import { useState } from "react";
function useLocalStorage(key, initialValue) {
const [storedValue, setStoredValue] = useState(() => {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
});
const setValue = (value) => {
setStoredValue(value);
window.localStorage.setItem(key, JSON.stringify(value));
};
return [storedValue, setValue];
}
export default useLocalStorage;
📦 Exemple d’utilisation
import React from "react";
import useLocalStorage from "./useLocalStorage";
function NameSaver() {
const [name, setName] = useLocalStorage("username", "");
return (
<div>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Entrez votre nom"
/>
<p>Nom enregistré : {name}</p>
</div>
);
}
⚠️ Règles à respecter
Un custom hook :
- Commence toujours par
use(useFetch,useForm, etc.). - Peut utiliser d’autres hooks React, mais ne doit pas être appelé de manière conditionnelle.
- Peut retourner n’importe quoi : un état, une fonction, un objet, etc.