React Suspense carga diferida sin respaldo

Question

Quiero cargar mis componentes de forma diferida para disminuir el tamaño de mi paquete inicial y obtener componentes sobre la marcha usando la división de código usando el enrutador de reacción.

Sin embargo, al usar React Suspense, lo obligan a usar un respaldo para cargar.
Esto no funcionaría:

const lazyLoadComponent = Component =>
    props => (
        <Suspense> // Missing fallback property
            <Component {...props} />
        </Suspense>
    );

En mi caso, estoy procesando html desde el servidor, por lo que no quiero usar una ruleta.
¡Esto crearía un parpadeo inútil en mi pantalla! Es decir:

• Cargas HTML
• Aparece el marcador de posición
• PageComponent para la ruta se carga
• Tengo mi propio control giratorio que carga un feed desde el componente de la página.

En mi caso, el html corresponde al componente de reacción que se carga.

¿Hay algún truco conocido para solucionar fácilmente este problema (excepto para crear un cargador para cualquier ruta que copie el html (!!), que por cierto, haría que la carga diferida fuera inútil).

Estoy un poco disgustado con "obligarnos" a agregar un cargador y no entiendo la lógica detrás de la decisión de hacerlo obligatorio.

Answer 1

Intente usar la división de código en los documentos

fallbackprops es solo un elemento React, puede configurarlo para null.

<Suspense fallback={null}>
    <ComponentImportedByLazy />
</Suspense>

Answer 2

Creé un problema para esto en Github:https://github.com/facebook/react/issues/19715

No hay una solución limpia actual usando React-Router / React.
Sin embargo, esto está previsto en una versión futura utilizando el modo concurrente. Como lo menciona Dan Abramov:

Con respecto a su solicitud de función concreta, creo que puedo reformularla de manera ligeramente diferente. No es que desee un "retroceso opcional", ya que no tendría sentido para las nuevas pantallas (tenemos que mostrar algo). Lo que creo que está buscando es una forma de omitir mostrar el respaldo si el contenido ya está en HTML. Así es precisamente como se comporta React en modo concurrente, por lo que la solicitud de función ya está implementada (y eventualmente se convertirá en el comportamiento predeterminado en una versión estable).

Para mí no es un problema esperar, por lo que actualmente omitiré la carga diferida de las rutas ya que se trata de un proyecto de pasatiempo y tengo tiempo para esperar un lanzamiento futuro.