Permet de gérer l'état interne d'un composant. La mise a jour de l'état entraine un nouveau rendu du composant pour refléter le changement.
const [state, setState] = useState(valeur initiale)Exemple avec un compteur
Permet d'exécuter du code après le rendu d'un composant Un tableau de dépendances permet de contrôler quand l'effet doit être exécuté en spécifiant quelles variables doivent changer pour déclencher à nouveau l'effet. Si le tableau de dépendances est vide l'effet s'exécute uniquement une fois lors du montage du composant et ne se réexecute pas lors des mises a jour suivantes. Si le tableau contient des variables, l'effet se réexécute a chque changement des dépendances en plus de la premiere fois lors du montage.
useEffect( () => {
Code a exécuter après le rendu du composant
&125;
return () => {
code de nettoyage
&125;;
&125;,[dépendances]);Exemple avec un timer :
Permet d'accéder à des valeurs de contexte partagées à travers l'arborescence des composants sans avoir à passer les props manuellement à chaque niveau. Un contexte est créé avec createContext, puis utilisé avec useContext pour accéder aux valeurs du contexte dans un composant. Le Provider est utilisé pour fournir une valeur de contexte aux composants descendants.
//Creation du contexte
const MonContexte = createContext(valeur);
const Composant = () => {
const [contextValue, setContextValue] = useState('Valeur initiale');
const context = useContext(MyContext);
return (
<MonContexte.Provider value={{ contextValue, setContextValue }}>
{/* Composants enfants */}
</MonContexte.Provider>
);
}Exemple avec un theme :
Permet de gérer des états complexes ooù les transitions entre états sont déterminées par des actions et où la logique d'état est complexe. La logique de mise a jour de l'état se retrouve dans une fonction reducer.
const [state, dispatch] = useReducer(reducer,initialState);
//reducer : Une fonction qui prend l'état courant et une action, et retourne un nouvel état.
//initialState : La valeur initiale de l'état.
//state : L'état actuel.
//dispatch : Une fonction pour envoyer des actions à la fonction reducer.
Exemple avec un compteur
Permet de garder en mémoire les fonctions afin d'optimiser les performances de composants Chaque fois qu'un composant parent est re-rendu toutes les fonction définies a l'interrieur de ce dernier sont recrées. Si ces fonctions sont passées en tant que props a des composants enfants, cela peut déclancher des re-rendu intules des enfants, même si l'état des props n'as pas changé useCallback mémoirise une fonction et ne la recrée que si l'une des dépendances change. Cela permet de passer des gonctions en props sans créer de nouvelles instances a chaque re-render
const memoizedCallback = useCallback(
() => {
// Code de la fonction ici
},
[dependencies] // Liste de dépendances
);Exemple avec un compteur:
Permet de mémoriser des valeurs calculées pour optimiser les performances des composants. Chaque fois qu'un composant parent est re-rendu, tous les calculs définis à l'intérieur de celui-ci sont refaits. Si ces calculs sont coûteux, cela peut nuire aux performances. useMemo mémorise une valeur et ne la recalcule que si l'une des dépendances change. Cela permet de réduire le nombre de calculs effectués à chaque re-render.
const memoizedValue = useMemo(
() => {
// Calcul coûteux ici
return result;
},
[dependencies] // Liste de dépendances
);Exemple avec un calcul coûteux:
Il permet de créer une référence mutable qui persiste entre les rendus d'un composant. La valeur de la référence peut être modifiée sans déclencher de re-render du composant. useRef est souvent utilisé pour stocker des références à des éléments du DOM ou à des valeurs qui ne déclenchent pas de re-render.
const myRef = useRef(initialValue);
// initialValue : Valeur initiale de la référence
// myRef.current : Valeur actuelle de la référence
Exemple avec une référence à un élément du DOM:
Permet à un composant parent d'accéder à des fonctions exposées par un composant enfant. Cela permet de contrôler le comportement du composant enfant depuis le parent.
useImperativeHandle(ref, () => {
fonctionExposée: () => {
// Code de la fonction exposée
}
});Exemple avec un composant enfant (ici l'input) qui donne acces a son focus au parent
Similaire à useEffect, mais s'exécute de manière synchrone après le rendu du composant. Cela peut être utile pour effectuer des opérations de mise en page qui nécessitent de connaître la taille ou la position d'un élément avant que le navigateur ne mette à jour l'écran.
useLayoutEffect(() => {
// Code à exécuter après le rendu
},[dependencies]);Exemple avec la largeur de la fenêtre:
Permet d'afficher des informations sur un hook personnalisé dans les outils de développement React. Cela peut être utile pour déboguer des hooks personnalisés et afficher des informations supplémentaires sur leur état interne.
useDebugValue(value);