Une introduction à SWR : React Hooks pour la récupération de données à distance

SWR est une bibliothèque légère créée par Vercel (anciennement ZEIT) qui permet de récupérer, de mettre en cache ou de récupérer des données en temps réel à l'aide de React Hooks. Il est construit avec React Suspense qui permet à vos composants «d'attendre» quelque chose avant de pouvoir effectuer un rendu, y compris des données. SWR est également livré avec d'excellentes fonctionnalités telles que la récupération dépendante, la concentration sur la revalidation, la récupération de la position de défilement, etc. C'est également un outil très puissant car il est indépendant du backend et prend bien en charge TypeScript. C'est un package promis à un bel avenir.

Pourquoi devriez-vous vous en soucier? Vous devez vous en soucier si vous recherchez une bibliothèque qui non seulement récupère les données des API, mais permet également de faire des choses comme la mise en cache et la récupération dépendante. Ce qui sera couvert dans ce didacticiel sera utile lors de la création d'applications React avec de nombreuses pièces mobiles. On s'attend à ce que vous ayez utilisé Axios et l'API Fetch, même si nous comparerons en quoi ils diffèrent de SWR, nous n'entrerons pas dans les détails sur la façon dont ils seront implémentés.

Dans ce guide, je vais vous présenter React Hooks pour la récupération de données à distance en créant une application Pokedex qui demande des données à l'API Pokemon. Nous allons également plonger dans d'autres fonctionnalités fournies avec SWR, et souligner ses différences par rapport aux solutions populaires telles que l'API Fetch et la bibliothèque Axios et vous donner les raisons pour lesquelles utiliser cette bibliothèque et pourquoi vous devriez garder un œil sur SWR.

Alors, commençons par répondre à une question fondamentale : qu'est-ce que le SWR ?

Qu'est-ce que SWR ?

SWR est un sigle de stale-while-revalidate. C'est une bibliothèque React Hooks pour la récupération de données à distance. SWR fonctionne en trois étapes principales : d'abord, il renvoie les données du cache (la partie obsolète), puis envoie la demande de récupération (la partie revalidée) et enfin, les données mises à jour. Mais pas de soucis, SWR gère toutes ces étapes pour nous. La seule chose que nous devons faire est de donner au crochet useSWR les paramètres nécessaires pour faire la demande.

SWR a également quelques fonctionnalités intéressantes telles que :

• Indépendant du back-end
• Navigation rapide dans les pages
• Revalidation sur focus
• Interrogation par intervalles
• Demander la déduplication
• Mutation locale
• Pagination
• TypeScript prêt
• Prise en charge RSS
• Mode suspense
• Prise en charge native de React
• Poids léger.

Cela semble magique ? Eh bien, SWR simplifie les choses et augmente à coup sûr l'expérience utilisateur de votre application React. Et une fois que nous aurons commencé à l'implémenter dans notre projet, vous comprendrez pourquoi ce crochet est pratique.

Il est important de savoir que le nom du package est swr ou SWR et que le hook utilisé pour obtenir les fonctionnalités SWR est nommé useSWR .

En théorie, le SWR est peut-être ce dont vous avez besoin pour améliorer votre récupération de données. Cependant, nous avons déjà deux excellentes façons de faire des requêtes HTTP dans notre application : l'API Fetch et la bibliothèque Axios.

Alors, pourquoi utiliser une nouvelle bibliothèque pour récupérer des données ? essayons de répondre à cette question légitime dans la section suivante.

Comparaison avec Fetch et Axios

Nous avons déjà de nombreuses façons de faire des requêtes HTTP dans nos applications React, et deux des plus populaires sont l'API Fetch et la bibliothèque Axios. Ils sont tous les deux excellents et nous permettent de récupérer ou d'envoyer facilement des données. Cependant, une fois l'opération effectuée, ils ne nous aideront pas à mettre en cache ou à paginer les données, vous devez le faire vous-même.

Axios ou Fetch traitera simplement la requête et renverra la réponse attendue, rien de plus.

Et par rapport à SWR, c'est un peu différent parce que le SWR sous le capot utilise l'API Fetch pour demander des données au serveur - c'est une sorte de couche construite dessus. Cependant, il possède quelques fonctionnalités intéressantes telles que la mise en cache, la pagination, la récupération de la position de défilement, la récupération dépendante, etc., et pour être précis un certain niveau de réactivité prêt à l'emploi qu'Axios ou Fetch n'ont pas. C'est un gros avantage car avoir de telles fonctionnalités aide à rendre nos applications React rapides et conviviales et réduit considérablement la taille de notre code.

