Composición de Componentes en React: Principios y Prácticas

Curso de React.js: Patrones de Render y Composición

Contenido del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

19
Patrones de Render en React.js: Principios y Técnicas Avanzadas
01:44 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:29

Composición de Componentes en React: Principios y Prácticas

Curso de React.js: Patrones de Render y Composición

Clase 3 de 19

Clase 3 / 19

Recursos

Construir aplicaciones en React que sean fáciles de leer, mantener y modificar no depende de escribir código brillante, sino de aplicar patrones que priorizan la flexibilidad por encima de la elegancia. La composición de componentes es uno de esos patrones fundamentales y, combinada con una buena estrategia de colocación del estado, transforma la manera en que organizamos nuestros proyectos.

¿Qué es la composición de componentes y por qué importa?

La composición de componentes es un principio que establece que cada componente debe cumplir una tarea muy específica, pero sin dictar exactamente cómo se consumirá su resultado [01:00]. En lugar de que un componente decida internamente qué contenido renderiza, le delega esa responsabilidad al componente que lo invoca.

Por ejemplo, en una aplicación como TodoMachine, el componente TodoList podría iterar internamente sobre los elementos y renderizarlos él mismo. Esa sería la forma "por defecto" de pensar. Sin embargo, con composición usamos la propiedad children [02:18]: el componente padre —digamos App— es quien define qué irá dentro de TodoList.

El componente TodoList solo provee estructura y estilos.
El componente App decide la maquetación interna.
Cambiar el contenido de TodoList se vuelve trivial.

Esta separación nos da libertad para reutilizar, integrar y modificar componentes sin efectos colaterales inesperados.

¿Dónde colocar el estado con el principio de máxima cercanía?

Antes de reorganizar los componentes, hay que resolver un detalle crucial: dónde vive el estado. A esto se le conoce como state colocation o colocación del estado [03:05].

¿Qué dice el principio de máxima cercanía a la relevancia?

El estado debe estar tan cerca como sea posible del lugar donde se usa y se actualiza [03:15]. Si un estado solo lo consume TodoHeader, ahí debe vivir. Pero cuando varios componentes lo necesitan, el estado sube al componente padre más cercano que los envuelva a todos, que normalmente es App.

¿Cómo separar componentes stateful y stateless?

Otro principio complementario es no mezclar lógica de estado con maquetación [03:50]. Los componentes stateless solo reciben props y renderizan interfaz. Los componentes stateful gestionan estado propio. Cuando un componente necesita ambas cosas, la solución es dividirlo en dos: uno que maneje el estado y otro que solo se ocupe de la UI.

Aunque a primera vista estos dos principios parecen contradecirse, pueden convivir si se comprenden a fondo [04:15]. La recomendación práctica —atribuida al profesor Richard Kaufman [04:40]— es diseñar desde lo más grande hacia lo más específico: partir de App, identificar las secciones principales (TodoHeader, TodoList) y luego examinar qué vive dentro de cada una.

¿Cómo evitar prop drilling sin usar React Context?

Cuando la comunicación entre App y sus componentes nietos o bisnietos requiere pasar props por cada nivel intermedio, normalmente pensamos en React Context con providers, consumers y el hook useContext [06:05]. Pero la composición ofrece una alternativa sorprendente.

Si App es quien define el contenido de TodoList y TodoHeader mediante children, entonces los componentes internos como TodoCounter, TodoSearch o TodoItem se declaran directamente dentro de App [07:25]. Esto significa que App puede pasarles las props sin intermediarios.

No hay capas extra de complejidad.
No necesitas providers ni consumers.
Leer un solo archivo te muestra la estructura completa de la aplicación.
Cualquier persona nueva en el proyecto entiende el flujo rápidamente.

¿Cuándo sí conviene usar React Context?

La composición tiene un límite práctico [08:40]. Cuando la aplicación crece tanto que App tendría miles de líneas de código con niveles profundísimos de anidación, mantener todo en un solo archivo se vuelve insostenible. En ese punto, React Context entra en escena para distribuir el estado entre componentes agrupados por secciones.

Lo importante es que la composición no desaparece al incorporar Context [09:20]. Ambos patrones se complementan: Context agrupa secciones grandes de la aplicación, y dentro de cada sección la composición sigue organizando la estructura interna. Incluso en aplicaciones enormes, cada nivel puede aprovechar la composición para mantener el código legible y flexible.

React, de hecho, prefiere el código aburrido —fácil de reemplazar y entender— por encima del código elegante que resulta difícil de modificar [00:10]. Aplicar composición con una estrategia clara de colocación del estado es exactamente eso: código que no impresiona por su ingenio, pero que te permite mover, cambiar y escalar tu aplicación con confianza. ¿Ya aplicas composición en tus proyectos? Comparte en los comentarios cómo organizas tus componentes.

