Simplifier les composants grâce aux hooks Hooks

Jusque-là, dans ce chapitre, nous avons vu que pour ajouter du comportement aux composants (état local, réaction aux actions de l’utilisateur ou gestion du cycle de vie) il était nécessaire d’avoir un composant écrit sous forme de classe. En réalité, fin 2018, à l’occasion de la React Conf, Facebook a annoncé l’ajout d’une fonction à React qui a séduit la plupart des développeurs : les hooks. Ceux-ci permettent de gérer l’intégralité des possibilités offertes aux composants dans une fonction, et non dans une classe.

Reprenons par exemple le composant App de notre application, et initialisons une nouvelle version, sous forme de fonction cette fois-ci. Naïvement, déclarons les éléments du state à l’aide de simples variables, de même que les fonctions addTask et setTaskStatus.

const App = () => { 
 const nextId = null 
 const tasks = [] 
 const isFetching = true 
 const hasError = false 
 
 const setTaskStatus = (taskId, isDone) => {} 
 
 const addTask = label => {} 
 
 if (hasError) { 
   return <p>Oups, une erreur s’est produite…</p> 
 } 
 if (isFetching) { 
   return <p>Chargement en cours…</p> 
 } 
 
 return (  ...