Et pour conclure, gardez simplement à l'esprit que SWR n'est pas la même chose qu'Axios ou Fetch même si cela aide à traiter les requêtes HTTP. SWR est plus avancé qu'eux, il fournit quelques améliorations pour garder notre application synchronisée avec le back-end et augmente ainsi les performances de notre application.

Maintenant que nous savons quelles sont les différences entre SWR et la bibliothèque Axios ou l'API Fetch, il est temps d'expliquer pourquoi utiliser un tel outil.

Lecture recommandée : Consommer des API REST en réaction avec Fetch et Axios

Pourquoi utiliser SWR pour la récupération de données ?

Comme je l'ai dit plus tôt, SWR est livré avec des fonctionnalités pratiques qui aident à augmenter facilement la convivialité de votre application. Avec SWR, vous pouvez paginer vos données en un rien de temps en utilisant useSWRPages , vous pouvez également récupérer des données qui dépendent d'une autre requête ou récupérer une position de défilement lorsque vous revenez à une page donnée, et bien plus encore.

Habituellement, nous montrons à l'utilisateur un message de chargement ou un spinner lors de la récupération des données du serveur. Et avec SWR, vous pouvez l'améliorer en montrant à l'utilisateur les données mises en cache ou obsolètes tout en récupérant de nouvelles données à partir de l'API. Et une fois cette opération effectuée, il revalidera les données pour afficher la nouvelle version. Et vous n'avez rien à faire, SWR mettra les données en cache la première fois que vous les récupérerez et les récupérera automatiquement lorsqu'une nouvelle demande est faite.

Jusqu'à présent, nous voyons déjà pourquoi utiliser SWR plutôt qu'Axios ou Fetch est préférable en fonction évidemment de ce que vous visez à construire. Mais dans de nombreux cas, je recommanderai d'utiliser SWR car il possède d'excellentes fonctionnalités qui vont au-delà de la simple récupération et du retour de données.

Cela dit, nous pouvons maintenant commencer à créer notre application React et utiliser la bibliothèque SWR pour récupérer des données distantes.

Alors, commençons par mettre en place un nouveau projet.

Mise en place

Comme je l'ai dit plus tôt dans l'introduction, nous allons créer une application qui récupère les données de l'API Pokemon. Vous pouvez également utiliser une API différente si vous le souhaitez, je m'en tiendrai à elle pour l'instant.

Et pour créer une nouvelle application, nous devons exécuter la commande suivante sur le terminal :

 npx create-react-app react-swr

Ensuite, nous devons installer la bibliothèque SWR en naviguant d'abord vers le dossier contenant l'application React.

 cd react-swr

Et exécutez sur le terminal la commande suivante pour installer le package SWR.

 yarn add swr

Ou si vous utilisez npm :

 npm install swr

Maintenant que nous avons tout configuré, structurons le projet comme suit pour commencer à utiliser SWR :

 src ├── components | └── Pokemon.js ├── App.js ├── App.test.js ├── index.js ├── serviceWorker.js ├── setupTests.js ├── package.json ├── README.md ├── yarn-error.log └── yarn.lock

Comme vous pouvez le voir, la structure des dossiers est simple. La seule chose à remarquer est le dossier des components qui contient le fichier Pokemon.js . Il sera utilisé plus tard comme composant de présentation pour montrer un seul Pokémon une fois que nous aurons obtenu les données de l'API.

Génial! Avec cela en place, nous pouvons maintenant commencer à récupérer les données de l'API en utilisant useSWR .

Récupération de données distantes

Le package SWR a quelques fonctionnalités pratiques comme nous l'avons vu ci-dessus. Cependant, il existe deux manières de configurer cette bibliothèque : soit localement, soit globalement.

Une configuration locale signifie que chaque fois que nous créons un nouveau fichier, nous devons à nouveau configurer SWR pour pouvoir récupérer des données distantes. Et une configuration globale nous permet de réutiliser une partie de notre configuration dans différents fichiers car une fonction de fetcher peut être déclarée une fois et utilisée partout.

