En tant que développeurs React, nous sommes souvent confrontés à des scénarios dans lesquels plusieurs changements d'état rapides doivent être synchronisés avec une API. Effectuer un appel API pour chaque petit changement peut être inefficace et pénible à la fois pour le client et le serveur. C’est là qu’interviennent les mesures anti-rebond et une gestion intelligente de l’État. Dans cet article, nous allons créer un hook React personnalisé qui capture les appels de mise à jour d'API parallèles en fusionnant les charges utiles et en anti-rebondissant l'appel d'API.

Le problème

Imaginez un champ de saisie dans lequel les utilisateurs peuvent ajuster les paramètres ou les préférences. Chaque frappe ou ajustement peut déclencher un appel API pour enregistrer le nouvel état. Si un utilisateur effectue plusieurs modifications successives, cela peut entraîner un flot de requêtes API :

• Utilisation inefficace des ressources réseau.
• Conditions de concurrence potentielles.
• Charge inutile sur le serveur.

Entrez dans l'anti-rebond

Debouncing est une technique utilisée pour limiter la vitesse à laquelle une fonction peut se déclencher. Au lieu d'appeler la fonction immédiatement, vous attendez une certaine période d'inactivité avant de l'exécuter. Si un autre appel arrive avant la fin du délai, le minuteur se réinitialise.

Pourquoi utiliser l'anti-rebond ?

• Amélioration des performances : réduit le nombre d'appels d'API inutiles.
• Optimisation des ressources : minimise la charge du serveur et l'utilisation du réseau.
• Expérience utilisateur améliorée : évite les décalages et les erreurs potentielles dues à des appels rapides et successifs.

Le rôle de useRef

Dans React, useRef est un hook qui vous permet de conserver des valeurs mutables entre les rendus sans déclencher un nouveau rendu. Il s'agit essentiellement d'un conteneur qui contient une valeur mutable.

Pourquoi utiliser useRef ici ?

• Conserver les mises à jour accumulées : nous devons garder une trace des mises à jour accumulées entre les rendus sans provoquer de nouveaux rendus.
• Accéder à la valeur actuelle mutable : useRef nous donne une propriété .current que nous pouvons lire et écrire.

Le crochet useDeboundedUpdate

Plongeons dans le code et comprenons comment tout cela s'articule.

import { debounce } from "@mui/material";
import { useCallback, useEffect, useRef } from "react";

type DebouncedUpdateParams = {
  id: string;
  params: Record;
};

function useDebouncedUpdate( apiUpdate: (params: DebouncedUpdateParams) => void,
  delay: number = 300, ) {
  const accumulatedUpdates = useRef(null);

  const processUpdates = useRef(
    debounce(() => {
      if (accumulatedUpdates.current) {
        apiUpdate(accumulatedUpdates.current);
        accumulatedUpdates.current = null;
      }
    }, delay),
  ).current;

  const handleUpdate = useCallback(
    (params: DebouncedUpdateParams) => {
      accumulatedUpdates.current = {
        id: params.id,
        params: {
          ...(accumulatedUpdates.current?.params || {}),
          ...params.params,
        },
      };
      processUpdates();
    },
    [processUpdates],
  );

  useEffect(() => {
    return () => {
      processUpdates.clear();
    };
  }, [processUpdates]);

  return handleUpdate;
}

export default useDebouncedUpdate;

Le décomposer

1. Accumulation de mises à jour avec useRef

Nous initialisons une useRef appelée cumulativeUpdates pour stocker les paramètres combinés de toutes les mises à jour entrantes.

const accumuléUpdates = useRef(nul);

2. Anti-rebond de l'appel API

Nous créons un processus de fonction anti-rebondMises à jour à l'aide de l'utilitaire anti-rebond de Material UI.

const processUpdates = useRef(
  debounce(() => {
    if (accumulatedUpdates.current) {
      apiUpdate(accumulatedUpdates.current);
      accumulatedUpdates.current = null;
    }
  }, delay),
).current;

• Pourquoi utiliserRef pour processUpdates ? Nous utilisons useRef pour garantir que la fonction anti-rebond n'est pas recréée à chaque rendu, ce qui réinitialiserait le minuteur anti-rebond.

3. Gestion des mises à jour avec useCallback

La fonction handleUpdate est responsable de l'accumulation des mises à jour et du déclenchement de l'appel API anti-rebond.

const handleUpdate = useCallback(
  (params: DebouncedUpdateParams) => {
    accumulatedUpdates.current = {
      id: params.id,
      params: {
        ...(accumulatedUpdates.current?.params || {}),
        ...params.params,
      },
    };
    processUpdates();
  },
  [processUpdates],
);

• Fusion des paramètres : nous fusionnons les nouveaux paramètres avec ceux existants pour garantir que toutes les mises à jour sont capturées.
• Déclencher le rebond : chaque fois que handleUpdate est appelé, nous déclenchons processUpdates(), mais l'appel d'API réel est anti-rebond.

4. Nettoyer avec useEffect

Nous effaçons la fonction anti-rebond lorsque le composant se démonte pour éviter les fuites de mémoire.

useEffect(() => {
  return () => {
    processUpdates.clear();
  };
}, [processUpdates]);

Comment ça marche

1. Accumuler les paramètres : chaque mise à jour ajoute ses paramètres à accumuléUpdates.current, en les fusionnant avec tous les paramètres existants.
2. Exécution anti-rebond : processUpdates attend un délai de quelques millisecondes d'inactivité avant de s'exécuter.
3. Appel API : une fois le temps anti-rebond écoulé, apiUpdate est appelé avec les paramètres fusionnés.
4. Réinitialiser les mises à jour accumulées : après l'appel de l'API, nous réinitialisons accumuléUpdates.current à null.

Exemple d'utilisation

Voici comment utiliser ce hook dans un composant :

import React from "react";
import useDebouncedUpdate from "./useDebouncedUpdate";

function SettingsComponent() {
  const debouncedUpdate = useDebouncedUpdate(updateSettingsApi, 500);

  const handleChange = (settingName, value) => {
    debouncedUpdate({
      id: "user-settings",
      params: { [settingName]: value },
    });
  };

  return (
    

       handleChange("username", e.target.value)}
      />
       handleChange("notifications", e.target.checked)}
      />
    
  );
}

function updateSettingsApi({ id, params }) {
  // Make your API call here
  console.log("Updating settings:", params);
}

• Actions utilisateur : lorsque l'utilisateur saisit ou modifie les paramètres, handleChange est appelé.
• Mises à jour anti-rebond : les modifications sont accumulées et envoyées à l'API après 500 ms d'inactivité.

Conclusion

En combinant l'anti-rebond avec l'accumulation d'état, nous pouvons créer des applications efficaces et réactives. Le hook useDebouncingUpdate garantit que les modifications rapides sont regroupées, réduisant ainsi les appels d'API inutiles et améliorant les performances.

Points clés à retenir :

• L'anti-rebond est essentiel pour gérer des appels successifs rapides.
• useRef nous permet de maintenir un état mutable sans provoquer de nouveaux rendus.
• Les hooks personnalisés comme useDebouncingUpdate encapsulent une logique complexe, rendant les composants plus propres et plus maintenables.

N'hésitez pas à intégrer ce crochet dans vos projets et à l'adapter à vos besoins spécifiques. Bon codage !