How to use @shopify/react-hydrate - 2 common examples

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);
      await extract(app, {

function Async(props: Props) {
    const {resolved: Component, load, loading, error} = useAsync(resolver, {
      scripts: scriptTiming,
      styles: stylesTiming,
      immediate: !deferred,
    });

    const {current: startedHydrated} = useRef(useHydrationManager().hydrated);

    if (error) {
      return renderError(error);
    }

    let loadingMarkup: ReactNode | null = null;

    if (progressivelyHydrated && !startedHydrated) {
      loadingMarkup = (
        
      );
    } else if (loading) {
      loadingMarkup = ;
    }

    let contentMarkup: ReactNode | null = null;