---
title: entry.client.tsx
order: 4
---

# entry.client.tsx

[MODES: framework]

## Summary

<docs-info>
This file is optional
</docs-info>

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][server-entry]

This is the first piece of code that runs in the browser. You can initialize any other client-side code here, such as client side libraries, add client only providers, etc.

```tsx filename=app/entry.client.tsx
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import { HydratedRouter } from "react-router/dom";

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

## Generating `entry.client.tsx`

By default, React Router will handle hydrating your app on the client for you. You can reveal the default entry client file with the following:

```shellscript nonumber
npx react-router reveal
```

[server-entry]: ./entry.server.tsx