> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Initializing the Dynamic Client

Before this: create a Dynamic client (see [Creating a Dynamic Client](https://docs.dynamic.xyz/docs/javascript/reference/client/create-dynamic-client.md)).

By default, the Dynamic Client will be automatically initialized when you create it, but if you wish to manually
initialize the client, you can set `autoInitialize` to false and then call `initializeClient` manually.

You can wait until the client is ready by listening for `initStatusChanged` with status `'finished'` (see [onEvent](https://docs.dynamic.xyz/docs/javascript/reference/client/on-event.md)), or by using the `waitForClientInitialized` helper function.

## Waiting for initialization

The `waitForClientInitialized` function returns a promise that resolves when the client has finished initializing. This is useful when you need to ensure the client is ready before performing operations.

> [tab] JavaScript
>
> ```javascript theme={"system"}
> import { waitForClientInitialized } from '@dynamic-labs-sdk/client';
>
> await waitForClientInitialized();
> // Client is now ready
> ```

> [tab] React
>
> Use `useInitStatus` from [`@dynamic-labs-sdk/react-hooks`](https://docs.dynamic.xyz/docs/javascript/reference/react-hooks) so your UI re-renders as initialization progresses:
>
> ```tsx theme={"system"}
> import { useInitStatus } from '@dynamic-labs-sdk/react-hooks';
>
> export function App() {
>   const { data: initStatus } = useInitStatus();
>
>   if (initStatus === 'uninitialized' || initStatus === 'in-progress') {
>     return <LoadingState />;
>   }
>
>   if (initStatus === 'failed') {
>     return <ErrorState />;
>   }
>
>   return <YourApp />;
> }
> ```

## Usage

Manual initialization uses the same `createDynamicClient` and `initializeClient` flow in React and plain JavaScript (typically in a client module that runs once, e.g. `dynamicClient.ts`).

```javascript theme={"system"}
import {
  createDynamicClient,
  initializeClient
} from '@dynamic-labs-sdk/client';

const dynamicClient = createDynamicClient({
  ...
  autoInitialize: false,
});

await initializeClient();
```

## Client init status events

You can listen to the `initStatusChanged` event using the `onEvent` method.

### Listening to the client init status changes

```javascript theme={"system"}
import { onEvent } from '@dynamic-labs-sdk/client';

onEvent({
  event: 'initStatusChanged',
  listener: ({ initStatus }) => {
    console.log('initStatus: ', initStatus);
  },
});
```

In React, prefer [`useInitStatus`](https://docs.dynamic.xyz/docs/javascript/reference/react-hooks) for components that need to respond to init state, or [`useOnEvent`](https://docs.dynamic.xyz/docs/javascript/reference/client/on-event#react-patterns) if you need the raw `initStatusChanged` payload in a hook-friendly way.

### Available statuses

* `'uninitialized'` - The client initialization has not started yet.
* `'in-progress'` - The client initialization is in progress.
* `'finished'` - The client initialization has finished.
* `'failed'` - The client initialization has failed.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.