Lorsque vous travaillez avec React et disposez de plusieurs instances du même composant, la gestion de l'état peut devenir délicate. En fonction de la manière dont vos composants doivent interagir, vous souhaiterez gérer l'état différemment. Voici ce que j’ai trouvé qui fonctionne bien.

Instances indépendantes : conserver l'état à l'intérieur du composant

Si vos composants n'ont pas besoin de communiquer entre eux, il est préférable de conserver leur état à l'intérieur du composant. De cette façon, chaque instance a son propre état et les modifications apportées à l’une n’affectent pas les autres.

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increment
    
  );
}

// Usage
 // Instance 1
 // Instance 2

Ici, chaque composant Counter garde une trace de son propre décompte. Ainsi, si vous cliquez sur le bouton d’un compteur, cela ne change pas le décompte de l’autre.

Instances dépendantes : gérer l'état dans le composant parent

Mais si les composants doivent partager un état ou fonctionner de manière coordonnée, il est préférable de déplacer l'état vers le composant parent. Le parent peut gérer l'état partagé et le transmettre comme accessoire. Cela garantit que toutes les instances restent synchronisées et fonctionnent ensemble de manière fluide.

function Parent() {
  const [sharedCount, setSharedCount] = useState(0);

  return (
    

      
Total Count: {sharedCount}
      
  );
}

function Counter({ count, setCount }) {
  return (
    

      
Count: {count}
       setCount(count   1)}>Increment
    
  );
}

Cette approche fonctionne car lorsque l'état est dans le composant parent, toute mise à jour de cet état déclenche un nouveau rendu de toutes les instances, garantissant qu'elles affichent toutes la dernière interface utilisateur. Si l'état était conservé séparément dans chaque instance, seule l'instance avec le changement d'état serait restituée, ce qui entraînerait une interface utilisateur incohérente entre les instances.

Exemples de mes projets

J'ai compris cela en construisant un composant accordéon. Voici deux exemples tirés de mon propre travail :

• Instances d'accordéon indépendantes : exemple. Dans cette configuration, chaque instance d'accordéon fonctionne indépendamment.

• Instances d'accordéon dépendantes : exemple. Dans cette version, toutes les instances d'accordéon dépendent les unes des autres et restent synchronisées.

Récapitulatif rapide

• Si les composants fonctionnent séparément, conservez l'état à l'intérieur de chaque composant.

• S'ils ont besoin de partager l'état ou de travailler ensemble de manière coordonnée, gérez l'état dans le parent.

Cette approche a fait une grande différence pour moi lors de la création de ces exemples d'accordéon. J'espère que cela vous aidera aussi !