# Component State

URL: https://ark-ui.com/docs/guides/component-state
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/guides/component-state.mdx

Learn how to manage component state using Context and Provider components.

---

## Context Components

Context components expose state and functions to child components. In this example, `Avatar.Fallback` renders based on
`loaded` state.

<Example id="context" component="avatar" />

> **Good to know (RSC)**: Due to the usage of render prop, you might need to add the `'use client'` directive at the top
> of your file when using React Server Components.

## Provider Components

Provider components can help coordinate state and behavior between multiple components, enabling interactions that
aren't possible with `Context` components alone. They are used alongside component hooks.

<Example id="root-provider" component="accordion" />

> When using the `RootProvider` component, you don't need to use the `Root` component.

See more in [Examples](/examples/popover-selection).