Différents composants utilisent parfois la même logique de hook. Plutôt que de dupliquer le code dans chacun d'entre eux, il est possible d'extraire ce code dans une fonction et d'en faire un hook personnalisé ou en anglais un "custom hook".
Dans l'exemple ci-dessous 👇, une variable d'état (name) est synchronisée avec un élément du localStorage.
Cependant, plusieurs composants pourraient aussi bénéficier de cette logique de synchronisation. Voyons voir comment nous pourrions l'extraire dans un hook personnalisé permettant son utilisation dans chacun d'entre eux.
Déclaration
Par convention, un hook personnalisé commence toujours par le préfixe "use". Ainsi l'application React sait que cette fonction fait office de hook.
Par exemple, un hook personnalisé synchronisant une variable avec un élément du localStorage pourrait être nommé ainsi:
function useLocalStorageState() { ... } L'essence même d'un hook personnalisé consiste à utiliser d'autres hooks React (useState, useEffect, etc.).
Il faut donc déplacer la logique des hooks de l'exemple précédent ☝️ à l'intérieur du nouveau hook personnalisé. Afin de rendre le hook plus polyvalent, certains éléments sont renommés, mais la logique reste la même:
Remarquez comment le hook personnalisé retourne un tableau contenant state et setState. Cette particularité permet de l'appeler comme n'importe quel hook traditionnel.