Caching avec React et React Query

Pourquoi Caching avec React et React Query ?

Dans un monde où les données sont souvent rares et précieuses, il est essentiel de minimiser la latence et d'améliorer l'expérience utilisateur en mettant en cache les données fréquemment consultées. Un dev a besoin de caching au quotidien pour plusieurs raisons :

1. Performance : En évitant les requêtes réseau fréquentes, le caching réduit le temps de réponse et améliore la vitesse d'interaction utilisateur.
2. Fiabilité : Les données en cache peuvent être utilisées même lorsque l'utilisateur est hors ligne ou si la connexion est interrompue.
3. Scalabilité : Avec moins de requêtes vers les serveurs backend, le caching aide à gérer une plus grande charge d'utilisateurs.

Un cas d'usage concret serait un application de messagerie instantanée où chaque utilisateur peut voir les derniers messages en direct. En utilisant le caching avec React Query, on peut s'assurer que les données sont toujours à jour et réduire la latence en évitant les requêtes réseau fréquentes.

Prerequis

• Connaissances nécessaires :

  • React
  • JavaScript ES6+
  • Axios ou Fetch API pour effectuer des requêtes HTTP
  • Comprendre les concepts de hooks en React (useState, useEffect)

• Outils à installer :

  • Node.js v12+ et npm/yarn
  • Un éditeur de code moderne comme Visual Studio Code

Concepts fondamentaux

1. Qu'est-ce que le Caching ?

Le caching consiste à stocker des données en mémoire pour accéder plus rapidement à ces données à l'avenir, sans avoir besoin de les récupérer du réseau ou de la base de données.

// Exemple simple de caching avec useState et useEffect

import React, { useState, useEffect } from 'react';

const DataFetcher = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      {data ? JSON.stringify(data, null, 2) : 'No data'}
    </div>
  );
};

export default DataFetcher;

2. Qu'est-ce que React Query ?

React Query est une bibliothèque de gestion de données asynchrones pour React qui gère automatiquement le caching des données, les revalidation et les mutations.

// Installer React Query

npm install react-query

// Exemple simple de React Query

import { useQuery } from 'react-query';
import axios from 'axios';

const fetchData = async () => {
  const response = await axios.get('https://api.example.com/data');
  return response.data;
};

const DataFetcher = () => {
  const { isLoading, error, data } = useQuery('data', fetchData);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {JSON.stringify(data, null, 2)}
    </div>
  );
};

export default DataFetcher;

Mise en pratique : projet fil rouge

Nous allons construire un gestionnaire de tâches simple avec React Query. L'application permettra d'afficher une liste de tâches et d'ajouter de nouvelles tâches.

Étape 1 : Initialisation du projet

npx create-react-app task-manager
cd task-manager
npm install react-query axios

Étape 2 : Création des composants

src/components/TaskList.js

import React from 'react';
import { useQuery } from 'react-query';
import axios from 'axios';

const fetchTasks = async () => {
  const response = await axios.get('https://jsonplaceholder.typicode.com/todos');
  return response.data;
};

const TaskList = () => {
  const { isLoading, error, data } = useQuery('tasks', fetchTasks);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map(task => (
        <li key={task.id}>
          {task.title} - {task.completed ? 'Completed' : 'Pending'}
        </li>
      ))}
    </ul>
  );
};

export default TaskList;

src/components/AddTask.js

import React, { useState } from 'react';
import axios from 'axios';

const AddTask = () => {
  const [title, setTitle] = useState('');

  const handleSubmit = async (event) => {
    event.preventDefault();
    await axios.post('https://jsonplaceholder.typicode.com/todos', {
      title,
      completed: false
    });
    // Raffraîchir les tâches
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} />
      <button type="submit">Add Task</button>
    </form>
  );
};

export default AddTask;

src/App.js

import React from 'react';
import TaskList from './components/TaskList';
import AddTask from './components/AddTask';

const App = () => {
  return (
    <div>
      <h1>Task Manager</h1>
      <AddTask />
      <TaskList />
    </div>
  );
};

export default App;

Étape 3 : Exécution du projet

npm start

Erreurs frequentes et debugging

Erreur 1 : TypeError: Cannot read property 'data' of undefined

Code incorrect :

const { isLoading, error, data } = useQuery('tasks', fetchTasks);

Code correct :

const { isLoading, error, data } = useQuery('tasks', () => fetchTasks());

Erreur 2 : Error: Network Error

Code incorrect :

const fetchData = async () => {
  const response = await axios.get('https://api.example.com/data');
  return response.data;
};

Code correct :

const fetchData = async () => {
  const response = await axios.get('https://jsonplaceholder.typicode.com/todos');
  return response.data;
};

Erreur 3 : Uncaught ReferenceError: React is not defined

Code incorrect :

import { useQuery } from 'react-query';

Code correct :

import { useQuery } from 'react-query';
import React from 'react';

Pour aller plus loin

1. Pagination avec React Query

   • En savoir plus sur la gestion de la pagination avec React Query. Documentation officielle

2. Mutation avec React Query

   • Apprendre à effectuer des mutations (ajouter, mettre à jour, supprimer) avec React Query. Documentation officielle

3. Optimisation du caching avec React Query

   • Découvrir comment optimiser le comportement de caching pour une meilleure performance. Documentation officielle

Défi pratique

Défi : Créez une application de gestion des notes simple avec React Query, permettant d'afficher, ajouter et modifier des notes. Utilisez le caching pour optimiser les performances.

Bonne chance avec ce tutoriel ! N'hésitez pas à poser des questions si vous avez besoin d'aide supplémentaire.