Découverte
Notions avancées
Les hooks
Notions avancées
TP
TP Recettes: AuthentificationRéservé aux membres premiums
30 min
TP Recettes: Récupération des ingrédientsRéservé aux membres premiums
38 min
TP Recettes: Gestion des ingrédientsRéservé aux membres premiums
29 min
TP Recettes: Gestion des recettesRéservé aux membres premiums
39 min
TP Recettes: Création d'une recetteRéservé aux membres premiums
47 min
TP Recettes: Edition d'une recetteRéservé aux membres premiums
25 min
Conclusion
Conclusion
04 min

Dans les chapitres précédent on a vu qu'il était possible de définir un composant à partir d'une simple fonction.

function PrimaryButton ({children, ...props}) {
   return <button {...props}>{children}</button>
}

Malheureusement, avant la sortie de react 16.8 il n'était pas possible d'utiliser un état pour ce type de composant. Ce problème a été corrigé avec l'apparition d'une nouvelle API au sein de react : l'API des hooks.

useState

Les hooks apportent une approche fonctionnelle à la gestion de l'état.

function Compteur () {
    const [count, setCount] = useState(0);
    const increment = function () {
        setCount(n => n + 1)
    }
    return <button onClick={increment}>Incrémenter {count}</button>
}