Composición de componentes

La composición de componentes es un patrón que permite crear componentes de manera flexible para que se puedan usar en diferentes lugares y de diferentes maneras.

• Ejemplo sin composición de componentes.

  const App = () => (
  	<TodoList todos={todos} />
  );
  

  const TodoList = ({todos}) => (
  	<section>
  		{todos.map(todo => (
  			<TodoItem {...todo} />
  		))}
  	</section>
  )
  

• Ejemplo con composición de componentes.

  const TodoList = ({children}) => (
  	<section>
  		{children}
  	</section>
  );
  

  const App = () => (
  	<TodoList>
  		{todos.map(todo => (
  			<TodoItem {...todo} />
  		))}
  	</TodoList>
  );
  

  <aside> 💡 Esta manera nos dará mayor flexibilidad sobre el componente de TodoList.

  </aside>

Colocación de estado

¿Dónde va tu estado?

• Máxima cercanía a la relevancia.

  El estado irá según al área donde se aplique el mismo.

  

  <aside> 💡 Cada componente puede tener su propio estado pero si empezamos a compartir el estado deberá ir en el componente padre mas cercano.

  </aside>

• Stateful vs. stateless.

  Se refiere a no tener revuelo entre componentes que manejan lógica y estado con los componentes que solo renderizan elementos.

Ejercicio de comprensión

<aside> 🗣 "Piensa en grande y ve gradualmente hacia lo específico." - Richard Kauffman

</aside>