Ofrece componentes reutilizables como List, Edit, Create y más para funcionalidades CRUD. Integra layouts, rutas, APIs, autenticación y más.
---
Las listas son una parte integral de la mayoría de las aplicaciones web porque ayudan a mostrar los datos en un formato más presentable.
Pero, cuando una aplicación intenta manejar demasiados datos en una lista, a menudo genera problemas de rendimiento.
En esta guía, describiremos algunos problemas asociados con las listas infladas, luego veremos cinco métodos diferentes que puede usar para superar estos desafíos de rendimiento en las aplicaciones React.
Tabla de contenido:
- Problemas de rendimiento con listas grandes
- Paginación
- Scroll infinito
- react-virtualized
- react-window
- React ViewPort List 🤜🤛🤓💕😍
Los principios SOLID y el Código Limpio son dos conceptos importantes con los que todo desarrollador debería estar familiarizado.
Veamos cómo estos conceptos se pueden aplicar a React, y también vamos a discutir algunos de los Code Smells más comunes en React.
SOLID es un acrónimo de cinco principios de diseño que fueron introducidos por primera vez por Robert C. Martin en su libro “Agile Software Development, Principles, Patterns, and Practices”.
---
Una solución (truco)...
¿Cuál es la diferencia con el hook useEffect?
useLayoutEffect es similar en casi TODO a useEffect, solo tiene pequeñas diferencias, la diferencia entre ambos radica en el momento en que el efecto definido en el callback es ejecutado de forma asíncrona o síncrona...
⚠️ Advertencia ⚠️
Recuerda que useLayoutEffect se ejecuta de manera síncrona después de que se tenga el render del componente, pero ANTES de ser pintado en pantalla.
---⚠️ Todo lo que hagas con este hook hará que el paint del componente tarde más de lo esperado, lo cual puede afectar el performance.
La esencia de la programación funcional reactiva es especificar el comportamiento dinámico de un valor al momento de su declaración.
¿Pero qué significa esto?
Cuando hacemos PFR intentamos definir cómo el valor de una variable va a ir cambiando a través del tiempo al momento de declarar dicha variable. Puede resultar un poco extraño imaginar cómo luciría código de esta naturaleza, porque JavaScript no nos provee primitivas para hacer definiciones de este tipo.
---
Comprender para qué se optimiza cada uno de ellos es esencial para ayudarlo a elegir entre ellos...
2. Chakra UI
3. React Bootstrap
4. Ant Design
5. Semantic UI React
Chakra Comparación
Extra👉 https://chakra-ui.com/docs/comparison
La pelea entre Material UI y Chakra UI es grande, Chakra UI en muchas características le gana a Material UI y a otros, pero dado que Chakra UI usa CSS-in-JS bajo el capó ( emotion+ styled-system), esta flexibilidad tiene un pequeño precio a pagar cuando se trata de tiempo de ejecución. Esta huella de tiempo de ejecución es causada por los cálculos de estilo styled-systemy la generación de className por parte de emotion.
---