> ## 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](/javascript/reference/client/create-dynamic-client)).

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](/javascript/reference/client/on-event)), 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.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={"system"}
    import { waitForClientInitialized } from '@dynamic-labs-sdk/client';

    await waitForClientInitialized();
    // Client is now ready
    ```
  </Tab>

  <Tab title="React">
    Use `useInitStatus` from [`@dynamic-labs-sdk/react-hooks`](/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 />;
    }
    ```
  </Tab>
</Tabs>

## 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`](/javascript/reference/react-hooks) for components that need to respond to init state, or [`useOnEvent`](/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.