# Custom Data

Attach custom key-value data to calls, users, events, and other SDK models.

## Best Practices

- Use JSON-serializable values only.
- Access custom data via `useCallCustomData()` hook for reactive updates.
- Set custom data during `getOrCreate()` or update with `call.update()`.

## Type definition

```typescript
export type Custom = {
  [key: string]: any; // where `any` should be JSON-serializable value
};
```

## Adding custom data

Adding extra data can be done through the Server-Side SDKs or through the Client SDKs.
In the Stream Video SDK, you can add extra data when creating/updating a user, event, reaction and other models.

As a simple example, let's see how you can add a new `topic` field to a `call` instance.

```typescript
const call = client.call(type, id);
await call.getOrCreate({
  data: { custom: { topic: "Monthly sync" } },
});

// or update a custom field
await call.update({
  custom: { topic: "Weekly sync" },
});
```

## Reading custom data

The custom data is exposed through the `custom` state property and `useCallCustomData()` hook:

```typescript
import { useEffect } from "react";
import { useCallStateHooks } from "@stream-io/video-react-sdk";

const { useCallCustomData } = useCallStateHooks();
const custom = useCallCustomData();

const topic = custom?.topic;
console.log("The topic of the current call is:", topic);

useEffect(() => {
  console.log("The topic is changed to:", custom?.topic);
}, [custom]);
```

---

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/v2/advanced/custom-data/](https://getstream.io/video/docs/react/v2/advanced/custom-data/).