> ## 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.

# onEvent

# onEvent

Adds an event listener for Dynamic client events. Use this to react to authentication state changes, wallet updates, and other client events.

## Usage

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

const removeListener = onEvent({
  event: 'walletAccountsChanged',
  listener: ({ walletAccounts }) => {
    console.log('Wallet accounts changed:', walletAccounts);
  },
});

// Later, remove the listener when done
removeListener();
```

## Parameters

| Parameter  | Type                       | Description                                                             |
| ---------- | -------------------------- | ----------------------------------------------------------------------- |
| `event`    | `string`                   | The event name to listen for.                                           |
| `listener` | `Function`                 | The callback function to execute when the event fires.                  |
| `client`   | `DynamicClient` (optional) | The Dynamic client instance. Only required when using multiple clients. |

## Returns

`() => void` - A function that can be called to remove the listener.

## Examples

### Track wallet account changes

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

const WalletTracker = () => {
  useEffect(() => {
    const removeListener = onEvent({
      event: 'walletAccountsChanged',
      listener: ({ walletAccounts }) => {
        console.log('Current wallets:', walletAccounts.length);
        walletAccounts.forEach((wallet) => {
          console.log(`- ${wallet.address} (${wallet.chain})`);
        });
      },
    });

    return () => {
      removeListener();
    };
  }, []);

  return <div>Tracking wallet changes...</div>;
};
```

<Note>
  This example uses React; the JavaScript SDK is framework-agnostic and can be used with any frontend or in Node.
</Note>

### Multiple event listeners

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

const setupEventListeners = () => {
  const removeWalletListener = onEvent({
    event: 'walletAccountsChanged',
    listener: ({ walletAccounts }) => {
      updateWalletUI(walletAccounts);
    },
  });

  const removeAuthListener = onEvent({
    event: 'logout',
    listener: () => {
      clearUserSession();
    },
  });

  // Return cleanup function
  return () => {
    removeWalletListener();
    removeAuthListener();
  };
};
```

## Common Events

| Event                   | Description                                     |
| ----------------------- | ----------------------------------------------- |
| `initStatusChanged`     | Fired when client initialization status changes |
| `logout`                | Fired when user logs out                        |
| `tokenChanged`          | Fired when token (jwt) changes                  |
| `userChanged`           | Fired when user changes                         |
| `walletAccountsChanged` | Fired when wallet accounts change               |

You can use `initStatusChanged` with status `'finished'` to wait until the client is ready before calling other SDK methods. See [Initializing the Dynamic Client](/javascript/reference/client/initialize-dynamic-client) for init statuses.

## React patterns

### Subscription in useEffect

Return the unsubscribe function directly from `useEffect` — no need for `offEvent`. Or use `useOnEvent` from [`@dynamic-labs-sdk/react-hooks`](/javascript/reference/react-hooks) to handle the subscription and cleanup automatically:

```tsx theme={"system"}
import { useOnEvent } from '@dynamic-labs-sdk/react-hooks';

function LogoutLogger() {
  useOnEvent({ event: 'logout', listener: () => console.log('User logged out') });
  return null;
}
```

### Reactive state

For SDK state that should trigger re-renders (wallet accounts, user, init status, session), use the hooks from [`@dynamic-labs-sdk/react-hooks`](/javascript/reference/react-hooks) — they subscribe to the relevant events internally:

```tsx theme={"system"}
import { useUser, useGetWalletAccounts, useInitStatus } from '@dynamic-labs-sdk/react-hooks';

function Dashboard() {
  const { data: user } = useUser();
  const { data: walletAccounts = [] } = useGetWalletAccounts();
  const { data: initStatus } = useInitStatus();
  // re-renders automatically when user, wallets, or init status change
}
```

## Related functions

* [offEvent](/javascript/reference/client/off-event) - Unsubscribe from events