entry.client

By default, Remix will handle hydrating your app on the client for you. If you want to customize this behavior, you can run npx remix reveal to generate a app/entry.client.tsx (or .jsx) that will take precedence. This file is the entry point for the browser and is responsible for hydrating the markup generated by the server in your server entry module, however you can also initialize any other client-side code here.

Typically, this module uses ReactDOM.hydrateRoot to hydrate the markup that was already generated on the server in your server entry module.

Here's a basic example:

import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <RemixBrowser />
    </StrictMode>
  );
});

This is the first piece of code that runs in the browser. You can initialize client side libraries, add client only providers, etc.