[system] Updated entry.client.tsx for remix-with-typescript example app

[58bits]

Would be happy to submit this as a PR as well...

Here's an updated entry.client.tsx file for the remix-with-typescript example app, based on the latest Remix QuickStart and React 18 (using hyrdrateRoot as opposed to hydrate)

Not sure about entry.server.tsx yet as emotion does not support renderToPipeableStream?

emotion-js/emotion#2800

import React, { useState} from 'react'
import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import { CacheProvider } from '@emotion/react';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import ClientStyleContext from './ClientStyleContext';
import createEmotionCache from './createEmotionCache';
import theme from './theme';

interface ClientCacheProviderProps {
  children: React.ReactNode;
}

function ClientCacheProvider({ children }: ClientCacheProviderProps) {
  const [cache, setCache] = useState(createEmotionCache());

  const clientStyleContextValue = React.useMemo(
    () => ({
      reset() {
        setCache(createEmotionCache());
      },
    }),
    [],
  );

  return (
    <ClientStyleContext.Provider value={clientStyleContextValue}>
      <CacheProvider value={cache}>{children}</CacheProvider>
    </ClientStyleContext.Provider>
  );
}

const hydrate = () => {
  startTransition(() => {
    hydrateRoot(
      document,
      <ClientCacheProvider>
        <ThemeProvider theme={theme}>
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          <CssBaseline />
          <StrictMode>
            <RemixBrowser />
          </StrictMode>
        </ThemeProvider>
      </ClientCacheProvider>,
    );
  });
};

if (window.requestIdleCallback) {
  window.requestIdleCallback(hydrate);
} else {
  // Safari doesn't support requestIdleCallback
  // https://caniuse.com/requestidlecallback
  window.setTimeout(hydrate, 1);
}

[mnajdova]

Thanks @58bits would you like to create a PR with the proposed changes, so that we can change the example as a whole?

[58bits]

@mnajdova - sure!

[58bits]

@mnajdova - #35092

[mnajdova]

Thanks! I will test it out next week and provide feedback on the PR.