# Reminders

The reactive list of the user's message reminders.

## Initialization

Call `registerSubscriptions()` once, so reminders follow their events, and load the list with `queryNextReminders()`. Reminders of loaded channels are also added by `channel.watch()` and `client.queryChannelsAndHydrate()`.

```js label="JavaScript"
client.reminders.registerSubscriptions();

await client.reminders.queryNextReminders();
```

After a reconnect, reminders of messages in active channels and channel lists are refreshed automatically. You have to reload the reminder list yourself, with `client.reminders.paginator.reload()`.

## Reading

```js label="JavaScript"
// Every known reminder, keyed by message id
const { reminders } = client.reminders.state.getLatestValue();

// The reminder list
const { items, isLoading, hasMoreTail } =
  client.reminders.paginator.state.getLatestValue();
```

Subscribe to render changes:

```js label="JavaScript"
const unsubscribe = client.reminders.state.subscribeWithSelector(
  (state) => ({ reminders: state.reminders }),
  ({ reminders }) => renderReminders([...reminders.values()]),
);
```

Each reminder has its own `state`. `timeLeftMs` counts down on its own, so subscribe to it to show when the reminder is due.

```js label="JavaScript"
const reminder = client.reminders.getFromState(messageId);

// Due date (nanoseconds) and time left (milliseconds), `null` without a due date
const reminderState = reminder?.state.getLatestValue();
console.log(reminderState?.remind_at, reminderState?.timeLeftMs);

const unsubscribeReminder = reminder?.state.subscribeWithSelector(
  ({ timeLeftMs }) => ({ timeLeftMs }),
  ({ timeLeftMs }) => renderDueIn(timeLeftMs),
);
```

## Configure the query

Set `filters` and `sort` on `client.reminders.paginator`, then load the list. Setting either one clears the loaded reminders. See [Message reminders](https://getstream.io/chat/docs/javascript/message-reminders/) for the filter and sort fields. A page is 10 reminders by default; change it with `updateConfig()`.

```js label="JavaScript"
client.reminders.paginator.filters = { channel_cid: { $eq: channel.cid } };
client.reminders.paginator.sort = [{ field: "remind_at", direction: 1 }];
client.reminders.paginator.updateConfig({ pageSize: 25 });

await client.reminders.queryNextReminders();
```

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/javascript/state-reminders/](https://getstream.io/chat/docs/javascript/state-reminders/).