---
created: 2024-04-11 15:30
updated: 2024-04-11 15:52
---
## Container / Presentational Pattern

- Contenedor de lógica 
- Contenedor más chico que sólo se encarga de mostrar la información al usuario

## Satic Rendering

- Crear el renderizado al momento de compilación

## Static import

- Esto importa todo el código en un archivo final (bundle) de gran tamaño

## Mejorar tiempos de carga

### Import on interaction

No es necesario cargar todo de golpe, cargar cuando son necesarias:

- Eager: inmediatamente, el default
- Lazy (route-based): cuando el usuario cargo la ruta
- Lazy (on interaction): en respuesta a una acción del usuario (Ej: click)
- Lazy (in viewport): cuando el  usuario scrollee cerca del componente
- prefetch: cargar cuando sea necesario, pero despues de lo cŕitico

Utilizar estrategias como `React.lazy` que permite separar JS en distintos chunhs y cargarlos bajo demanda

Utilizar librerías como IntersectorObserver para viewport lazy loading
## Misc

Long tasks: tareas que toman más de 50 milisegundos (se puede comprobar con dev tools)