1. Présentation des propriétés calculées

Avant de développer un Hook personnalisé, nous allons d’abord prendre le temps de savoir à quoi bon cela pourrait nous servir. Pour commencer, je souhaite vous parler des propriétés calculées. Vous vous demandez sûrement ce que ça peut bien être.

En fait, il arrive que les données présentes dans notre composants méritent un petit traitement avant d’être affiché tel quel dans le DOM. Par exemple, la date de création de nos pokémons. Voici ce que nous affichons à nos utilisateurs :

Comme vous pouvez le constater, l’affichage des dates n’est pas très pertinent. En tant qu’utilisateur, on préfère avoir une date plus lisible, au format « jj/mm/aaaa ». Il y a donc un traitement à faire entre la donnée présente dans notre composant, et la donnée finalement afficher à l’utilisateur. Ce traitement se fera au sein d’une propriété calculée, qui n’est rien d’autre qu’une fonction au sein de notre composant :

Une propriété calculée, ou « computed property », permet d’affiner les données affichées à l’utilisateur.

En vert, nous avons un composant avec une propriété date. Ensuite, en orange, notre propriété calculée effectue un traitement sur la donnée brute du composant, et transmet cette donnée transformer au DOM virtuel, en violet. La date qui est finalement affichée à l’utilisateur apparaît dans un format plus agréable pour lui.

Nous allons donc tout de suite voir comment ajouter une propriété calculée à notre composant PokemonCard, afin d’afficher la date de création de nos pokémons de manière plus sympathique.