Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Composición y colocación del estado en React

4/19
Recursos

Aportes 5

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

En resumen:

⭐️ Cuando los componentes nietos de App no solo son nietos, sino también componentes hijos, podemos pasarles props directamente y mejorar su comunicación.

Casi siempre que llamamos a un componente… pos lo llamamos y ya. 😅

function App() {
  return (
    <TodoHeader />
  );
}

function TodoHeader() {
  return (
    <TodoCounter />
  );
}

Esto implica que para compartir el estado debemos pasar props y props y props por cada componente intermedio entre App y los componentes que realmente necesiten esas props en cualquier lugar de la jerarquía. 😓

function App() {
  const [state, setState] = React.setState(initialState);

  return (
    <TodoHeader state={state} setState={setState} />
  );
}

function TodoHeader({ state, setState }) {
  return (
    <header>
      <TodoCounter state={state} setState={setState} />
    </header>
  );
}

Pero otra forma de trabajar es que App no solo llame a sus componentes directamente hijos, sino que también llamen a los siguientes componentes en la jerarquía de la aplicación. 😮

function App() {
  return (
    <TodoHeader>
      <TodoCounter />
    </TodoHeader>
  );
}

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

Y esta nueva forma de trabajar implica que ya no tenemos que pasar props y props y props entre App y el resto de componentes para compartir el estado, sino que App puede comunicarse directamente con el componente que realmente necesita ese estado. 🤩

function App() {
  const [state, setState] = React.setState(initialState);

  return (
    <TodoHeader>
      <TodoCounter state={state} setState={setState} />
    </TodoHeader>
  );
}

💚 Esta es la magia de la composición de componentes.

Para estar en el mismo archivo, lo que tienen que hacer es lo siguiente:
clonar el repositorio asi

git clone https://github.com/platzi/curso-react-patrones-render.git

entrar al proyecto:

cd curso-react-patrones-render

luego cambiar al mismo commit que en el video:

git checkout 2e56300c1d5b28bceae71df1c763b434dc640436

git switch -c principio

git checkout principio

o también puedes restaurar la rama master hasta el commit del video de esta forma:

git reset --hard 2e56300c1d5b28bceae71df1c763b434dc640436

y por ultimo instalar las dependencias:

  npm i

sin darme cuenta es lo que había estado haciendo al momento de crear aplicaciones con React.

Genial esto, y el useContext lo usamos para casos más específicos, me encanta.
Lo aceptaba, tener todo tan componetizado y tener que ir entrando a cada archivo, pero asi lo veo super super entendible y más mantenible.
¡Me encantó!

Repo

https://github.com/platzi/curso-react-patrones-render