How to use @shopify/react-async - 4 common examples

function usePreload() {
    return useAsync(resolver, {assets: AssetTiming.NextPage}).load;
  }

const pass = `Pass number ${index} ${
            finished ? ' (this was the final pass)' : ''
          }`;
          const rendering = `Rendering took ${renderDuration}ms`;
          const resolving = `Resolving promises took ${resolveDuration}ms`;

          logger.log(pass);
          logger.log(rendering);
          logger.log(resolving);
        },
        ...options,
      });
      applyToContext(ctx, networkManager);

      const immediateAsyncAssets = asyncAssetManager.used(
        AssetTiming.Immediate,
      );
      const [styles, scripts] = await Promise.all([
        assets.styles({name: 'main', asyncAssets: immediateAsyncAssets}),
        assets.scripts({name: 'main', asyncAssets: immediateAsyncAssets}),
      ]);

      const response = stream(
        
          {app}
        ,
      );

      ctx.set(Header.ContentType, 'text/html');
      ctx.body = response;
    } catch (error) {
      const errorMessage = `React server-side rendering error:\n${error.stack ||

async function renderFunction(ctx: Context) {
    const logger = getLogger(ctx) || console;
    const assets = getAssets(ctx);

    const networkManager = new NetworkManager({
      headers: ctx.headers,
      cookies: ctx.request.headers.cookie || '',
    });
    const htmlManager = new HtmlManager();
    const asyncAssetManager = new AsyncAssetManager();
    const hydrationManager = new HydrationManager();

    function Providers({children}: {children: React.ReactElement}) {
      return (
        
          
            
              {children}
            
          
        
      );
    }

    try {
      const app = render(ctx);

if (mounted.current) {
          setDocument(resolved);
        }
      } catch (error) {
        throw Error('error loading GraphQL document');
      }
    }
  }, [documentOrAsyncDocument, mounted]);

  useEffect(() => {
    if (!document) {
      loadDocument();
    }
  }, [document, loadDocument]);

  useAsyncAsset(
    isDocumentNode(documentOrAsyncDocument)
      ? undefined
      : documentOrAsyncDocument.resolver.id,
  );

  return document;
}