Avec React 16.8, une nouvelle fonctionnalité que l'on appelle les hooks sont arrivés. Ils coincident avec le fait d'utilier les functional components. Ils permettent notamment d'utiliser les fonctionnalités d'un class component mais pas uniquement.
Comme j'ai déjà pu vous faire la remarque, ce n'est pas parce que c'est une "nouveauté" dans React qu'il faut vous jeter dessus. Tout d'abord, les applications que vous avez développées sont 100% rétro-compatibles puisqu'un hook n'affecte pas les composants de classe. De plus, rien ne vous empêche de les introduires au fur et à mesure dans votre application sur de nouveaux composants : tant que le composant est un functional component.
Un hook n'est ni plus, ni moins, qu'une fonction en JavaScript. Vous l'appelez comme une fonction avec la possibilité de lui passer un ou plusieurs paramètres et cette fonction va vous renvoyer un résultat. Cependant, un hook va suivre 2 règles fondamentales pour être utilisé.
Vous ne pouvez appeler un hook uniquement au plus haut niveau (la racine) de votre fonction. Vous ne pourrez donc pas appeler de hook dans une instruction algorithmique (boucle, structure conditionnel avec un if, etc... )
Appelez les hooks uniquement depuis des functional components. Vous ne devez pas appeler un hook dans une fonction JavaSript classique excepté si c'est un hook personnalisé.
Les hooks n'ont pas fait leur introduction par hasard ; pourquoi les ajouter alors qu'on pouvait s'en sortir sans ? Si vous regardez quelques articles à ce sujet, il ya plusieurs raisons à cela.
Au fil du temps, il s'est avéré que les composants sont devenus de plus en plus complexe. Alors qu'ils devrait être simples comme on peut le voir depuis le début, chaque composant pouvait devenir une usine à gaz. Notamment lorsque vous deviez commencer à interagir avec le cycle de vie, vérifier les prevProps ou les nextProps. On doit implémenter des fonctionnalités dans un componentDidMount qu'il faut nettoyer dans une autre méthode componentWillUnmount, etc... Il était également difficile de découper ces composants en d'autres plus petits car les états pouvaient commencer à s'éparpiller.
Concernant les classes, on a pu voir aussi qu'elles peuvent être déroutantes car elles sont une barrière à l'apprentissage. Une classe est liée au fonctionnement complexe du this en JavaScript et cela vous rajoute une difficulté supplémentaire notamment à cause de l'objet en JavaScript qui est bien différent que la plupart des langages. On parle d'ailleurs de prototype exactement.
En d'autres termes, les hooks nous permettent d'utiliser davantage de fonctionnalités de React sans recourir aux classes. D'ailleurs, les composants React ont toujours été proches des fonctions et les Hooks tirent pleinement parti des fonctions, sans pour autant oublier l'esprit pratique de React.
Enfin, comme un hook est une fonction, en plus de l'intérêt de pouvoir accéder à l'état local d'un composant, il va vous permettre d'utiliser des logiques communes entre les composants. Telle une fonction qui factorise votre code, le hook va vous permettre de faire cette factorisation tout en vous permettant de réutiliser la logique à état entre les composants.