Et pas de soucis, nous verrons les deux dans cet article, mais pour l'instant, mettons les mains dans le cambouis et ajoutons du code significatif dans le fichier App.js

Affichage des données

 import React from 'react' import useSWR from 'swr' import { Pokemon } from './components/Pokemon' const url = 'https://pokeapi.co/api/v2/pokemon' const fetcher = (...args) => fetch(...args).then((res) => res.json()) function App() { const { data: result, error } = useSWR(url, fetcher) if (error) return <h1>Something went wrong!</h1> if (!result) return <h1>Loading...</h1> return ( <main className='App'> <h1>Pokedex</h1> <div> {result.results.map((pokemon) => ( <Pokemon key={pokemon.name} pokemon={pokemon} /> ))} </div> </main> ) } export default App

Comme vous pouvez le voir, nous commençons par importer useSWR depuis la bibliothèque SWR. Cela déclare l'URL de l'API à partir de laquelle vous souhaitez obtenir des données et une fonction pour récupérer ces données.

La fonction fetcher est utilisée ici pour transformer les données en JSON. Il reçoit les données récupérées en tant qu'argument et renvoie quelque chose.

Notez qu'ici, j'utilise l'opérateur Rest ( (...args) ) car je ne suis pas sûr du type et de la longueur des données reçues en paramètre, donc, je copie tout avant de le passer à nouveau comme argument au fetch méthode fournie par useSWR qui transforme les données en JSON et les renvoie.

Cela dit, le fetcher et l' url de l'API peuvent désormais être passés en paramètres au crochet useSWR . Avec cela, il peut maintenant faire la demande et il renvoie deux états : les données récupérées et un état d'erreur. Et data: result est identique à data.result , nous utilisons la déstructuration d'objet pour extraire result de data .

Avec les valeurs renvoyées, nous pouvons maintenant vérifier si les données sont récupérées avec succès, puis les parcourir en boucle. Et pour chaque utilisateur, utilisez le composant Pokemon pour l'afficher.

Maintenant que nous avons les données et que nous les transmettons au composant Pokemon, il est temps de mettre à jour Pokemon.js pour pouvoir recevoir et afficher les données.

