En el siguiente código, Sample usa una función async para obtener algunos datos. Usaré esos datos para actualizar la tienda Redux para que cualquier componente pueda acceder al nombre de username dentro de la aplicación.
const resource = fetchData(); function Sample() { // throws a promise when retrieving data const name = resource.read(); const dispatch = useDispatch(); dispatch(setUsername(name)); const username = useSelector((state) => state.username); return <div>User: {username}</div>; } <Suspense fallback="loading...."> <Sample /> </Suspense> Aquí, supongamos que no hay forma de que mi aplicación pueda continuar sin el nombre de usuario. Bueno, <Suspense> en el nivel principal logra eso hasta que se recuperan los datos del recurso. Sin embargo, hay una pequeña brecha entre el envío del evento Redux y el componente <Sample> re-render donde se muestra User: en lugar de loading.... (el evento no fuerce el re-render inmediatamente para que el nombre de username esté vacío). Veré el siguiente contenido en la página web en el mismo orden
loading.... --> User: --> User: Srinesh
Entonces, mi requisito es mostrar la loading.... hasta que se actualice la tienda. En la página web, espero ver,
loading.... --> User: Srinesh
¿Hay alguna manera de lograr esto sin usar otra condición en el nivel del componente <Sample> para mostrar la loading.... si el nombre de usuario es null ?
El primer problema es que el envío en medio de la lógica de representación de componentes es un efecto secundario, y nunca debe hacerlo.
Un lugar más seguro para colocarlo sería en un useLayoutEffect , que se enviará tan pronto como el componente termine de renderizarse, pero forzará una nueva renderización sincrónica antes de que el navegador tenga la oportunidad de pintar. Así no verás el flash.