---
source: https://iinventedlight.com/library/notes/react-context.md
title: "Passing data deeply with context in React"
license: CC-BY-4.0
license_url: https://creativecommons.org/licenses/by/4.0/
source_license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS); prose restates or closely paraphrases cited source lines"
license_family: react-docs-ccby
rule_check: "needs rule check (family not in auto-publish rule; check.mjs auto-approves only usgov and arxiv-ccby)"
attribution: "Summary by iinventedlight (AI-assisted). Sources: React docs (react.dev), Passing Data Deeply with Context – React, CC BY 4.0 (reactjs/react.dev LICENSE-DOCS); React docs (react.dev), useContext – React, CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)."
author: "iinventedlight (synthesis of cited sources); text drafted with AI assistance"
date: 2026-11-04
status: published
checked_on: 2026-11-04
as_of: 2026-11-04
confidence: medium
untested: "No code was run for this note; only the fetched documentation pages were read."
category: coding-references
topic_area: "code-ai-eng: React"
tags: ['react', 'context', 'hooks']
sources:
  - id: S1
    title: "Passing Data Deeply with Context – React"
    publisher: React docs (react.dev)
    url: https://react.dev/learn/passing-data-deeply-with-context
    accessed: 2026-11-04
    license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)"
  - id: S2
    title: "useContext – React"
    publisher: React docs (react.dev)
    url: https://react.dev/reference/react/useContext
    accessed: 2026-11-04
    license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)"
---
# Passing data deeply with context in React

**Answer:** Context lets the parent component make some information available to any component in the tree below it—no matter how deep—without passing it explicitly through props. (S1)

## When props get awkward

- Usually, you will pass information from a parent component to a child component via props. (S1)
- Passing props can become verbose and inconvenient when you need to pass some prop deeply through the tree, or if many components need the same prop. (S1)

## Reading it with useContext

- useContext is a React Hook that lets you read and subscribe to context from your component. (S2)
- Call useContext at the top level of your component to read and subscribe to context. (S2)
- The context itself does not hold the information, it only represents the kind of information you can provide or read from components. (S2)
- The returned value is determined as the value passed to the closest SomeContext above the calling component in the tree. (S2)
- If there is no such provider, then the returned value will be the defaultValue you have passed to createContext for that context. (S2)

## Claims
- id: C1
  claim: Context reaches any depth without props.
  source: S1
  evidence: "no matter how deep—without passing it explicitly through props."
- id: C2
  claim: Deep prop passing is verbose.
  source: S1
  evidence: "Start by passing props."
- id: C3
  claim: useContext reads and subscribes to context.
  source: S2
  evidence: "Call useContext at the top level of your component to read and subscribe to context."
- id: C4
  claim: The context does not hold the information.
  source: S2
  evidence: "The context itself does not hold the information"

## Sources
- [S1] Passing Data Deeply with Context – React. React docs (react.dev). https://react.dev/learn/passing-data-deeply-with-context . License: CC BY 4.0 (reactjs/react.dev LICENSE-DOCS). Accessed 2026-11-04.
- [S2] useContext – React. React docs (react.dev). https://react.dev/reference/react/useContext . License: CC BY 4.0 (reactjs/react.dev LICENSE-DOCS). Accessed 2026-11-04.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted).