Quando você está trabalhando com React e tem várias instâncias do mesmo componente, gerenciar o estado pode ser complicado. Dependendo de como seus componentes precisam interagir, você desejará lidar com o estado de maneira diferente. Aqui está o que descobri que funciona bem.

Instâncias independentes: mantenha o estado dentro do componente

Se seus componentes não precisam se comunicar entre si, é melhor manter seu estado dentro do componente. Dessa forma, cada instância tem seu próprio estado e as alterações em uma não afetam as outras.

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

  return (
    

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

// Usage
 // Instance 1
 // Instance 2

Aqui, cada componente Counter monitora sua própria contagem. Portanto, se você clicar no botão de um contador, a contagem do outro não será alterada.

Instâncias Dependentes: Gerenciar Estado no Componente Pai

Mas se os componentes precisam compartilhar algum estado ou trabalhar de maneira coordenada, é melhor mover o estado para o componente pai. O pai pode gerenciar o estado compartilhado e transmiti-lo como acessórios. Isso garante que todas as instâncias permaneçam sincronizadas e funcionem juntas sem problemas.

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

  return (
    

      
Total Count: {sharedCount}
      
  );
}

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

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

Essa abordagem funciona porque quando o estado está no componente pai, qualquer atualização nesse estado aciona uma nova renderização de todas as instâncias, garantindo que todas exibam a IU mais recente. Se o estado fosse mantido em cada instância separadamente, apenas a instância com a mudança de estado seria renderizada novamente, levando a uma IU inconsistente entre as instâncias.

Exemplos de meus projetos

Eu descobri isso enquanto construía um componente de acordeão. Aqui estão dois exemplos do meu próprio trabalho:

• Instâncias de acordeão independentes: exemplo. Nesta configuração, cada instância do acordeão funciona de forma independente.

• Instâncias acordeão dependentes: exemplo. Nesta versão, todas as instâncias do acordeão dependem umas das outras e permanecem sincronizadas.

Recapitulação rápida

• Se os componentes funcionarem separadamente, mantenha o estado dentro de cada componente.

• Se eles precisarem compartilhar o estado ou trabalhar juntos de maneira coordenada, gerencie o estado no pai.

Essa abordagem fez uma grande diferença para mim ao construir esses exemplos de acordeão. Espero que ajude você também!