Cuando trabajas con React y tienes varias instancias del mismo componente, administrar el estado puede resultar complicado. Dependiendo de cómo deben interactuar sus componentes, querrá manejar el estado de manera diferente. Esto es lo que encontré que funciona bien.

Instancias independientes: mantener el estado dentro del componente

Si sus componentes no necesitan comunicarse entre sí, es mejor mantener su estado dentro del componente. De esta manera, cada instancia tiene su propio estado y los cambios en una no afectan a las demás.

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

  return (
    

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

// Usage
 // Instance 1
 // Instance 2

Aquí, cada componente del contador realiza un seguimiento de su propio recuento. Entonces, si haces clic en el botón de un contador, no cambia el recuento del otro.

Instancias dependientes: administrar el estado en el componente principal

Pero si los componentes necesitan compartir algún estado o funcionar de manera coordinada, es mejor mover el estado al componente principal. El padre puede gestionar el estado compartido y transmitirlo como accesorios. Esto garantiza que todas las instancias permanezcan sincronizadas y funcionen juntas sin problemas.

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

  return (
    

      
Total Count: {sharedCount}
      
  );
}

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

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

Este enfoque funciona porque cuando el estado está en el componente principal, cualquier actualización de ese estado activa una nueva representación de todas las instancias, lo que garantiza que todas muestren la interfaz de usuario más reciente. Si el estado se mantuviera en cada instancia por separado, solo se volvería a representar la instancia con el cambio de estado, lo que generaría una interfaz de usuario inconsistente entre las instancias.

Ejemplos de Mis proyectos

Descubrí esto mientras construía un componente de acordeón. Aquí hay dos ejemplos de mi propio trabajo:

• Instancias de acordeón independientes: ejemplo. En esta configuración, cada instancia de acordeón funciona de forma independiente.

• Instancias de acordeón dependientes: ejemplo. En esta versión, todas las instancias de acordeón dependen unas de otras y permanecen sincronizadas.

Resumen rápido

• Si los componentes funcionan por separado, mantenga el estado dentro de cada componente.

• Si necesitan compartir el estado o trabajar juntos de manera coordinada, administre el estado en el estado principal.

Este enfoque marcó una gran diferencia para mí al construir estos ejemplos de acordeón. ¡Espero que te ayude a ti también!