---
# System prepended metadata

title: Using context
tags: [Context]

---

# Using context

> * 如有錯誤處指正或任何建議，懇請留言，感謝!
> * 搭配 ChatGPT 進行翻譯，請小心服用
> * ▸ ... 為英文原文


:::spoiler ...
Use context to pass data to child components without explicitly passing it through components (known as prop drilling). Context is useful to share data that is needed throughout the application components. For example styling information, application state, or currently logged-in user.

To use context you need three parts:

-   `createContext()`: this creates a serializable ID for the context. Make sure that this id is unique within your application.
-   `useContextProvider()`: At a parent component call this method to publish the context value. All children (and grandchildren) that are descendants of this component will be able to retrieve the context.
-   [`useContext()`](https://qwik.builder.io/docs/components/context/#usecontext) to retrieve the context and use it in any component.

In this example, we would like to pass the `TodosStore` to the `<Items>` component. Update the code to use [`useContext()`](https://qwik.builder.io/docs/components/context/#usecontext) to retrieve the value.

Contexts typically are stores, and as such, they must be serializable.

::: 


###### tags: `Context`