
import Callout from "../../src/components/markdown/Callout";

Vous êtes vous déjà retrouvés dans cette situation où vous travaillez sur plusieurs projets utilisant des versions différentes
de Java, NodeJS ou Postgres ? Dans cet article, nous allons découvrir comment changer automatiquement de version en fonction
du dossier courant, et donc du projet. 📁

- [Mise en Situation](#mise-en-situation)
- [ASDF : Notre Baguette Magique](#asdf-notre-baguette-magique)
- [Un Exemple](#un-exemple)
- [Mettre en Place ASDF](#mettre-en-place-asdf)
- [Utilisation](#utilisation)
- [Conclusion](#conclusion)


## Mise en Situation

En tant que développeur Freelance travaillant sur plusieurs projets pour différents clients, vous avez probablement déjà rencontré
ce cas de figure : le projet A utilise Java 8, le projet B utilise Java 11, et le projet C utilise Java 17. Pour passer rapidement
d'une version à une autre, vous avez peut-être utilisé la commande `update-alternatives`.

```bash
sudo update-alternatives --config java
```

Cette méthode fonctionne bien, mais elle comporte un inconvénient : vous devez la lancer manuellement à chaque fois que vous
voulez passer à une autre version, ce qui peut vite devenir pénible. De plus, elle ne fonctionne pas avec d'autres outils
tels que `node` ou `postgres`.

Une solution à ce problème serait d'utiliser Docker. En effet, le but de Docker est de pouvoir créer une image qui comporte
toutes les bonnes versions à utiliser pour le projet courant. Cependant, tout le monde ne sait pas utiliser Docker et tous
les projets ne contiennent pas de Dockerfile pour mettre en place cet environnement. De plus, toutes les équipes n'ont pas
forcément de temps à consacrer à la création d'un Dockerfile : en fonction de la taille du projet, cette tâche peut rapidement
s'avérer délicate.

Une autre solution serait d'avoir une sorte de baguette magique qui pourrait automatiquement sélectionner la bonne version à
utiliser en fonction du projet, par exemple Java 8 pour le projet A, Java 11 pour le projet B, et ainsi de suite.

Eh bien, comment dire... cette baguette magique existe, et elle s'appelle [asdf](https://asdf-vm.com/). 🪄


## ASDF : Notre Baguette Magique

`asdf`, qu'est-ce que c'est concrètement ? C'est un outil en ligne de commande (CLI) qui sélectionne automatiquement la
bonne version à utiliser (Java, NPM, Node, Postgres, PHP, et bien plus encore) en fonction du dossier dans lequel on se trouve.
Pour déterminer la version de chaque outil à utiliser, `asdf` utilise un fichier nommé `.tool-versions` qui se trouve dans les dossiers concernés. Ce fichier comporte simplement une association entre chaque outil et sa version correspondante.

```
java openjdk-17
nodejs 17.3.0
postgres 13.5
```

Lorsque votre dossier courant ne contient pas ce fichier, `asdf` va alors chercher dans les dossiers parents afin de trouver le premier
qui en contient un. De ce fait, vous devez spécifier une version par défaut pour chaque outil, qui sera utilisée si `asdf` ne parvient
pas à trouver de fichier `.tool-versions` dans les dossiers parents. Les versions par défaut sont stockées dans votre répertoire
personnel : `~/.tool-versions`.

Un point intéressant à noter est que ce fichier peut être commité sur `git` afin que vos collègues puissent également avoir les bonnes
versions à utiliser, pourvu qu'ils utilisent eux aussi `asdf`. 💪🏼


## Un Exemple

Supposons que notre version par défaut de `node` soit la version 17.3.0, mais que l'un des projets sur lequel on travaille date de
plusieurs années et utilise la version 12.13.0. Si on lance un terminal et qu'on exécute la commande permettant de récupérer la
version de `node`, nous aurons notre version actuelle.

```
$ node --version
v17.3.0
```

Cette commande produira la même sortie si l'on se déplace dans le dossier `projet-A` ou dans n'importe quel autre dossier.
En revanche, si on indique à `asdf` que pour ce projet la version à utiliser est 12.13.0, alors la sortie de cette commande
sera différente.

```
$ asdf local nodejs 12.13.0
$ node --version
v12.13.0
```

Et si l'on se déplace à nouveau dans un autre dossier, la version de `node` va revenir comme par magie à celle par défaut.

```
$ cd ..
$ node --version
v17.3.0
```

Bluffant, pas vrai ? 🤯 Découvrons maintenant comment mettre en place `asdf` <Spoiler>et c'est ridiculement simple</Spoiler>.


## Mettre en Place ASDF

Tout d'abord, nous allons devoir télécharger `asdf` (disponible sur Linux et MacOS, mais malheureusement pas sur Windows).
Pour ce faire, nous clonons le dépôt `git` dans notre dossier personnel.

```
git clone https://github.com/asdf-vm/asdf.git ~/.asdf
```

<Callout status={"info"}>
  Si vous êtes sur MacOS, vous pouvez simplement utiliser `brew`.

  ```
  brew install asdf
  ```
</Callout>

Une fois le dépôt cloné, nous devrons ajouter les deux lignes ci-dessous à notre fichier `.bashrc` (ou `.zshrc`).

```
. $HOME/.asdf/asdf.sh
. $HOME/.asdf/completions/asdf.bash
```

Et c'est tout ! Nous avons installé `asdf` avec succès. 🎉


## Utilisation

Pour utiliser `asdf`, nous allons ajouter les plugins dont nous aurons besoin. Un plugin correspond à un outil : par exemple,
nous avons besoin du plugin `java` pour passer d'une version de `java` à une autre, du plugin `nodejs` pour changer de version
de NodeJS, et ainsi de suite. Pour ajouter un plugin, il suffit de lancer la commande suivante :

```
asdf plugin add [plugin]
```

Dans notre exemple, nous allons continuer avec NodeJS. On installe donc le plugin `nodejs`.

```
asdf plugin add nodejs
```

<Callout status="info">
  La commande `asdf plugin list all` permet d'afficher la liste de tous les plugins disponibles.
  Comme la liste est particulièrement longue, on filtrera les résultats avec `grep`.

  ```
  asdf plugin list all | grep node
  ```
</Callout>

Maintenant que nous avons ajouté le plugin `nodejs`, nous aurons besoin de télécharger les versions que nous utilisons.
Dans notre cas, il s'agit des versions 12.13.0 et 17.3.0.

```
asdf install nodejs 12.13.0
asdf install nodejs 17.3.0
```

Après avoir installé ces versions, la dernière étape consiste à indiquer à `asdf` quelle version utiliser en fonction du projet.
Pour ce faire, on se rend dans le dossier de notre projet qui utilise la version 12.13.0 et on choisit la bonne version de `nodejs`
à utiliser.

```
asdf local nodejs 12.13.0
```

Et voilà ! La version 12.13.0 de Node sera maintenant utilisée dans le dossier de notre projet, ainsi que dans ses sous-dossiers. 🥳

Si on lance maintenant `ls -al` dans le dossier courant pour afficher la liste des fichiers, on remarque ce fameux fichier `.tool-versions`
qui contient la version de Node pour ce projet. Nous pouvons l'ajouter à notre système de contrôle de versions (`git`).

```
nodejs 12.13.0
```

<Callout status="info">
  Lorsque vos collègues cloneront le dépôt `git` contenant ce fichier, ils n'auront pas à installer manuellement les
  versions de chaque outil : ils peuvent simplement lancer la commande `asdf install`, et la baguette magique se chargera
  de télécharger toutes les versions nécessaires.
</Callout>

Enfin, comme nous l'avons vu précédemment, nous devons définir une version par défaut à utiliser lorsqu'on se trouve dans un
dossier ne comportant pas de fichier `.tool-versions` (ni dans ses dossiers parents). Dans notre cas, nous allons utiliser la version
17.3.0 comme version par défaut.

```
asdf global nodejs 17.3.0
```

<Callout status="info">
  On peut également spécifier une version à utiliser pour la session de shell courante.

  ```
  asdf shell nodejs 17.3.0
  ```
</Callout>

Et c'est terminé, nous nous sommes maintenant débarrassés de l'enfer qu'est le changement manuel de nos versions, et ce grâce
à notre nouvelle baguette magique. 🪄


## Conclusion

Les versions de notre environnement sont maintenant gérées automatiquement par `asdf`. Lorsque vous aurez besoin d'utiliser un
nouveau plugin, les étapes seront toujours les mêmes :

1. Installer le plugin correspondant : `asdf plugin add [plugin]`
2. Installer les versions concernées : `asdf install [plugin] [version]`
3. Pour chaque projet, sélectionner la version à utiliser : `asdf local [plugin] [version]`
4. Sélectionner la version par défaut pour ce plugin : `asdf global [plugin] [version]`

Pour plus d'informations, ou si vous avez besoin d'aide concernant cet outil incroyable, n'hésitez-pas à vous rendre sur
[asdf-vm.com](https://asdf-vm.com/). De plus, vous pouvez étoiler `asdf` sur [GitHub](https://github.com/asdf-vm/asdf)
pour supporter l'équipe derrière ce projet. 😉

J'espère que cet article vous a été utile, et on se donne rendez-vous dans un prochain article. 🤘🏼


ASDF : Gestion Automatique des Versions Multiples


import Callout from "../../src/components/markdown/Callout";

Précédemment, nous avons implémenté le Hook [useAudio](/blog/react-hooks-personnalises-useaudio) pour simplifier la gestion des fichiers audio. Aujourd'hui, on implémente un Hook qui suit la visibilité de nos composants à l'écran : `useInView`.

- [Motivation](#motivation)
- [Implémentation](#implementation)
- [Utilisation](#utilisation)
- [Conclusion](#conclusion)


## Motivation

Tout d'abord, penchons-nous sur un cas concret afin de motiver l'implémentation de notre Hook. L'exemple le plus évident est celui des scroll infinis, comme votre fil *Facebook* ou *Instagram*. Comme vous le savez peut-être, ces applications ne chargent pas votre fil dans son entièreté (si c'était le cas, l'arbre DOM contiendrait des centaines, voire des milliers d'éléments, ce qui dégraderait considérablement leurs performances). À la place, elles chargent un certain nombre de publications, disons une dizaine et attendent que vous scrolliez un peu pour en charger une dizaine de plus. Lorsque vous continuerez de scroller, elles chargeront une dizaine de publications supplémentaires, et ainsi de suite. De ce fait, en faisant défiler votre fil, vous avez l'impression d'être face à une liste infinie.

Pour parvenir à ce résultat, ces applications utilisent les [Intersection Observers](https://developer.mozilla.org/fr/docs/Web/API/Intersection_Observer_API), qui attendent qu'un certain élément choisi soit au-dessus d'un certain seuil (appelé *root margin*) pour déclencher le chargement de nouveaux posts, comme le montre la figure ci-dessous.

![Schéma Intersection Observers](https://i.imgur.com/XHvm8bS.png)

Par exemple, lorsque le 4ᵉ élément sera visible à plus de 25% au-delà ce cette *root margin* (ce seuil peut être configuré), une fonction callback sera appelée pour afficher de nouveaux posts. Ce comportement est celui que notre Hook devra implémenter.

Si les *Intersection Observers* vous semblent flous, pas d'inquiétude : j'ai créé une petite démonstration avec laquelle vous pouvez jouer pour mieux comprendre leur fonctionnement. Si cela vous intéresse, vous pouvez y accéder via ce lien [CodeSandbox](https://codesandbox.io/s/intersection-observers-demo-16u0eg?file=/src/App.js).

Nous pouvons maintenant passer aux choses sérieuses et implémenter ce Hook. 👨🏻‍💻


## Implémentation

Avant toute chose, parlons de sa signature : comment souhaitons-nous l'utiliser ? Premièrement, nous voulons qu'il nous retourne une valeur booléenne nous indiquant si l'élément cible est visible ou non.

```jsx
const isIntersecting = useInView()
```

Mais nous avons un premier problème : comme nous l'avons vu dans le schéma de la section précédente, la *root margin* n'est pas directement en bas de l'écran. À la place, elle peut être plus bas (ou plus haut), et nous pouvons définir nous-même ce décalage (par exemple, `100px`). Nous pouvons également définir l'élément *root*, au sein duquel l'élément cible pourra être visible ou non, ainsi que le seuil de visibilité pour déclencher la fonction de callback (`0%`, `50%`, `100%`, ...). Dans notre exemple de scroll infini, l'élément `root` correspond à la zone d'affichage du navigateur (*viewport*), la *root margin* pourrait être définie à `100px`, le seuil d'affichage pourrait être à `0`, et l'élément cible pourrait être le pied de page (*footer*). De ce fait, dès que le *footer* arrivera à `100px` du bas de l'écran, la fonction de chargement de nouveaux posts sera déclenchée.

Sur la documentation officielle des *Intersection Observers*, on peut voir qu'un objet `options` peut être passé en argument lors de l'instanciation. Nous utiliserons ce même objet afin de garder la même logique plutôt que créer la nôtre, ce qui pourrait être perturbant pour nos collègues par exemple. Ainsi, la signature de notre Hook sera modifiée comme suit :

```jsx
const options = { root: someElement, rootMargin: '100px', threshold: 0.25 }
const isIntersecting = useInView(options)
```

<Callout status={'info'}>
  Chaque clé de l'objet `options` est optionnelle.
</Callout>

Voilà qui est mieux. Nous avons cependant un dernier souci : à quel moment définissons-nous l'élément cible ? De plus, nous ne voulons pas nous embêter avec les méthodes natives du DOM, telles que `document.querySelector` ou `document.findElementById`. Au lieu de ça, nous allons utiliser les *refs* (références) React pour nous simplifier la tâche et être plus dans la logique de composants. Notre Hook devra donc recevoir un autre paramètre : la *ref* de l'élément cible.

```jsx
const target = useRef(null)
const options = { ... }
const isIntersecting = useInView(target, options)

// ...

return <p ref={target}>Loading...</p>
```

<Callout status={'info'}>
  À noter que le paramètre `options` est totalement optionnel et pourra donc être omis.
</Callout>

Parfait, nous sommes désormais prêts à nous attaquer concrètement à l'implémentation. Commençons par définir le squelette du Hook.

```jsx
const useInView = (target, options = {}) => {
  const [isIntersecting, setIsIntersecting] = useState(false);
  return isIntersecting;
}
```

Ensuite, nous allons créer la logique des *Intersection Observers*. Pour ce faire, on va instancier un `IntersectionObserver` dès que le Hook sera monté. Comme nous l'avons vu précédemment, le constructeur prend en paramètre la fonction callback qui sera exécutée lorsque l'élément cible atteindra le seuil défini. Cette fonction recevra en argument la liste des entrées concernées, chacune correspondant à un seuil franchi pour un des éléments observés (dans notre cas, nous n'aurons qu'un seul élément cible et cette liste contiendra donc un seul élément). La fonction callback est donc aussi simple que ça :

```jsx
const callback = (entries) => {
  setIsIntersecting(entries[0].isIntersecting); 
}
```

Génial. Avec cette fonction callback et les options que nous recevons en arguments, nous pouvons instancier un `IntersectionObserver`.

```jsx
const useInView = (target, options = {}) => {
  const [isIntersecting, setIsIntersecting] = useState(false);
  const [observer, setObserver] = useState(null);

  useEffect(() => {
    const callback = (entries) => {
      setIsIntersecting(entries[0].isIntersecting);
    };

    const _observer = new IntersectionObserver(callback, options);
    setObserver(_observer);
  }, []);

  return isIntersecting;
}
```

Pour l'instant, rien ne se passe. En effet, nous devons observer l'élément cible après avoir créé cette instance, afin que la fonction callback soit appelée en conséquence lorsque cela sera nécessaire.

```jsx
useEffect(() => {
  const callback = (entries) => {
    setIsIntersecting(entries[0].isIntersecting);
  };

  const _observer = new IntersectionObserver(callback, options);
  _observer.observe(target);
  setObserver(_observer);
}, []);
```

Super. Maintenant, nous devons faire attention à quelque chose : lorsque le Hook sera démonté, nous devrons arrêter d'observer l'élément cible afin que la fonction callback ne soit pas appelée lorsqu'elle ne devrait pas. Pour ce faire, nous allons renvoyer une fonction de nettoyage dans l'appel à `useEffect`, qui se chargera de se déconnecter de l'*observer* quand le Hook sera démonté.

```jsx
useEffect(() => {
  const callback = (entries) => {
    setIsIntersecting(entries[0].isIntersecting);
  };

  const _observer = new IntersectionObserver(callback, options);
  _observer.observe(target);
  setObserver(_observer);

  return () => {
    observer?.disconnect();
  };
}, []);
```

<Callout status="info">
  On utilise ici l'opérateur de chaînage optionnel (`?.`) pour éviter de rencontrer des erreurs si, pour une raison ou une autre, l'*observer* est `null`.
</Callout>

Voilà qui est beaucoup mieux ! Nous nous rapprochons de la fin. Il ne nous reste qu'une chose à régler : nous devons écouter les changements de valeur de nos arguments. Par exemple, si l'élément cible ou le seuil de visibilité changent, nous devons mettre à jour l'*observer* en conséquence. Pour ce faire, nous allons les ajouter à la liste de dépendences du Hook `useEffect`, dans lequel nous nous déconnecterons du précédent *observer* (s'il existe) pour en créer une nouvelle instance avec les valeurs mises à jour.

```jsx
useEffect(() => {
  const callback = (entries) => {
    setIsIntersecting(entries[0].isIntersecting);
  };

  observer?.disconnect(); // On se déconnecte du précédent observer

	// target.current peut être null, auquel cas on ne fait rien
  if (target.current) {
    const _observer = new IntersectionObserver(callback, options);
    _observer.observe(target);
    setObserver(_observer);
  }

  return () => {
    observer?.disconnect();
  };
}, [target.current, options.root, options.rootMargin, options.threshold]);
```

Eh voilà, notre Hook est maintenant terminé et prêt à être utilisé. Voici le résultat final.

```jsx
const useInView = (target, options = {}) => {
  const [isIntersecting, setIsIntersecting] = useState(false);
  const [observer, setObserver] = useState(null);

  useEffect(() => {
    const callback = (entries) => {
      setIsIntersecting(entries[0].isIntersecting);
    };

    observer?.disconnect();

    if (target.current) {
      const _observer = new IntersectionObserver(callback, options);
      _observer.observe(target);
      setObserver(_observer);
    }

    return () => {
      observer?.disconnect();
    };
  }, [target.current, options.root, options.rootMargin, options.threshold]);

  return isIntersecting;
}
```


## Utilisation

Dans la première partie de cet article, nous avons parlé de *Facebook* pour introduire les *Intersection Observers*. Nous allons simuler un concurrent, que l'on appellera *Fuzebook*. Dans l'extrait de code ci-dessous, nous chargeons le fil de l'utilisateur. L'élément cible de notre *Intersection Observer* sera un paragraphe situé en bas de la page, qui contient le texte "Loading more posts...". On pourrait également utiliser une autre cible, comme un *spinner* ou le pied de page. Dans tous les cas, cet élément ne devrait pas apparaître à l'écran, car nous définissons une *root margin* de `150px`. Il pourrait éventuellement être visible si l'appel à `fetch` (de la fonction `getPosts`) prend quelques secondes, par exemple en cas de mauvaise connexion internet.

Dans notre exemple, le scroll est infini : nous n'atteindrons jamais le bas de la page étant donné que le fil contient des centaines, voire des milliers de publications. Il serait donc inutile d'avoir un pied de page par exemple, car on ne le verrait jamais. Si la section de scroll de votre application contient moins d'éléments (moins d'une centaine), vous devriez gérer le cas où il n'y plus d'éléments à charger (il suffirait de masquer l'élément cible, c'est-à-dire le paragraphe en bas de la page ou le spinner).

Voici le code du composant principal de notre application *Fuzebook*.

```jsx
const App = () => {
  const posts = useArray([]);
  const page = useCounter(1);
  const loadingElement = useRef(null);
  const isIntersecting = useInView(loadingElement, {
    threshold: 1,
    rootMargin: "150px"
  });

  // Chargement de nouveaux posts
  useEffect(() => {
    getPosts(page.value).then((newPosts) => {
      posts.concat(newPosts);
    });
  }, [page.value]);

  useEffect(() => {
    if (isIntersecting) {
      page.increment();
    }
  }, [isIntersecting]);

  return (
    <div className="App">
      <h1>Fuzebook</h1>
      <ul>
        {posts.value.map((post, i) => (
          <Card key={i} post={post} />
        ))}
      </ul>
      <p ref={loadingElement}>Loading more posts...</p>
    </div>
  );
}
```

Comme vous pouvez le voir, nous avons réutilisé 2 Hooks personnalisés que nous avons implémenté dans des articles précédents : [useArray](/blog/react-hooks-personnalises-usearray) et [useCounter](/blog/2021-10-10-react-hooks-personnalises-usecounter). Cela simplifie le code du composant `App`, aboutissant à un code bien plus propre et plus lisible. Le composant `Card` affiche une simple publication et la fonction `getPosts` (qui renvoie une promesse) récupère des publications depuis une API quelconque.


## Conclusion

Cet article clôture la série sur les Hooks personnalisés en React, durant laquelle nous avons découvert comment extraire de la logique au sein de fonctions réutilisables afin de simplifier notre code. Cela nous permet également de réutiliser de la logique commune à travers notre application sans avoir à dupliquer de code. De ce fait, nous suivons le Principe de Responsabilité Unique (ou SRP : *Simple Responsability Principle*), à la fois pour nos composants (qui se concentrent désormais uniquement sur leur responsabilité) et pour nos Hooks. J'espère que vous avez pris autant de plaisir à suivre cette série que j'en ai eu à l'écrire, et je vous donne rendez-vous dans de prochains articles. 👋

---

Code source disponible sur [CodeSandbox](https://codesandbox.io/s/custom-react-hooks-useinview-6cev5y?file=/src/App.tsx).


React Hooks Personnalisés : useInView


import Callout from "../../src/components/markdown/Callout";

Après avoir découvert le Hook [useNetworkState](/blog/react-hooks-personnalises-usenetworkstate) pour simplifier la gestion de l'état du réseau de l'utilisateur,
implémentons un nouveau Hook personnalisé : `useAudio`. Vous êtes prêts ? C'est parti. 😎

## Motivation

Tout d'abord, pourquoi aurions-nous besoin de ce Hook ? Je vais vous donner deux exemples.

Le premier est celui de mon site web personnel, [iamludal.fr](https://iamludal.fr) (non, ce n'est pas de l'autopromotion 🙄),
développé en React, et dont la barre de navigation contient un bouton permettant de changer de thème (clair ou sombre).
En fait, lorsque l'on clique sur ce dernier, on peut entendre le son d'un interrupteur se déclencher. Ce son
provient de ce Hook personnalisé.

Le second exemple est celui du jeu [Typospeed](https://typospeed.iamludal.fr)
(pas d'autopromotion non-plus, je vous assure), dans lequel un son de bulle qui éclate se fait entendre
lorsque l'on tape correctement un mot. À vrai dire, Typospeed a été développé en [Svelte](https://svelte.dev/),
mais vous voyez où je veux en venir.

Dans ces exemples, nous avons besoin de jouer des effets sonores pour donner plus de vie à notre application. Mais nous
ne voulons pas nous répéter : créer manuellement une instance de la classe `Audio`, définir son volume, sa vitesse...

```jsx
const Home = () => {
  const audio = useRef(new Audio('/switch.mp3'))

  useEffect(() => {
    audio.current.playbackRate = 1.5
    audio.current.volume = 0.8
  }, [])

  return (
    <button onClick={audio.current.play}>Play Sound</button>
  )
}
```

<Callout status={"info"}>
  Nous ne voulons pas écrire tout ça à chaque fois que l'on a besoin d'utiliser des effets sonores.
  De plus, nous devons explicitement utiliser le Hook `useRef` et sa valeur courante pour éviter que l'instance
  de la classe `Audio` ne soit recréée à chaque rendu du composant.
</Callout>

Ceci étant dit, nous avons maintenant des raisons suffisantes pour implémenter ce Hook personnalisé.
Mettons les mains dans le cambouis ! 👨🏻‍💻


## Implémentation

Comme nous venons de le voir, notre but premier est de ne pas nous répéter (et c'est le but principal
des Hooks personnalisés). De ce fait, notre fonction pourra prendre des paramètres optionnels, qui pourront
être statiques (des constantes) ou dynamiques (variables issues d'autres Hooks, tels que `useState`). Ces
paramètres correspondent aux options de l'instance de la classe `Audio`.

```js
const audio = useAudio('/switch.mp3', { volume: 0.8 })
```

Mais ce n'est pas tout : nous voulons également nous débarrasser de l'attribut `.current`. Cette logique
doit-être extraite au sein du Hook. De ce fait, nous pourrons interagir directement avec l'instance.

```js
audio.play()
audio.pause()
```

Le squelette ressemblera donc à ceci :

```js
const useAudio = (src) => {
  const audio = useRef(new Audio(src))

  return audio.current
}
```

C'est une première version, basique, de notre Hook. Si vous n'avez pas besoin d'avoir des options supplémentaires,
votre aventure peut s'arrêter ici. Mais nous allons quand même lui ajouter un autre paramètre : un objet pour
les options. Nous ferons attention à ce que le changement de chacune des propriétés de cet objet reçu en paramètre
mette à jour l'instance de la classe `Audio`. Ainsi, la vitesse et le volume pourront être mises à jour dynamiquement
depuis l'extérieur (par exemple via un autre Hook, comme `useState`).

Voici donc l'implémentation finale de notre Hook personnalisé :

```js
const useAudio = (src, { volume = 1, playbackRate = 1 }) => {
  const audio = useRef(new Audio(src))

  useEffect(() => {
    audio.current.volume = volume
  }, [volume])

  useEffect(() => {
    audio.current.playbackRate = playbackRate
  }, [playbackRate])

  return audio.current
}
```

<Callout status="info">
  Si vous avez besoin d'autres options, n'hésitez-pas à les ajouter en fonction de vos besoins.
  Par exemple, vous pourriez ajouter un nouveau paramètre optionnel à la méthode `play` : une liste à deux
  éléments, le temps de début et de fin, permettant de ne jouer qu'une partie du fichier audio. Cela peut être
  particulièrement utile lorsque vous avez un fichier audio qui contient plusieurs effets sonores à la suite
  (c'est une technique que l'on retrouve dans certains jeux).
</Callout>

Notre Hook ne demande maintenant plus qu'à être utilisé. 🤘


## Utilisation

Si l'on revient à notre exemple initial, le code peut désormais être simplifié de la façon suivante :

```js
const Home = () => {
  const audio = useAudio('/switch.mp3', { volume: 0.8, playbackRate: 1.5 })

  return (
    <button onClick={audio.play}>Play Sound</button>
  )
}
```

Nous avons réussi à abstraire toute la logique de départ dans un Hook personnalisé, ce qui aboutit à
un code plus simple, plus propre et plus lisible. De plus, il peut être réutilisé n'importe où dans notre
application, et ce, sans complexité additionnelle.


React Hooks Personnalisés : useAudio


import Callout from "../../src/components/markdown/Callout";

Après avoir implémenté le Hook [useLocalStorage](/blog/react-hooks-personnalises-uselocalstorage) pour faciliter la gestion du stockage local, implémentons le Hook `useNetworkState` pour connaître l'état du réseau de l'utilisateur (savoir s'il est connecté à internet ou non).

- [Motivation](#motivation)
- [Implémentation](#implementation)
- [Utilisation](#utilisation)
- [Conclusion](#conclusion)


## Motivation

Supposons que nous soyons en train de développer une application qui nécessite d'être connecté à internet
en permanence pour fonctionner convenablement. Si l'utilisateur se retrouve déconnecté, un message doit être
affiché, lui informant de vérifier sa connectivité. Pour ce faire, dans une application React, voici
comment nous pourrions procéder.

```jsx
const App = () => {
  const [isOnline, setIsOnline] = useState(window.navigator.onLine);

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return (
    <div>
      <h1>My Awesome App</h1>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa
        provident tenetur molestias fugiat expedita quaerat dolores dignissimos
        dicta, error amet reiciendis voluptates delectus perspiciatis dolorum
        saepe, sunt, similique vitae illo.
      </p>
      {!isOnline && (
        <div className="toast">
          You are offline. Please check your connectivity and try again.
        </div>
      )}
    </div>
  );
};
```

Ceci fonctionne parfaitement. En revanche, notre code pourrait considérablement être simplifié, notamment le
Hook `useEffect`. Notre but est donc de définir un Hook `useNetworkState` afin d'abstraire cette logique dans
un Hook séparé. Cela permettra à la fois de simplifier notre composant, mais aussi (et surtout) de pouvoir 
réutiliser cette logique à d'autres endroits de notre application sans dupliquer de code. Maintenant que nous
savons pourquoi nous avons besoin de ce Hook, passons à l'implémentation. 👨🏻‍💻


## Implémentation

Comme à notre habitude, réfléchissons d'abord à l'interface de notre Hook afin de savoir comment nous allons
l'utiliser. Dans notre cas, nous voudrions quelque chose d'aussi simple que ça :

```jsx
const isOnline = useNetworkState()
```

Ni plus, ni moins. Il nous retournerait une simple valeur booléenne qui sera mise à jour automatiquement
et convenablement pour se synchroniser avec l'état actuel de la connectivité de l'utilisateur.

Nous pouvons donc passer à l'implémentation, qui consistera tout simplement en l'extraction de la logique
que nous avons écrite précédemment au sein d'une fonction séparée. Le Hook final n'est donc pas plus
compliqué que ça :

```jsx
const useNetworkState = () => {
  const [isOnline, setIsOnline] = useBoolean(window.navigator.onLine);

  useEffect(() => {
    window.addEventListener('online', setIsOnline.on);
    window.addEventListener('offline', setIsOnline.off);

    return () => {
      window.removeEventListener('online', setIsOnline.on);
      window.removeEventListener('offline', setIsOnline.off);
    };
  }, []);

  return isOnline;
};
```

<Callout status="question">
  Euh, c'est quoi ce Hook `useBoolean` ? 🤨
</Callout>

Effectivement, il n'est pas fourni directement par React. Cependant, pour ceux qui suivraient cette série
depuis le tout début, ce Hook devrait vous rappeler quelque chose : c'est le tout premier Hook personnalisé
que nous avons implémenté ensemble !

Si vous avez découvert cette série en cours de route, pas d'inquiétude : je vous invite à lire
[cet article](/blog/react-hooks-personnalises-useboolean) pour en apprendre plus sur ce Hook.

<Callout status="info">
  Si vous ne souhaitez pas utiliser le Hook `useBoolean`, vous pouvez vous contenter d'un simple `useState`.
</Callout>

```jsx
const useNetworkState = () => {
  const [isOnline, setIsOnline] = useState(window.navigator.onLine);

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return isOnline;
};
```


## Utilisation

Si nous reprenons notre composant `App` de tout à l'heure, voici comment il peut être simplifié
grâce à notre tout nouveau Hook :

```jsx
const App = () => {
  const isOnline = useNetworkState()

  return (
    <div>
      <h1>My Awesome App</h1>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa
        provident tenetur molestias fugiat expedita quaerat dolores dignissimos
        dicta, error amet reiciendis voluptates delectus perspiciatis dolorum
        saepe, sunt, similique vitae illo.
      </p>
      {!isOnline && (
        <div className="toast">
          You are offline. Please check your connectivity and try again.
        </div>
      )}
    </div>
  );
};
```

Eh oui, je vous l'avais dit, notre code est désormais bien plus simple ! 😎


## Conclusion

Nous avons réussi à abstraire toute la logique de connectivité réseau à l'extérieur de notre composant,
qui se concentre maintenant sur ce qu'il doit réellement faire. Grâce à cela, nous suivons le principe
de séparation des préoccupations, ou Separation of Concerns en anglais (SOC). Vous trouverez plus
d'informations sur [ce lien](https://fr.wikipedia.org/wiki/S%C3%A9paration_des_pr%C3%A9occupations).
Dans le prochain article, nous allons implémenter un Hook pour utiliser plus facilement les effets
sonores : `useAudio`.

---

Code source disponible sur [CodeSandbox](https://codesandbox.io/s/custom-react-hooks-usenetworkstate-354j0?file=/src/App.tsx).


React Hooks Personnalisés : useNetworkState


import Callout from "../../src/components/markdown/Callout";

Après avoir implémenté le Hook [useArray](/blog/react-hooks-personnalises-usearray) pour faciliter la gestion des tableaux, intéressons-nous maintenant au Hook useLocalStorage pour simplifier la gestion du stockage local.

- [Motivation](#motivation)
- [Implémentation](#implementation)
- [Utilisation](#utilisation)
- [Idées d'Améliorations](#idees-dameliorations)
- [Conclusion](#conclusion)


## Motivation

Voyons d'abord pourquoi nous voudrions implémenter ce Hook. Imaginons que nous soyons en train de développer une application disposant d'une page de configuration (thème, langue, notifications). Pour sauvegarder la configuration
de l'utilisateur, nous utiliserions probablement un objet qui pourrait ressembler à ceci :

```jsx
const config = {
  theme: 'dark',
  lang: 'fr',
  notifications: true
}
```

Sur la page de configuration, l'interface devra être synchronisée avec l'objet stocké dans le 
stockage local. Cette page pourrait ressembler à cela :

![Aperçu de la page paramètres](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpr40cqmb5p2ksk69ll8.png)

Et le code source pourrait être le suivant :

```jsx
const defaultConfig = {
  theme: 'dark',
  lang: 'fr',
  notifications: true
};

const Settings = () => {
  const [config, setConfig] = useState(() => {
    const saved = localStorage.getItem('config');
    if (saved !== null) {
      return JSON.parse(saved);
    }
    return defaultConfig;
  });

  const handleChange = (e) => {
    setConfig(oldConfig => {
      const newConfig = {
        ...oldConfig,
        notifications: e.target.checked
      };

      localStorage.setItem('config', JSON.stringify(newConfig));
      return newConfig;
    })
  }

  return (
    <>
      <h1>Settings</h1>
      <label htmlFor="pushNotifications">
        Push Notifications
      </label>
      <input
        type="checkbox"
        id="pushNotifications"
        checked={config.notifications}
        onChange={handleChange}
      />
    </>
  );
};
```

Comme nous pouvons le constater, cela fait déjà pas mal de code pour seulement activer ou désactiver les
notifications. De plus, nous devons nous-même gérer la synchronisation entre l'état de la configuration et le
stockage local, ce qui est plutôt encombrant. Un léger manque d'attention pourrait aboutir à une 
désynchronisation entre ces 2 parties.

Grâce à notre nouveau Hook `useLocalStorage`, nous allons abstraire de la logique générique dans une fonction
séparée afin de réduire la quantité de code nécessaire à cette simple fonctionnalité. De plus, nous n'aurons plus
à nous occuper de la synchronisation : c'est le Hook lui-même qui s'en chargera.


## Implémentation

Commençons par parler de la signature de ce Hook (quels sont ses paramètres et sa valeur de retour). L'API
`localStorage` nous permet de stocker des données sous forme de clé-valeur.

```jsx
// Récupération de la valeur associée à la clé 'config'
const rawConfig = localStorage.getItem('config');

// Conversion de la configuration brute en objet
const config = JSON.parse(rawConfig);

// Sauvegarde de la configuration
localStorage.setItem('config', JSON.stringify(config));
```

De ce fait, on s'imagine utiliser le Hook de la façon suivante :

```jsx
const [config, setConfig] = useLocalStorage('config');
```

Il va ainsi définir notre variable `config` à la valeur qu'il trouve dans le stockage local pour
la clé `'config'`. Si aucune entrée ne correspond à cette clé, `config` vaudra `null`.

Nous pourrions également avoir la possibilité de définir une valeur par défaut si la clé donnée n'est
pas trouvée. Pour ce faire, il suffit de changer légèrement la signature du Hook pour autoriser un nouveau
paramètre optionnel : la valeur par défaut.

```jsx
const [config, setConfig] = useLocalStorage('config', defaultConfig);
```

Nous sommes désormais prêts à implémenter ce Hook. 😎

En premier lieu, nous allons lire dans le stockage local la valeur associée au paramètre `key`. Si cette clé
n'existe pas, nous renverrons alors la valeur par défaut.

```jsx
const useLocalStorage = (key, defaultValue = null) => {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    if (saved !== null) {
      return JSON.parse(saved);
    }
    return defaultValue;
  });
};
```

Nous venons de passer la première étape de l'implémentation. Attention cependant à gérer le cas où la méthode
`JSON.parse` lèverait une exception en renvoyant la valeur par défaut.

```jsx
const useLocalStorage = (key, defaultValue = null) => {
  const [value, setValue] = useState(() => {
      const saved = localStorage.getItem(key);
      if (saved !== null) {
        try {
          return JSON.parse(saved);
        } catch {
          return defaultValue;
        }
      }
      return defaultValue;
  });
};
```

Voilà qui est mieux. Il ne nous reste plus qu'à écouter les changements de la variable `value` pour mettre à jour
en conséquence le stockage local. Pour ce faire, nous allons utiliser le Hook `useEffect`.

```jsx
const useLocalStorage = (key, defaultValue = null) => {
  const [value, setValue] = useState(/* ... */);

  useEffect(() => {
    const rawValue = JSON.stringify(value);
    localStorage.setItem(key, rawValue);
  }, [value]);
};
```

<Callout status={'warning'}>
  La méthode `JSON.stringify` peut également lancer des erreurs.
</Callout>

Ça y est, on a fini ? Pas vraiment. Tout d'abord, nous n'avons pas retourné `value` ni son setter.

```jsx
const useLocalStorage = (key, defaultValue = null) => {
  const [value, setValue] = useState(/* ... */);

  useEffect(/* ... */);

  return [value, setValue];
};
```

De plus, n'oublions pas que la valeur du paramètre `key` peut également changer. Dans notre exemple, la clé
fournie est une constante, mais cela aurait très bien pu être une valeur issue d'un appel à `useState`, auquel cas cette
dernière peut varier. Corrigeons ce petit problème.

```jsx
const useLocalStorage = (key, defaultValue = null) => {
  const [value, setValue] = useState(/* ... */);
  const [oldKey, setOldKey] = useState(key)

  useEffect(() => {
    const rawValue = JSON.stringify(value);
    localStorage.setItem(key, rawValue);
    localStorage.removeItem(oldKey);
    setOldKey(key);
  }, [key, value]);

  return [value, setValue];
};
```

<Callout status="info">
  Nous faisons attention à supprimer du stockage local la clé précédente et sa valeur associée afin de ne pas le surcharger.
</Callout>

Nous en avons maintenant terminé avec l'implémentation. Vous avez cependant toujours la possibilité de l'adapter
à vos besoins. Par exemple, si vous souhaitez plutôt utiliser le stockage de session, il suffit de remplacer
`localStorage` par `sessionStorage`. On pourrait également ajouter une méthode `clear` pour supprimer la clé du
stockage ainsi que sa valeur. En bref, les possibilités sont infinies, et je vous donne des idées d'améliorations
dans quelques instants.


## Utilisation

Nous pouvons maintenant simplifier notre page de configuration en utilisant notre tout nouveau Hook. Désormais,
nous n'avons plus à gérer la synchronisation. Voici le résultat final.

```jsx
const defaultConfig = {
  theme: "light",
  lang: "fr",
  notifications: true
};

const Settings = () => {
  const [config, setConfig] = useLocalStorage("config", defaultConfig);

  const handleChange = (e) => {
    setConfig(oldConfig => ({
      ...oldConfig,
      notifications: e.target.checked
    }));
  };

  return (
    <>
      <h1>Settings</h1>

      <label htmlFor="pushNotifications">Push Notifications</label>
      <input
        type="checkbox"
        id="pushNotifications"
        checked={config.notifications}
        onChange={handleChange}
      />
    </>
  );
};
```

## Idées d'Améliorations

- Gérer les éventuelles erreurs lancées par `JSON.stringify`
- Si la valeur devient `null`, nettoyer le stockage local associé à cette clé (via `localStorage.removeItem`)
- Créer un Hook générique `useStorage` qui prend en paramètre le stockage à utiliser (`localStorage` ou `sessionStorage`)


## Conclusion

Une fois de plus, nous avons radicalement simplifié notre code en définissant un Hook personnalisé. Cependant,
notre implémentation n'est pas limitée à ce que nous avons actuellement : nous pouvons la personnaliser en fonction
de nos besoins afin d'en tirer un maximum de profit. Dans le prochain épisode, nous allons nous intéresser à un
autre Hook particulièrement utile : `useNetworkState`.

---

Code source disponible sur [CodeSandbox](https://codesandbox.io/s/red-grass-0pdve?file=/src/App.tsx).


React Hooks Personnalisés : useLocalStorage


Nouvelle semaine, nouveau Hook à ajouter à notre collection. Dans cet épisode, nous allons implémenter le Hook useArray pour simplifier la manipulation des tableaux en React. Vous êtes prêts ? C'est parti ! 😎

- [Motivation](#motivation)
- [Implémentation](#implementation)
- [Utilisation](utilisation)
- [Idées d'Améliorations](#idees-dameliorations)
- [Conclusion](#conclusion)


## Motivation

Comme à notre habitude, commençons par découvrir comment ce Hook pourra nous être utile. Pour cela, soyons
originaux et prenons l'exemple d'une application To-Do list en React. Nous aurons besoin de gérer
les tâches que l'utilisateur va ajouter et supprimer. Nous allons donc utiliser un tableau, et ce, à
l'aide du Hook `useState`. La fonction `addTask` pourrait ressembler à ceci :


```jsx
const addTask = (newTask) => {
  setTasks(oldTasks => [...oldTasks, newTasks])
}
```

Ensuite, nous aurons besoin d'une fonction `removeTask`, qui pourrait quant à elle ressembler à cela :

```jsx
const removeTask = (index) => {
  setTasks(oldTasks => oldTasks.filter((_, i) => i !== index))
}
```

Comme vous pouvez le constater, cela peut très vite devenir difficile à lire. Nous allons donc créer
notre propre Hook `useArray` pour extraire cette logique au sein d'une fonction réutilisable, et ce,
afin de simplifier notre code.


## Implémentation

Tout d'abord, créons le squelette de notre Hook.

```jsx
const useArray = (initialValue = []) => {
  const [value, setValue] = useState(initialValue)

  return { value, setValue }
}
```

Nous allons maintenant y créer une fonction `push` pour ajouter un élément à la fin de notre tableau.

```jsx
const push = element => {
  setValue(oldValue => [...oldValue, element]);
};
```

Créons également la fonction `remove` pour supprimer un élément à un indice donné.

```jsx
const remove = index => {
  setValue(oldValue => oldValue.filter((_, i) => i !== index));
};
```

Il pourrait également être utile de disposer d'une fonction `isEmpty` pour vérifier la vacuité du tableau.

```jsx
  const isEmpty = () => value.length === 0;
```

En combinant toutes ces fonctions, nous obtenons notre Hook final.

```jsx
const useArray = (initialValue = []) => {
  const [value, setValue] = useState(initialValue);

  const push = element => {
    setValue(oldValue => [...oldValue, element]);
  };

  const remove = index => {
    setValue(oldValue => oldValue.filter((_, i) => i !== index));
  };

  const isEmpty = () => value.length === 0;

  return { value, setValue, push, remove, isEmpty };
};
```

Si vous manipulez de grandes quantités de données, n'hésitez-pas à optimiser ce Hook en utilisant 
`useCallback` (plus d'informations [ici](https://blogs.infinitesquare.com/posts/web/presentation-du-hook-usecallback)).

> Exemple :
> ```jsx
> const push = useCallback(element => {
>   setValue(oldValue => [...oldValue, element])
> }, [])
> ```

N'hésitez-pas non plus à ajouter d'autres fonctions (comme `map` ou `unshift`) si vous en avez besoin.
De manière générale, n'hésitez-pas à adapter ce Hook en fonctions de vos besoins : c'est le vôtre ! 😉


## Utilisation

Revenons à notre exemple de To-Do list. En utilisant notre tout nouveau Hook, voici à quoi pourrait
ressembler notre composant principal :

```jsx
const TodoList = () => {
  const tasks = useArray([]);
  const [newTask, setNewTask] = useState("");

  // "Add" button clicked
  const handleSubmit = e => {
    e.preventDefault();
    tasks.push(newTask);
    setNewTask("");
  };

  const handleInputChange = e => setNewTask(e.target.value);

  return (
    <>
      <h1>Todo List</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" value={newTask} onChange={handleInputChange} />
        <button>Add</button>
      </form>
      {tasks.isEmpty() ? (
        <p>No tasks to display</p>
      ) : (
        <ul>
          {tasks.value.map((task, index) => (
            <li key={index}>
              <input
                type="checkbox"
                onClick={() => tasks.remove(index)}
                checked={false}
              />
              {task}
            </li>
          ))}
        </ul>
      )}
    </>
  );
};
```

À noter que nous n'avons même plus besoin de définir des fonctions `addTask` et `removeTask` : nos méthodes
`tasks.push` et `tasks.remove` sont déjà assez explicites.


## Idées d'Améliorations

Pour aller plus loin, voici quelques idées d'améliorations pour enrichir ce Hook.

- Ajouter une fonction `reverse` pour retourner le tableau
- Ajouter une fonction `sort` pour trier le tableau
- Ajouter une fonction `clear` pour vider le tableau


## Conclusion

Une fois de plus, nous avons vu en quoi les Hooks personnalisés pouvaient être utiles : notre
code final est plus simple, plus propre et toute la logique redondante est extraite dans une fonction
à part. J'espère que ce Hook vous sera utile au sein de vos projets, et je vous dis à bientôt pour un nouveau
Hook personnalisé. 👋

---

Code source disponible sur [CodeSandbox](https://codesandbox.io/s/custom-react-hooks-usearray-fi13z?file=/src/App.js).


React Hooks Personnalisés : useArray


import Callout from "../../src/components/markdown/Callout";

Vous savez peut-être déjà comment ajouter un README à votre profil GitHub (si ce n'est pas le cas, je vous
invite à jeter un œil à [cet article](/blog/personnaliser-profil-github)), mais saviez-vous qu'il est également possible d'en ajouter un au profil d'une organisation ? 🤔

Pour ce faire, rendez-vous simplement sur l'organisation que vous souhaitez personnaliser et créez un nouveau
dépôt, que vous nommerez `.github`.

![GitHub dépôt spécial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nruc4qll5iyaytrlmm0k.png)

Comme vous pouvez le constater, GitHub nous informe que l'on a découvert un dépôt spécial (une fois de plus 😛).

<Callout status={'warning'}>
  Attention à ce que le dépôt soit bien en **public**.
</Callout>

Il ne vous reste plus qu'à créer un fichier `profile/README.md` au sein de ce dépôt.

![Édition du fichier README.md](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivnsybnfd8zts2hk9bsz.png)

Constatez enfin le résultat final sur la page d'accueil de l'organisation.

![Résultat final](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amfrvl9oyomdrhv26ap8.png)

---

## Références

- [Customizing your organization's profile - GitHub Docs][link]

[link]: https://docs.github.com/en/organizations/collaborating-with-groups-in-organizations/customizing-your-organizations-profile



Ajouter un README à une organisation GitHub : c'est possible !


import Callout from "../../src/components/markdown/Callout";

Dans le dernier épisode de la série sur les Hooks personnalisés, nous avons implémenté le Hook [useBoolean](/blog/react-hooks-personnalises-useboolean). Aujourd'hui, nous allons en créer un tout aussi simple et efficace : useCounter.
Comme son nom l'indique, il va nous faciliter la manipulation de l'état d'un compteur. Vous êtes prêts ? Allons-y. 🚀

## Motivation

Comme toujours, voyons d'abord pourquoi nous voudrions implémenter ce Hook. Imaginons que nous développons un site web
d'e-commerce. Lorsqu'un client souhaite acheter un produit sur notre site, il doit également pouvoir sélectionner la quantité. L'interface pourrait donc ressembler à celle ci-dessous (ne faisons pas attention au style).

![UI](https://cdn.hashnode.com/res/hashnode/image/upload/v1633869919339/RLNAmwg8y.png)

Et le code source du composant `Cart` ressemblerait à cela :

```jsx
const Cart = () => {
  const [quantity, setQuantity] = useState(0);

  return (
    <div className="Cart">
      <h1>My Cart</h1>
      <Item
        label="My awesome item"
        quantity={quantity}
        onIncrement={() => setQuantity((q) => q + 1)}
        onDecrement={() => setQuantity((q) => q - 1)}
        onReset={() => setQuantity(0)}
      />
    </div>
  );
}
```

<Callout status={'info'}>
  Bien sûr, cet exemple est extrêmement simplifié afin de se concentrer sur ce qui nous intéresse le plus dans cet article.
</Callout>

Le composant ci-dessus pourrait être simplifié en se débarrassant de ces horribles fonctions fléchées. De plus, comme
nous allons très probablement réutiliser cette logique dans d'autres parties de notre application, nous devrions
l'extraire dans un Hook séparé pour éviter la duplication de code. C'est pour cela que nous allons créer le Hook
`useCounter`. Passons maintenant à l'implémentation. 😎


## Implémentation

Notre Hook aura donc un état pour contenir la valeur du compteur. Il disposera également de 3 méthodes pour mettre sa
valeur à jour : `increment`, `decrement` et `reset`. Dans cette optique, nous pouvons créer notre Hook de la façon
suivante :

```jsx
const useCounter = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const increment = () => setValue(c => c + 1);
  const decrement = () => setValue(c => c - 1);
  const reset = () => setValue(initialValue);

  return { value, increment, decrement, reset };
};
```

Certains d'entre vous se demanderont peut-être pourquoi les 3 méthodes exportées ne sont pas encapsulées dans un appel
à `useCallback`, qui permettrait de ne pas les récréer à chaque nouveau rendu du composant. Dans notre cas, le composant est
si simple qu'utiliser le Hook `useCallback` 3 fois pour améliorer les performances pourrait avoir l'effet inverse. Ce Hook devrait
plutôt être utilisé si vous savez que le Hook que vous développez sera utilisé dans des composants plus complexes et avec
de grandes quantités de données.

<Callout status="info">
  Pour plus d'informations, n'hésitez-pas à jeter un œil à [cet article](https://dmitripavlutin.com/dont-overuse-react-usecallback)
  de [Dmitri Pavlutin](https://dmitripavlutin.com/), qui explique en détail pourquoi, quand et comment utiliser le Hook
  `useCallback`. Cela s'applique également aux Hooks `useMemo` et `useRef`.
</Callout>

Ceci étant dit, notre nouveau Hook personnalisé est désormais prêt à être utilisé ! 🥳


## Utilisation

Revenons à notre exemple de site web d'e-commerce. Maintenant que nous avons à notre disposition un tout nouveau Hook
personnalisé, voici comment le code du composant `Cart` peut être simplifié :

```jsx
function Cart() {
  const quantity = useCounter(0);

  return (
    <div className="Cart">
      <h1>My Cart</h1>
      <Item
        label="My awesome item"
        quantity={quantity.value}
        onIncrement={quantity.increment}
        onDecrement={quantity.decrement}
        onReset={quantity.reset}
      />
    </div>
  );
}
```

Nous nous sommes débarrassés de toutes les fonctions fléchées, ce qui nous donne un code plus propre et
plus facile à lire.


## Idées d'Améliorations

Pour aller plus loin, voici quelques idées pour améliorer le Hook `useCounter`. N'hésitez-pas à essayer d'en implémenter
une ou plusieurs afin de pratiquer de votre côté.

- Ajouter un pas d'incrémentation et de décrémentation : `counter.increment(step)`
- Définir une valeur minimale et une valeur maximale : `useCounter({ min: 0, max: 10, initial: 0 })`
- Définir manuellement la valeur du compteur : `counter.set(value)`


## Conclusion

Avec ce tout nouveau Hook, nous avons désormais une corde de plus à notre arc. Les Hooks que nous avons créés jusqu'à
maintenant étaient très simples (certains les considèreront même comme superflus). Dans les prochains articles de cette
série, nous commencerons à implémenter des Hooks un peu plus complexes pour réellement nous aider à simplifier nos
composants et à éviter la duplication de code.

---

Code source disponible sur [CodeSandbox](https://codesandbox.io/s/custom-react-hooks-usecounter-5w9gk?file=/src/hooks/useCounter.ts)


React Hooks Personnalisés : useCounter


import Callout from "../../src/components/markdown/Callout";

Arrivés avec React 16.8, les Hooks permettent de bénéficier d’un état local et d’autres fonctionnalités sans avoir à passer par une classe.
Ils nous donnent entre autres la possibilité de se brancher aux cycles de vie de nos composants, comme nous le faisions
à l'aide des méthodes `componentDidMount` ou `componentWillUnmount`.

Dans cette série d'articles, nous allons découvrir comment implémenter nos propres Hooks personnalisés à partir des Hooks primitifs fournis par React. Cela permettra notamment de réduire la complexité cognitive de nos composants en extrayant de la logique au sein de fonctions
dédiées, qui pourront être réutilisées à travers le projet. Le code résultant sera plus simple, et nous respecterons
le principe de responsabilité unique, plus communément appelé Single Responsability Principle (SRP), qui stipule que
chaque classe ou fonction ne doit avoir la responsabilité que d'une seule partie d'une fonctionnalité d'un programme,
et doit encapsuler cette partie.

Assez parlé, mettons-nous au travail et implémentions notre premier Hook personnalisé : `useBoolean`. 😎


## Motivation

Tout d'abord, demandons-nous pourquoi nous voudrions implémenter ce Hook. Pour cela, imaginons le
composant suivant :

```jsx
const Spoil = ({ content }) => {
  const [spoilVisible, setSpoilVisible] = useState(false);

  return (
    <div className="spoil">
      <button onClick={() => setSpoilVisible(visible => !visible)}>
        {spoilVisible ? "Hide" : "Show"}
      </button>
      {spoilVisible && <div className="spoil-content">{content}</div>}
    </div>
  );
};
```

Ce composant reçoit une prop `content`, un contenu quelconque, qui n'est affiché que lorsque l'utilisateur clique sur le
bouton. S'il clique à nouveau sur ce bouton, le contenu est alors masqué, et ainsi de suite.

Le composant est si simple qu'il n'est pas spécialement difficile à lire, mais nous pourrions améliorer tout
de même sa lisibilité en extrayant la fonction d'écoute `onClick` dans une fonction séparée.

```jsx
const Spoil = ({ content }) => {
  const [showSpoil, setShowSpoil] = useState(false);

  const toggle = () => setShowSpoil((visible) => !visible)

  return (
    <div className="spoil">
      <button onClick={toggle}>
        {showSpoil ? "Hide" : "Show"}
      </button>
      {showSpoil && <div className="spoil-content">{content}</div>}
    </div>
  );
};
```

C'est mieux, mais nous venons d'ajouter une ligne supplémentaire. Dans notre cas, c'est loin d'être un problème,
mais si nous travaillons avec des composants plus complexes, cela pourrait très vite aboutir à des déclarations
redondantes de fonctions.

Notre composant pourrait être encore plus simplifié si nous avions à notre disposition un Hook `useBoolean`, qui
s'utiliserait de la manière suivante :

```jsx
const Spoil = ({ content }) => {
  const [showSpoil, setShowSpoil] = useBoolean(false);

  return (
    <div className="spoil">
      <button onClick={setShowSpoil.toggle}>
        {showSpoil ? "Hide" : "Show"}
      </button>
      {showSpoil && <div className="spoil-content">{content}</div>}
    </div>
  );
};
```

Vous voyez ? Nous n'avons ajouté aucune fonction supplémentaire et la fonction d'écoute `onClick` est bien
plus facile à lire. C'est là tout l'intérêt d'utiliser des Hooks personnalisés. Nous pouvons maintenant
passer à l'implémentation de ce Hook en particulier. 👨🏻‍💻


## Implémentation

Commençons par définir le squelette de notre Hook. Pour cela, on utilise `useState` pour initialiser
notre variable et son setter.

```jsx
const useBoolean = (initialValue) => {
	const [value, setValue] = useState(initialValue)

	return [value, setValue]
}
```

<Callout status={'warning'}>
  **Attention :** étant donné que cette fonction (ce Hook) utilise `useState`, elle ne pourra être utilisée qu'au sein de composants React.
</Callout>

Pour l'instant, nous n'avons fait que définir un alias pour le Hook `useState`. Pas très intéressant. 😅

C'est à partir de maintenant que les choses deviennent intéressantes. Au lieu de retourner la fonction `setValue`, nous allons
retourner un objet composé des 3 méthodes suivantes :

- `toggle()` pour inverser la valeur
- `on()` pour définir la valeur à `true`
- `off()` pour définir la valeur à `false` 

Voici à quoi ressemble désormais notre Hook :

```jsx
const useBoolean = (initialValue) => {
	const [value, setValue] = useState(initialValue)

	const updateValue = useRef({
		toggle: () => setValue(oldValue => !oldValue),
		on: () => setValue(true),
		off: () => setValue(false)
	})

	return [value, updateValue.current]
}
```

<Callout status="info">
  Nous avons encapsulé l'objet dans le Hook `useRef` pour empêcher React de le récréer à chaque nouveau
  rendu du composant appelant. Pour plus d'informations, n'hésitez-pas à consulter la
  [documentation officielle](https://fr.reactjs.org/docs/hooks-reference.html#useref).
</Callout>

Et voilà, vous venez de créer votre tout premier Hook personnalisé, félicitations ! 🥳


## Utilisation

Il ne nous reste plus qu'à utiliser notre Hook nouvellement créé. Pour cela, on l'appelle de la même manière que 
l'on appellerait `useState`, et on utilise les méthodes qui nous sont renvoyées dans l'objet de retour.

```jsx
const Articles = () => {
  const [articles, setArticles] = useState([])
  const [isLoading, setIsLoading] = useBoolean(false)
  const [isError, setIsError] = useBoolean(false)

  useEffect(() => {
    setIsLoading.on()
    fetch(someApiEndpoint)
			.then(res => res.json())
			.then(setArticles)
			.catch(setIsError.on)
			.finally(setIsLoading.off)
  }, [])

	return // ...
}
```

<Callout status={'warning'}>
  **Attention :** on ne peut plus utiliser `setIsLoading(true)` car nous n'exportons plus une fonction, mais un objet.
</Callout>

Constatez par vous-même que le code ci-dessus est incroyablement facile à lire. 😎


## Conclusion

Nous avons découvert comment abstraire de la logique de nos composants afin de les rendre plus simples et plus
faciles à lire. C'est la force principale des Hooks personnalisés. Dans le prochain article, nous implémenterons
un autre Hook qui aura également son utilité : `useCounter`.

---

## Références

- https://fr.reactjs.org/docs/hooks-intro.html
- https://fr.wikipedia.org/wiki/Principe_de_responsabilité_unique


React Hooks Personnalisés : useBoolean


import Callout from "../../src/components/markdown/Callout";

Après avoir parcouru de nombreux profils GitHub, j'ai remarqué que la plupart d'entre eux ne sont pas très attrayants. Dans cet article, je vais vous donner quelques conseils pour améliorer le vôtre.

En septembre 2020, [GitHub](https://github.com) comptait plus de **58 millions** d'utilisateurs. Pour sortir du lot, votre profil doit être unique et refléter votre identité.

Voici les raisons pour lesquelles votre profil GitHub pourrait être ennuyeux.


## Raison #1 : Vous N'avez Pas De Photo De Profil

On commence avec la raison la plus simple et la plus évidente, mais vous devez avoir une photo de profil. Que cela soit
une photo de vous, un avatar à votre image ou même un logo, elle doit refléter votre identité d'une manière ou d'une autre.
Les autres utilisateurs doivent pouvoir être capables de reconnaître votre profil d'un coup d'œil grâce à votre photo de
profil.

Voici l'une des photos de profil par défaut de GitHub.

![Exemple de photo de profil GitHub par défaut](https://cdn-images-1.medium.com/max/1000/1*P0hlfc1JnHRRSdayQcAIhg.png)

> Pas du tout attirant... 🤮

Comme vous l'avez peut-être remarqué, ma photo de profil est un [memoji](https://support.apple.com/fr-ca/HT208986). Il est donc
à peu près unique et reflète ma propre identité.

![Ma photo de profil](https://i.imgur.com/q4Rdj5I.png)

Je vous encourage réellement à trouver une photo de profil qui vous plaît, et qui rendra également votre profil unique.


## Raison #2 : Votre Profil Est Incomplet

GitHub, tout comme les autres réseaux sociaux, vous permet de remplir des informations sur vous. Cela ne signifie pas que
vous devez partager votre numéro de téléphone ni même votre adresse, mais une fois de plus, vous devez faire ressortir votre
identité.

Que pouvez-vous partager sur votre profil ?

- Une courte description
- L'entreprise dans laquelle vous travaillez
- Un lien vers votre site web
- Votre nom d'utilisateur Twitter

<Callout status="info">
  Plus vous fournirez d'informations, mieux ce sera.
</Callout>

Maintenant, si vous pensez que certains de ces points sont personnels, je suis tout à fait d'accord avec vous, et vous ne devez pas nécessairement tous les remplir.

Cependant, quand les autres utilisateurs navigueront sur votre profil, ils doivent être en mesure de connaître les principaux éléments vous concernant. Votre profil doit mettre en évidence ce qui vous intéresse, certains de vos projets récents, éventuellement un lien vers votre site web personnel (ou si vous n'en avez pas, vers votre profil LinkedIn).

<Callout status="info">
  N'hésitez pas non plus à inclure des emojis dans votre biographie. De cette façon, votre présentation attirera l'attention des utilisateurs en créant des points d'ancrage. Attention cependant à ne pas en abuser.
</Callout>

Nous pouvons considérer ma description, mais aussi certaines autres qui ont retenu mon attention.

![Quelques exemples de biographies](https://miro.medium.com/max/875/1*KS4cxsqIQnuzG3e78l2rOQ.png)

Votre profil commence à s'embellir, **félicitations** ! 🎉


## Raison #3 : Vous N'avez Pas De Présentation De Profil

<Callout status="question">
  Euh, Ludal, on vient juste d'ajouter une présentation de profil dans la partie précédente, qu'est-ce que tu racontes ? 🤨
</Callout>

Oui, certes. Mais comme vous l'avez peut-être constaté, la longueur maximale de la description est assez courte : 160 caractères.

C'est pour cette raison qu'en juillet 2020, GitHub a secrètement publié une nouvelle fonctionnalité : les READMEs de profil.

Cela vous permet d'ajouter une présentation entièrement détaillée à votre page de profil, en utilisant la syntaxe
[Markdown](https://fr.wikipedia.org/wiki/Markdown). C'est l'endroit idéal pour détailler les technologies que vous utilisez, les projets sur lesquels vous travaillez actuellement, des informations de contact supplémentaires, etc.

Voici à quoi cela peut ressembler :

![Exemple de README](https://miro.medium.com/max/875/1*iCDuKOlaKuvLxgf2Z37mxA.png)

Cette astuce donne vraiment un incroyable boost à votre profil, le rendant encore plus différent et personnel.

<Callout status="question">
  Alors, comment faire pour ajouter cela à notre profil ? 🤔
</Callout>

À vrai dire, les étapes sont ridiculement faciles : il suffit de se rendre sur [GitHub](https://github.com), et de créer un nouveau dépôt portant le même nom que votre nom d'utilisateur.

![Dépôt spécial découvert](https://miro.medium.com/max/875/1*0qBY5IJRvOorJq1QOmcjgA.png)

Comme vous pouvez le voir, ce petit paragraphe arrive, vous informant que vous venez de découvrir un **dépôt spécial** ! 😎

À partir de là, il ne vous reste plus qu'à créer un fichier nommé `README.md` à la racine de ce dépôt et d'ajouter tout ce que vous souhaitez que les gens sachent sur vous (en utilisant la syntaxe Markdown bien sûr).

Voici quelques conseils (subjectifs) pour une présentation de profil géniale :

1. **Ajoutez des emojis**, mais sans en abuser.
2. **Structurez-la**, avec des titres, et pourquoi pas des sous-titres.
3. **Ajoutez des GIFs ou des images** (sans en abuser non plus).
4. **Ajoutez des éléments spéciaux**, comme vos [statistiques](https://github.com/anuraghazra/github-readme-stats) ou des [icônes](https://devicon.dev/).
5. **Restez cohérent** (par exemple, si vous décidez d'inclure un emoji dans un titre, faites-le pour chacun d'entre eux).


Mais que faire si vous n'êtes pas inspiré ? J'ai la solution : il existe de très bons dépôts, comme [celui-ci](https://github.com/elangosundar/awesome-README-templates) ou [celui-là](https://github.com/kautukkundan/Awesome-Profile-README-templates), qui contiennent des modèles réalisés par d'autres personnes, et que vous pouvez télécharger et réutiliser librement. Il vous suffit ensuite de modifier leur contenu.

<Callout status="info">
  **Conseil** : n'hésitez pas à parcourir plusieurs modèles et à prendre les parties qui vous plaisent dans chacun d'entre
  eux. Il vous suffira ensuite de fusionner ces parties pour obtenir votre propre et unique présentation !
</Callout>

De plus, si vous n'êtes pas du tout familier avec la syntaxe Markdown, vous pouvez utiliser [cette fiche](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) pour une référence complète, ou même des sites web tels que [Profilinator](https://profilinator.rishav.dev/) qui vous permettent de générer des présentations de qualité sans avoir à écrire une seule ligne de Markdown.

![Capture d'écran de Profilinator](https://miro.medium.com/max/875/1*VoTOuZc4iyf3n4valfEV8w.png)


## Raison #4 : Vous N'interagissez Pas Avec Les Autres

GitHub est en soi une sorte de réseau social, puisqu'il vous permet de suivre des personnes, de star ("liker") leurs projets, etc.

C'est pourquoi vous devez montrer aux autres que vous existez !

![Sheldon GIF](https://media.giphy.com/media/ieebdd3BJxd3aqPc5p/giphy.gif)

Pour ce faire, il vous suffit de suivre d'autres utilisateurs et de star leurs projets. Aussi simple que ça.

Bien sûr, likez des projets qui vous intéressent, ne likez pas des centaines de projets juste pour dire de les liker. Il en va de même pour les personnes que vous allez suivre.

Et comme vous avez maintenant un profil génial, avec (j'en suis sûr) de merveilleux projets, il se peut qu'ils vous suivent en retour ou qu'ils likent un ou plusieurs de vos projets.


## Raison #5 : Vous N'avez Pas De Projets Épinglés

Dernière astuce : vous pouvez épingler jusqu'à 6 projets, qui seront affichés directement sur votre profil public.

Comment faire ? Une fois de plus, c'est très simple. Rendez-vous sur votre profil public (`github.com/votre-pseudo`) et cherchez la section *"Pinned"*. À partir de là, cliquez simplement sur le bouton *“Customize your pins”* à droite de cette section et sélectionnez vos projets les plus pertinents.

Personnellement, je recommande d'épingler un nombre pair de projets afin que l'affichage soit symétrique, ce qui est plus beau que d'avoir un espace vide lorsqu'on épingle un nombre impair de projets.

Et voici le résultat :

![Dépôts épinglés](https://miro.medium.com/max/875/1*Z_JKOmoAMRP9cKCckudKdQ.png)


## Conclusion

Maintenant que vous avez appliqué toutes les étapes ci-dessus, voici à quoi pourrait ressembler le résultat final :

![Résultat final](/images/articles/github-profile-iamludal.webp)

Vous avez désormais un profil qui sort de la masse, et surtout qui est unique, car il reflète votre propre identité. 🎉

---

## Références

- Nombre d'utilisateurs de GitHub (septembre 2020) : [GitHub - Wikipédia](https://en.wikipedia.org/wiki/GitHub)


.css-b3pn3b{display:inline-block;position:relative;}Mes Articles.css-1c50u9e{display:block;position:absolute;background:var(--chakra-colors-gray-200);width:100%;height:1px;bottom:calc(var(--chakra-space-2) * -1);}

Mes Articles