# ThreadContext

> **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/).

`ThreadContext` holds the thread a component renders in. [`Thread`](https://getstream.io/chat/docs/sdk/react/v15/component-reference/thread-list/thread/) provides it through `ThreadProvider`, and `useThreadContext()` reads it. Components that work in both a channel and a thread, such as `MessageList` and `MessageComposer`, use it to find the thread's message list and composer.

## Best practices

- Read it with `useThreadContext()`. It returns `undefined` outside a thread instead of throwing, so one component can render in a channel and in a thread.
- Let `Thread` provide it. `Thread` also loads the thread, checks that replies are on and gives the thread its own audio playback. `ThreadProvider` does none of these.
- Read the thread's state with `useStateStore(thread?.state, selector)`. The context value is the thread itself, and it changes only when the thread does.
- Inside a thread, read the channel with `useChannel()` and the composer with `useMessageComposerController()`. Both return the thread's.
- In a `ThreadList` row, use `useThreadListItemContext()`. Rows aren't inside a `Thread`, so `useThreadContext()` returns `undefined` there.

## Value

| Value         | Type                  | Description                                                                                               |
| ------------- | --------------------- | --------------------------------------------------------------------------------------------------------- |
| context value | `Thread \| undefined` | The `Thread` instance from `stream-chat`, or `undefined` outside a thread. It isn't wrapped in an object. |

`ThreadContextValue` is the type of the value. `ThreadContext` itself is exported too, so `useContext(ThreadContext)` returns the same as `useThreadContext()`.

## ThreadProvider

`ThreadProvider` sets the thread for its children. Render it yourself to give a thread to components outside its `Thread`. This toolbar shows the header of the open thread in the app's top bar:

```tsx
import type { Thread as StreamThread } from "stream-chat";
import { ThreadHeader, ThreadProvider } from "stream-chat-react";

export const ThreadToolbar = ({ thread }: { thread: StreamThread }) => (
  <ThreadProvider thread={thread}>
    <ThreadHeader />
  </ThreadProvider>
);
```

`ThreadHeader` reads the thread for its reply count and its close button, and its channel through `useChannel()`.

| Prop       | Type        | Default | Description                                                    |
| ---------- | ----------- | ------- | -------------------------------------------------------------- |
| `thread`   | `Thread`    | none    | The thread to provide. Without it, the context is `undefined`. |
| `children` | `ReactNode` | none    | The components that read the thread.                           |

## Related hooks

| Hook                         | Returns                                              |
| ---------------------------- | ---------------------------------------------------- |
| `useThreadContext()`         | the thread in context, or `undefined`                |
| `useThreadListItemContext()` | the thread of a `ThreadList` row, a separate context |

See [useThreadContext](https://getstream.io/chat/docs/sdk/react/v15/reference/hooks/state-and-entity-hooks/#usethreadcontext). The fields of `thread.state` are on [Thread and thread manager](https://getstream.io/chat/docs/sdk/react/v15/reference/state/thread-and-thread-manager/).

---

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