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](https://blog.iamludal.fr/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 😛).

> ⚠️ Attention à ce que le dépôt soit bien en **public**.

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

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

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, dans le but 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]);
};
```

Ajoutons également la fonction `remove` pour supprimer l'élément à l'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 sur [cet article](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 fonction de *vos* besoins, car 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

Dans le dernier épisode de la série sur les Hooks personnalisés, nous avons implémenté le Hook
[useBoolean](https://blog.iamludal.fr/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>
  );
}
```

> Bien sûr, cet exemple est extrêmement simplifié afin de se concentrer sur ce qui nous intéresse le plus dans cet article.

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.

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

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)


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

Références