Les hooks : les super pouvoirs de vos Functional Components

Les hooks permettent enfin d'utiliser des functional components y compris lorsque vous avez besoin de disposer d'un state ou lorsque vous souhaitez exécuter du code à des moments très spécifiques (après le premier render, lorsque qu'une variable est mise à jour etc...). Autrement dit lorsque vous avez besoin de "lifecycle methods". Le cas le plus typique étant le besoin d'effectuer une requête AJAX vers une API REST après le premier render.

Class Components vs Functional Components : l'écart se réduit

Jusqu'à la version 16.8 de React, la nécessité de disposer d'un state ou le besoin de lifecycle methods rendait obligatoire la création de Class Components. Désormais, grâce aux React Hooks, vous pouvez créer des components moins verbeux - vos chers Functional Components - y compris dans les situations pré-citées.
Si l'on ajoute à cela la possibilité de créer des custom hooks, vos applications pourront devenir plus composables afin que des fonctionnalités requises par plusieurs components puissent être aisément partagées.


pour rester informer des dernières actu JavaScript, inscrivez vous à la newsletter


Est-ce vraiment la fin de Redux ?

Sans doute avez-vous entendu dire que la combinaison de certains hooks permettait de remplacer Redux. C'est en partie vrai et en partie exagéré, comme bien souvent lorsqu'une évolution aussi majeure a lieu.
Dans certaines situations en effet, l'association de certains hooks - tels que useReducer() et useContext() - vous permettront de disposer d'un store centralisé et de modifier ce store à l'aide d'actions que vous pourrez dispatcher comme vous êtes habitué à le faire en Redux. Mais sur de grosses applications, la librairie Redux restera votre meilleure alliée.

Les Class Components sont-ils morts ?

Absolument pas. Vos connaissances antérieures de React restent pleinement d'actualité. L'écrasante majorité des projets existants que vous rencontrerez en poste utilisent les Class Components et les SFC (Stateless Functional Components). Mais dans les nouveaux projets, il y a de très fortes probabilités que vous soyez amenés à créer des Functional Components (qui peuvent désormais être stateful grâce au hook "useState") qui recourront aux hooks les plus courants (tels que useState, useEffect, useRef et useReducer) et aux autres (useMemo, useCallback ...), sans oublier les custom hooks que créeront vos collègues et prochainement vous-même ;)

Pour le dire vite Class Components et SFC sont le présent, Functional Components dopés aux hooks sont le futur immédiat.