Tengo una lista de componentes (~50-100), estos componentes son bastante avanzados; contienen muchos elementos secundarios que obviamente requiere un poco de esfuerzo para extraerlos.
El resultado es que la interfaz de usuario se "congela" de 1 a 2 segundos al navegar a la página; en realidad, se congela antes de llegar a la página.
La interfaz de usuario también es un poco lenta cuando se cargan todos los componentes.
Estoy pensando que debería ser posible cargarlos en trozos de alguna manera. O solo dibuje el componente completo si es visible en la pantalla de alguna manera, y tenga un componente de esqueleto cuando no esté en la ventana gráfica.
¿Cuál es el enfoque recomendado aquí?
Gracias por adelantado.
Debes evitar los renders inútiles con memo.
Tenga cuidado de no llamar a las API sin ningún motivo.
También debe usar useCallback y useMemo para evitar los métodos de llamada que devuelven el mismo valor para los componentes secundarios.
La API de contexto es una buena opción para evitar los estados de exploración como accesorios para componentes anidados.
También puede usar la carga diferida para representar los componentes secundarios junto con el desplazamiento.