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 ( ...