Création du composant Pokémon

 import React from 'react' import useSWR from 'swr' const fetcher = (...args) => fetch(...args).then((res) => res.json()) export const Pokemon = ({ pokemon }) => { const { name } = pokemon const url = 'https://pokeapi.co/api/v2/pokemon/' + name const { data, error } = useSWR(url, fetcher) if (error) return <h1>Something went wrong!</h1> if (!data) return <h1>Loading...</h1> return ( <div className='Card'> <span className='Card--id'>#{data.id}</span> <img className='Card--image' src={data.sprites.front_default} alt={name} /> <h1 className='Card--name'>{name}</h1> <span className='Card--details'> {data.types.map((poke) => poke.type.name).join(', ')} </span> </div> ) }

Ici, nous avons un composant qui reçoit une seule donnée Pokemon de l'API et l'affiche. Cependant, les données reçues ne contiennent pas tous les champs nécessaires, nous devons donc faire une autre demande à l'API pour obtenir l'objet Pokémon complet.

Et comme vous pouvez le voir, nous utilisons le même processus pour récupérer les données même si cette fois nous ajoutons le nom du Pokémon à l'URL.

Soit dit en passant, si vous n'êtes pas familier avec la déstructuration, ({ pokemon }) revient à recevoir des accessoires et à accéder à l'objet pokemon avec props.pokemon . C'est juste un raccourci pour extraire des valeurs d'objets ou de tableaux.

Avec cela en place, si vous accédez au dossier racine du projet et exécutez sur le terminal la commande suivante :

 yarn start

Ou si vous utilisez npm :

 npm start

Vous devriez voir que les données sont extraites avec succès de l'API Pokemon et affichées comme prévu.

Génial! Nous sommes maintenant en mesure de récupérer des données à distance avec SWR. Cependant, cette configuration est locale et peut être un peu redondante car vous pouvez déjà voir que App.js et Pokemon.js utilisent la même fonction de récupération pour faire la même chose.

Mais heureusement, le package est fourni avec un fournisseur pratique nommé SWRConfig qui permet de configurer SWR globalement. C'est un composant wrapper qui permet aux composants enfants d'utiliser la configuration globale et donc la fonction de récupération.

Pour configurer SWR globalement, nous devons mettre à jour le fichier index.js car c'est là que le composant App est rendu à l'aide de React DOM. Si vous le souhaitez, vous pouvez utiliser SWRConfig directement dans le fichier App.js

Configuration globale de SWR

 import React from 'react' import ReactDOM from 'react-dom' import { SWRConfig } from 'swr' import App from './App' import './index.css' const fetcher = (...args) => fetch(...args).then((res) => res.json()) ReactDOM.render( <React.StrictMode> <SWRConfig value={{ fetcher }}> <App /> </SWRConfig> </React.StrictMode>, document.getElementById('root') )

Comme vous pouvez le voir, nous commençons par importer SWRConfig qui est un fournisseur qui doit envelopper le composant supérieur ou juste une partie de votre application React qui doit utiliser les fonctionnalités SWR. Il prend comme accessoire une valeur qui attend un objet de config. Vous pouvez passer plus d'une propriété à l'objet de configuration, ici j'ai juste besoin de la fonction pour récupérer les données.

Maintenant, au lieu de déclarer la fonction de fetcher dans chaque fichier, nous la créons ici et la transmettons comme valeur à SWRConfig . Avec cela, nous pouvons désormais récupérer des données à n'importe quel niveau de notre application sans créer une autre fonction et ainsi éviter la redondance.

En plus de cela, fetcher est égal à fetcher: fetcher , c'est juste du sucre syntaxique proposé par ES6. Avec ce changement, nous devons maintenant mettre à jour nos composants pour utiliser la configuration globale.

Utilisation de la configuration globale SWR

 import React from 'react' import useSWR from 'swr' import { Pokemon } from './components/Pokemon' const url = 'https://pokeapi.co/api/v2/pokemon' function App() { const { data: result, error } = useSWR(url) if (error) return <h1>Something went wrong!</h1> if (!result) return <h1>Loading...</h1> return ( <main className='App'> <h1>Pokedex</h1> <div> {result.results.map((pokemon) => ( <Pokemon key={pokemon.name} pokemon={pokemon} /> ))} </div> </main> ) } export default App

Maintenant, nous n'avons plus qu'à transmettre l' url à useSWR , au lieu de transmettre la méthode url et fetcher . Modifions également un peu le composant Pokemon.

 import React from 'react' import useSWR from 'swr' export const Pokemon = ({ pokemon }) => { const { name } = pokemon const url = 'https://pokeapi.co/api/v2/pokemon/' + name const { data, error } = useSWR(url) if (error) return <h1>Something went wrong!</h1> if (!data) return <h1>Loading...</h1> return ( <div className='Card'> <span className='Card--id'>#{data.id}</span> <img className='Card--image' src={data.sprites.front_default} alt={name} /> <h1 className='Card--name'>{name}</h1> <span className='Card--details'> {data.types.map((poke) => poke.type.name).join(', ')} </span> </div> ) }

Vous pouvez déjà voir que nous n'avons plus de fonction de récupération, grâce à la configuration globale qui passe la fonction à useSWR sous le capot.

Désormais, vous pouvez utiliser la fonction de récupération globale partout dans votre application. La seule chose dont le hook useSWR besoin pour récupérer des données distantes est l'URL.

Cependant, nous pouvons encore améliorer la configuration en créant un crochet personnalisé pour éviter de déclarer l'URL encore et encore, et à la place, il suffit de passer en paramètre le chemin.

Configuration avancée en créant un crochet personnalisé

Pour ce faire, vous devez créer un nouveau fichier à la racine du projet nommé useRequest.js (vous pouvez le nommer comme vous le souhaitez) et y ajouter ce bloc de code ci-dessous.

 import useSwr from 'swr' const baseUrl = 'https://pokeapi.co/api/v2' export const useRequest = (path, name) => { if (!path) { throw new Error('Path is required') } const url = name ? baseUrl + path + '/' + name : baseUrl + path const { data, error } = useSwr(url) return { data, error } }

Ici, nous avons une fonction qui reçoit un chemin et éventuellement un nom et l'ajoute à l'URL de base pour créer l'URL complète. Ensuite, il vérifie si un paramètre de nom est reçu ou non et le traite en conséquence.

Ensuite, cette URL est transmise en tant que paramètre au hook useSWR pour pouvoir récupérer les données distantes et les renvoyer. Et si aucun chemin n'est passé, il génère une erreur.

Génial! nous devons maintenant modifier un peu les composants pour utiliser notre crochet personnalisé.

 import React from 'react' import { useRequest } from './useRequest' import './styles.css' import { Pokemon } from './components/Pokemon' function App() { const { data: result, error } = useRequest('/pokemon') if (error) return <h1>Something went wrong!</h1> if (!result) return <h1>Loading...</h1> return ( <main className='App'> <h1>Pokedex</h1> <div> {result.results.map((pokemon) => ( <Pokemon key={pokemon.name} pokemon={pokemon} /> ))} </div> </main> ) } export default App

Maintenant, au lieu d'utiliser le crochet SWR, nous utilisons le crochet personnalisé construit dessus, puis nous passons comme prévu le chemin comme argument. Avec cela en place, tout fonctionnera comme avant mais avec une configuration beaucoup plus propre et flexible.

Mettons également à jour le composant Pokemon.

 import React from 'react' import { useRequest } from '../useRequest' export const Pokemon = ({ pokemon }) => { const { name } = pokemon const { data, error } = useRequest('/pokemon', name) if (error) return <h1>Something went wrong!</h1> if (!data) return <h1>Loading...</h1> return ( <div className='Card'> <span className='Card--id'>#{data.id}</span> <img className='Card--image' src={data.sprites.front_default} alt={name} /> <h1 className='Card--name'>{name}</h1> <span className='Card--details'> {data.types.map((poke) => poke.type.name).join(', ')} </span> </div> ) }

Vous pouvez déjà voir comment notre crochet personnalisé rend les choses plus faciles et plus flexibles. Ici, nous avons juste besoin de passer en plus le nom du Pokemon à récupérer à useRequest et il gère tout pour nous.

J'espère que vous commencerez à apprécier cette bibliothèque sympa - Cependant, nous avons encore des choses à découvrir car SWR offre de nombreuses fonctionnalités, et l'une d'entre elles est useSWRPages qui est un crochet pour paginer facilement les données. Alors, utilisons ce crochet dans le projet.

Paginez nos données avec useSWRPages

SWR nous permet de paginer facilement les données et de n'en demander qu'une partie, et si nécessaire, de récupérer les données à afficher pour la page suivante.

Maintenant, créons un nouveau fichier à la racine du projet usePagination.js et utilisons-le comme crochet personnalisé pour la pagination.

 import React from 'react' import useSWR, { useSWRPages } from 'swr' import { Pokemon } from './components/Pokemon' export const usePagination = (path) => { const { pages, isLoadingMore, loadMore, isReachingEnd } = useSWRPages( 'pokemon-page', ({ offset, withSWR }) => { const url = offset || `https://pokeapi.co/api/v2${path}` const { data: result, error } = withSWR(useSWR(url)) if (error) return <h1>Something went wrong!</h1> if (!result) return <h1>Loading...</h1> return result.results.map((pokemon) => ( <Pokemon key={pokemon.name} pokemon={pokemon} /> )) }, (SWR) => SWR.data.next, [] ) return { pages, isLoadingMore, loadMore, isReachingEnd } }

Comme vous pouvez le voir, nous commençons ici par importer useSWRPages qui est l'assistant qui permet de paginer facilement les données. Il reçoit 4 arguments : la clé de la requête pokemon-page qui est également utilisée pour la mise en cache, une fonction pour récupérer les données qui renvoie un composant si les données sont récupérées avec succès, et une autre fonction qui prend l'objet SWR et demande les données du page suivante, et un tableau de dépendances.

Et une fois les données récupérées, la fonction useSWRPages renvoie plusieurs valeurs, mais ici nous en avons besoin de 4 : les pages qui est le composant retourné avec les données, la fonction isLoadingMore qui vérifie si les données sont actuellement récupérées, la fonction loadMore qui aide à récupérer plus de données, et la méthode isReachingEnd qui détermine s'il reste des données à récupérer ou non.

Maintenant que nous avons le crochet personnalisé qui renvoie les valeurs nécessaires pour paginer les données, nous pouvons maintenant passer au fichier App.js et le modifier un peu.

 import React from 'react' import { usePagination } from './usePagination' import './styles.css' export default function App() { const { pages, isLoadingMore, loadMore, isReachingEnd } = usePagination( '/pokemon' ) return ( <main className='App'> <h1>Pokedex</h1> <div>{pages}</div> <button onClick={loadMore} disabled={isLoadingMore || isReachingEnd} > Load more... </button> </main> ) }

Une fois le hook usePagination importé, nous pouvons maintenant passer le chemin en paramètre et récupérer les valeurs retournées. Et puisque les pages sont un composant, nous n'avons pas besoin de parcourir les données ou quoi que ce soit du genre.

Ensuite, nous utilisons la fonction loadMore sur le bouton pour récupérer plus de données et la désactiver si l'opération de récupération n'est pas terminée ou s'il n'y a pas de données à récupérer.

Génial! avec ce changement, nous pouvons maintenant naviguer à la racine du projet et démarrer le serveur avec cette commande pour prévisualiser notre application.

 yarn start

Ou si vous utilisez npm :

 npm start

Vous devriez voir que les données sont récupérées avec succès et si vous cliquez sur le bouton, de nouvelles données seront récupérées par SWR.

Jusqu'à présent, nous avons vu en pratique la bibliothèque SWR, et j'espère que vous y trouverez de la valeur. Cependant, il a encore quelques fonctionnalités à offrir. Plongeons-nous dans ces fonctionnalités dans la section suivante.

Autres caractéristiques de SWR

La bibliothèque SWR contient un tas de choses pratiques qui simplifient la façon dont nous créons des applications React.

Revalidation de mise au point

C'est une fonctionnalité qui permet de mettre à jour ou de revalider pour être précis les données lorsque vous recentrez une page ou basculez entre les onglets. Et par défaut, cette fonctionnalité est activée, mais vous pouvez quand même la désactiver si elle ne correspond pas à votre besoin. Cela peut être utile surtout si vous avez des données avec des mises à jour à haute fréquence.

Récupérer à intervalles

La bibliothèque SWR permet de récupérer les données après un certain temps. Cela peut être pratique lorsque vos données changent à grande vitesse ou que vous devez faire une nouvelle demande pour obtenir une nouvelle information de votre base de données.

Mutation locale

Avec SWR, vous pouvez définir un état local temporaire qui se mettra à jour automatiquement lorsque de nouvelles données seront récupérées (revalidation). Cette fonctionnalité entre en jeu en particulier lorsque vous traitez avec une approche hors ligne d'abord, elle permet de mettre à jour facilement les données.

Récupération de la position de défilement

Cette fonctionnalité est très pratique, surtout lorsqu'il s'agit de gérer des listes énormes. Il vous permet de récupérer la position de défilement après être revenu à la page. Et dans tous les cas, cela augmente la convivialité de votre application.

Récupération dépendante

SWR vous permet de récupérer des données qui dépendent d'autres données. Cela signifie qu'il peut récupérer les données A, et une fois cette opération effectuée, il les utilise pour récupérer les données B tout en évitant les chutes d'eau. Et cette fonctionnalité est utile lorsque vous avez des données relationnelles.

Cela dit, SWR contribue à améliorer l'expérience utilisateur dans tous les domaines. Il a plus de fonctionnalités que cela, et dans de nombreux cas, il est préférable de l'utiliser sur l'API Fetch ou la bibliothèque Axios.

Conclusion

Tout au long de cet article, nous avons vu pourquoi SWR est une bibliothèque géniale. Il permet la récupération de données à distance à l'aide de React Hooks et aide à simplifier certaines fonctionnalités avancées telles que la pagination, la mise en cache des données, la récupération à intervalle, la récupération de la position de défilement, etc. SWR est également indépendant du backend, ce qui signifie qu'il peut récupérer des données à partir de n'importe quel type d'API ou de bases de données. En définitive, SWR augmente considérablement l'expérience utilisateur de vos applications React, il a un bel avenir et vous devriez garder un œil dessus ou mieux l'utiliser dans votre prochaine application React.

Vous pouvez prévisualiser le projet fini en direct ici.

Merci d'avoir lu!

Prochaines étapes

Vous pouvez continuer à consulter les liens suivants qui vous donneront une meilleure compréhension au-delà de la portée de ce didacticiel.

• TOS
• Documents SWR

Lectures complémentaires sur SmashingMag :

• Composants de style dans React
• De meilleurs réducteurs avec Immer
• Composants d'ordre supérieur dans React
• Construire des composants React réutilisables à l'aide de Tailwind