Composición Saludable con React Context en Aplicaciones React

¿Cómo mejorar la composición en una aplicación React usando Context?

En el desarrollo de aplicaciones con React, es crucial entender cómo estructurar adecuadamente la composición de los componentes para optimizar su funcionamiento. Para evitar llamar innecesariamente el contexto y mejorar la legibilidad y mantenimiento del código, se puede aplicar una buena estrategia de composición con React Context.

¿Qué cambios se deben realizar en AppUI?

Inicialmente, vamos a mover los llamados al contexto desde los componentes Tudu Counter y Tudu Search hacia el componente AppUI. Esto nos permite centralizar la información y pasarla como propiedades (props) a las subcomponentes, en lugar de cada uno llamar a su propio contexto.

1. Cortar las propiedades TotalTudus y CompletedTudus de los componentes hijos.
2. Pasarlas al componente AppUI y de ahí enviarlas a Tudu Counter.
3. Repetir este proceso para Tudu Search con las propiedades Search Value y Set Search Value.

¿Cómo estructurar un componente Tudu Header?

Para encapsular Tudu Counter y Tudu Search, podemos crear un nuevo componente Tudu Header. El propósito es mantener ordenado el código y evitar repeticiones innecesarias de importaciones y estructuras:

// index.js de Tudu Header
import React from 'react';
import { TuduCounter } from './TuduCounter';
import { TuduSearch } from './TuduSearch';

function TuduHeader({ TotalTudus, CompletedTudus, SearchValue, SetSearchValue }) {
  return (
    <header>
      <TuduCounter TotalTudus={TotalTudus} CompletedTudus={CompletedTudus} />
      <TuduSearch SearchValue={SearchValue} SetSearchValue={SetSearchValue} />
    </header>
  );
}

export { TuduHeader };

¿Cómo simplificar el paso de propiedades usando 'children'?

La clave para evitar pasar múltiples propiedades de un componente a otro, es usar la prop children. Esta permite definir dinámicamente cuáles componentes hijos serán renderizados, facilitando así la comunicación entre ellos sin necesidad de prop drilling.

• Modifica el Tudu Header para que use children:

function TuduHeader({ children }) {
  return <header>{children}</header>;
}

• En AppUI, define cuáles son los componentes hijos del Tudu Header:

import { TuduHeader } from './TuduHeader';
import { TuduCounter } from './TuduCounter';
import { TuduSearch } from './TuduSearch';

function AppUI() {
  return (
    <TuduHeader>
      <TuduCounter />
      <TuduSearch />
    </TuduHeader>
  );
}

¿Qué se logra con esta estrategia de composición?

Al implementar esta estrategia en tu aplicación React:

• Optimización del rendimiento: Reducir las llamadas a contextos innecesarias.
• Mejor legibilidad del código: Estructurar el código de una manera más clara y mantenible.
• Menor prop drilling: Al evitar el paso de propiedades innecesarias a través de múltiples niveles de componentes.

Con estos métodos, esperamos poder gestionar tanto los estados como los componentes de manera más eficiente, mejorando la experiencia del desarrollo y el mantenimiento de la aplicación. ¡Continúa explorando y aprendiendo más sobre composición y React para profundizar tus conocimientos!