Componentes

¿Qué es?

Property Drilling: es un término para describir cuando se pasan props múltiples niveles a un componente anidado, a través de componentes que no lo necesitan.
 

- kentcdodds.com

Estados

Local State: es el que pertenece y afecta a un único componente. Debe ser manejado a través del estado interno del componente y de los hooks useState() y useReducer().

Estados

Cross Component State: Los datos se comparten y afectan a múltiples componentes. Son aquellos que se comparten de un componente padre a un hijo. Su manejo es a través de props.

Estados

App-Wide State: Es aquel que afecta a la aplicación entera, o a la mayoría de los componentes. Se maneja a través de Redux o Context.

Prop Drilling

Prop Drilling

🚘

🚘

🚘

☁️

🌞

☁️

 🚪 

🌳

🌳

🌳

Consecuencias

Beneficios: 
- Fácil de aprender e implementar (App pequeñas)

- La información se puede actualizar rápidamente con un State

Perjuicios: 

- Problemas de escalabilidad (App grandes)

- Aumentar el número de parámetros

- Parámetros que no usan todos los componentes

- Interferencia (no privados)

¿Soluciones?

Lifting State

🧳

Lifting State

Lifting State

☁️

🌞

☁️

🚘

🚘

🚘

 🚪 

🌳

🌳

🌳

¿Soluciones?

React Context

📦

Lifting State

🧳

React Context

React Context

☁️

🌞

☁️

🚚

🚘

🚘

🚘

 🚪 

🌳

🌳

🌳

Consecuencias

Beneficios: 
- Reusabilidad

- Escalabilidad

Perjuicios: 
- Estados globales ⚠️ (colisiones)

- Adiciona complejidad (también en Pruebas Unitarias)

- Cada consumidor debe ser "enganchado"
- Brodcast (implicito) Performance (App Grandes)

- Menor cantidad de propiedades

- Mantenimiento independiente

¿Soluciones?

Composition: 
- {children} JSX

- React.Children

👶

React Context

📦

Lifting State

🧳

Container Components

Container Components

🌳

🌳

🌳

☁️

🌞

☁️

🚘

🚘

🚘

 🚪 

Consecuencias

Beneficios: 
- Reusabilidad

- Escalabilidad

- Depuración

- Privacidad

Perjuicios: 
- Mayor cantidad de imports

- Compartir información entre componentes
  (a veces es mas complejo)

- Menor cantidad de propiedades

- Mantenimiento independiente

- Tamaño de paquetes

- SOLID

Diseño

Composición: 
Diseñar tus componentes pensando en lo que hacen

Herencia: 
Diseñar tus componentes pensando en lo que son

🐶🤖

🍚🔊🧽

Herencia

Composicion

🍚

💩

💢

Diseño

Composición: 
Diseñar tus componentes pensando en lo que hacen

Herencia: 
Diseñar tus componentes pensando en lo que son

🐶🤖

🍚🔊🧽

Proyecto

github.com/deinacademy/react-property-drilling

Conclusiones

Aprendimos a identificar el property drilling cuando es una mala práctica.

Cuando encontremos esta problemática, debemos analizar si se puede resolver con Lifting State, con un diseño de componentes usando Children o si requiere un App-Wide State.

Conclusiones

• Estudiar y actualizar herramientas
• Mantenerlas Organizadas
• Conocerlas para decidir cuál es la mejor para cada tarea

Palabras Clave

Property Drilling

Local State

App-Wide State

Cross-Component State

Lifting State

Context

Component Composition

Children

Container Components

Specialized Components

Composition

Inheritance

React Flow

vs

¡Gracias!

• FunFunFunctions: Composition over Inheritance
• Rishav Raj: What is React Prop Drilling and Context API
• Alihacks: A guide to React Context and useContext Hook
• LogRocket: A better way of solving prop drilling