Fernando Quinteros Gutierrez

Hace 5 años

🥷 Qué es composición de componentes y colocación del estado

Apuntes

La Composición de componentes indica que cada componente debe darnos mucha libertad para elegir donde y como usarlo
Cada componente debe realizar una tarea en específica, pero no debe de decirnos como usar esa solución que nos brinda, debe de ser flexible al momento de utilizarlo
- Nos permitirá
  1. Tener componentes mucho más fáciles de integrar al resto de componentes
  2. Nos facilitará reutilizar o hacer cambios en nuestros componentes

Ejemplo

Una solución para renderizar una tarea podría ser este componente

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

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

Existe otra forma de realizar esta tarea, y es que el componente App tenga también la tarea de renderizar cada tarea, esta manera nos dará mayor flexibilidad con el componente de TodoList

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

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

Colocación del estado

¿Dónde va tu estado?

Máxima cercanía a la relevancia
- El estado ira según al área donde se aplique el mismo
Stateful vs. stateless
- Se refiere a no tener revuelo entre componentes que manejan lógica y estado con los componentes que solo renderizan elementos

Se puede usar ambos principios siempre si los entendemos muy bien

Pensar en lo más grande y poco a poco ir a lo más especifico

¿Necesitas React Context?

Al usar composición de componentes puede ser una alternativa interesante en caso de que el árbol de componentes no sea demasiado profundo.

Ventajas

No será necesario pasar props por cada componente intermedio entre donde se encuentre el dato inicialmente hasta su destino
Podrás entender la aplicación con entender lo que está pasando en un archivo

Ejemplo

const App = () => {
	const [state, setState] = useState();
	return (
		<>
			<TodoHeader>
				<TodoCounter />
				<TodoSearch onSearch={setState} />
			</TodoHeader>
			<TodoList>
				{state.todos.map(todo => <TodoItem {...todo} {...state} />)}
			</TodoList>
		</>
	);
}

Puedes observar que el componente se puede comunicar sin mucha complicación directamente con sus componentes hijos, nietos o incluso bisnietos.

De esta manera se está reduciendo la complejidad de los componentes intermedios
Además que se puede observar legibilidad con solo ver un archivo
Pero esta manera es insostenible en el caso que el árbol de componentes sea muy grande, pero aún se puede utilizar composición de componentes al utilizar React context

David Molina

Hace 4 años

Que buen resumen, muchas gracias por tomarte el tiempo de compartir.

Pablo Lucas

Hace 4 años

Gracias por el resumen

Comentarios (91)91 comentarios

Juan Castro

Profesor

Santiago Lopera Naranjo

Ricardo Martin

Diego De Jesus Del Cid Guerra

Juan Pablo Jimenez

Natalia Gutierrez

Marlon Gonzalez

Arturo Mauricio Terceros Beltrán

Omar Gabriel Aguilar Moscoso

Christian Boffill

Edixon javier Pabon Lizcano

Danilo Francisco Espinoza Pino

Samuel Miranda Martínez

David Gonzalez

Brian Sánchez Izquierdo

Reinaldo Mendoza

Jesus Bohorquez

Santiago Ventura

Obed Paz

César Palma

Alessandra Amicarella

Jhoana España Urresty

Gabriel Hernández Valdez

Isaac Godinez Cortes

Vicente Millan

Xamir E Rojas

Introducción

Patrones de Render en ReactJS: Mejora tu Código y Organización

Principios de Diseño de React: Filosofía y Aplicación Práctica

Composición de componentes

Composición de Componentes en React: Principios y Prácticas

Composición y Colocación de Estado en React con Patrones de Renderización

Optimización de Composición de Componentes en React

Composición Saludable con React Context en Aplicaciones React

Eliminación de React Context mediante Custom Hooks en React

Render props

Render Props y Render Functions en React: Patrones Avanzados

Render Props en React: Mejora de Componentes con Ejemplo de To-Do List

Validación y optimización de Render Props y Render Functions en React

Uso de React.Children y React.CloneElement para Composición Avanzada

High Order Components

Funciones y Componentes de Orden Superior en JavaScript y React

Práctica de High-Order Components en React

Sincronización de Cambios en React con StorageListener

Sincronización de Estados en React con Local Storage

Sincronización y validación de to-do list con local storage

React Hooks

Comparativa de Patrones: Render Props vs React Hooks

Conversión de HighOrder Components a Custom Hooks en ReactJS

Próximos pasos

Patrones de Render en React.js: Principios y Técnicas Avanzadas

Composición de Componentes en React: Principios y Prácticas

Progreso del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

Recursos

Recursos