import { useState , useLayoutEffect , useContext , useRef } from 'react' ; import { unstable_batchedUpdates as batchedUpdates } from 'react-dom' ; import type { LoadState } from '../../clientTypes' ; import { dataCacheCtx , setDataCacheCtx } from './ssr/ctx' ; import { usePageModule } from './state' ; export default function useAppState ( routePath ) { const dataCache = useContext ( dataCacheCtx ) ; const setDataCache = useContext ( setDataCacheCtx ) ; const [ loadState , setLoadState ] = useState < LoadState > ( ( ) => { if ( dataCache [ routePath ] ) { return { type : 'loaded' , routePath , } ; } if ( routePath === '/internal-404-page' ) { return { type : '404' , routePath , } ; } return { type : 'loading' , routePath , } ; } ) ; const onLoadState = ( type , routePath , error ? ) => setLoadState ( { type , routePath , error } ) ; const loading = usePageModule ( routePath ) ; const loadingRef = useRef < Promise < any > | undefined > ( ) ; useLayoutEffect ( ( ) => { loadingRef . current = loading ; if ( ! loading ) { onLoadState ( '404' , routePath ) ; } else { if ( dataCache [ routePath ] && ! import . meta . hot ) { onLoadState ( 'loaded' , routePath ) ; } else { onLoadState ( 'loading' , routePath ) ; loading . then ( ( page ) => loading === loadingRef . current && batchedUpdates ( ( ) => { onLoadState ( 'loaded' , routePath ) ; setDataCache ( ( prev ) => ( { ... prev , [ routePath ] : page . default , } ) ) ; } ) , ( error ) => loading === loadingRef . current && onLoadState ( 'load-error' , routePath , error ) ) ; } } } , [ loading ] ) ; return loadState ; }