# Reminder hooks

> **Info:** This is release candidate documentation for **Stream Chat React SDK v15**. For the latest stable version, see the [latest version (v14)](https://getstream.io/chat/docs/sdk/react/).

This hook reads the reminder of one message. It's exported from `stream-chat-react`.

Reminders and save for later are explained on [Reminders and save for later](https://getstream.io/chat/docs/sdk/react/v15/features/messaging/reminders-and-save-for-later/), and the reminder manager, `client.reminders`, on [Reminder manager](https://getstream.io/chat/docs/sdk/react/v15/reference/state/reminder-manager/).

The entry gives the signature, then:

- **Returns:** what the hook gives back.
- **Reads:** the store or the context it reads.
- **Re-renders:** what makes the component render again.
- **Needs:** where the component must sit, and what the hook does outside that place.

## useMessageReminder

Returns the reminder of a message.

```ts
useMessageReminder(messageId: string): Reminder | undefined
```

- **Returns:** the message's `Reminder` from `client.reminders`, or `undefined` when the message has none. A reminder without a time is a "save for later" bookmark.
- **Reads:** `client.reminders.state`, field `reminders`: the entry for `messageId`.
- **Re-renders:** when the message gets a reminder or loses it. Not when the reminder itself changes, such as its time or its countdown: those are in `reminder.state`, which you read with `useStateStore`.
- **Needs:** `Chat`. Throws outside it.

`MessageUI` calls it to decide whether to render `ReminderNotification`. A badge of your own reads the reminder, then its state:

```tsx
import type { ReminderState } from "stream-chat";
import {
  useMessageContext,
  useMessageReminder,
  useStateStore,
} from "stream-chat-react";

const reminderSelector = ({ remind_at, timeLeftMs }: ReminderState) => ({
  remindAt: remind_at,
  timeLeftMs,
});

export const ReminderBadge = () => {
  const { message } = useMessageContext();
  const reminder = useMessageReminder(message.id);
  const { remindAt, timeLeftMs } =
    useStateStore(reminder?.state, reminderSelector) ?? {};

  if (!reminder) return null;
  if (remindAt == null) return <span>Saved for later</span>;
  if (timeLeftMs == null || timeLeftMs <= 0) return <span>Reminder due</span>;

  return <span>Due in {Math.ceil(timeLeftMs / 60000)} min</span>;
};
```

`timeLeftMs` is refreshed by the reminder's timer, more often as the time gets closer: [Reminder state and timers](https://getstream.io/chat/docs/sdk/react/v15/features/messaging/reminders-and-save-for-later/#reminder-state-and-timers) explains the schedule.

## Reminder stores without a hook

Read these stores with `useStateStore` and your own selector:

| To read                                 | Store and fields                                                                          |
| --------------------------------------- | ----------------------------------------------------------------------------------------- |
| One reminder's time and countdown       | `reminder.state`, `remind_at` and `timeLeftMs`, with the reminder from the hook           |
| The reminder list, across all channels  | `client.reminders.paginator.state`, `items`, `isLoading`, `hasMoreTail`, `lastQueryError` |
| The offered times and the timer setting | `client.reminders.configState`, `scheduledOffsetsMs` and `stopTimerRefreshBoundaryMs`     |

[Your own reminder list](https://getstream.io/chat/docs/sdk/react/v15/features/messaging/reminders-and-save-for-later/#your-own-reminder-list) builds a "Saved for later" screen on the paginator's store.

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v15/reference/hooks/reminder-hooks/](https://getstream.io/chat/docs/sdk/react/v15/reference/hooks/reminder-hooks/).