React · Theory

Context in React

Theory

35/94

Context in React

Context skips prop drilling. createContext, wrap a tree in Provider value={…}, read with useContext in a child. Theme, current user, locale are classic. Don’t put fast-changing data (every keystroke of a form) in Context at the root — every consumer re-renders.

If only one child needs the value, pass a prop. Context is for ‘many deep children, rarely changes’ or ‘truly global concerns’.

Context in React — on screen — dark. Label did not get a theme prop. Provider sat above it.

Diagram

Provider value
      │
      ▼
  deep child
   useContext

Exam tip

When to use vs a prop. Re-render warning.

Example

// Context
import { createContext, useContext } from "react";

const Theme = createContext("light");

function Label() {
  const theme = useContext(Theme);
  return <span>{theme}</span>;
}

export default function App() {
  return (
    <Theme.Provider value="dark">
      <Label />
    </Theme.Provider>
  );
}

Context in React — on screen: dark. Label did not get a theme prop. Provider sat above it.

Short notes

DefProvider + useContext.
Usetheme / auth / locale.
Trapall app state in one context.

// Context import { createContext, useContext } from "react"; const Theme = createContext("light"); function Label() { const theme = useContext(Theme); return <span>{theme}</span>; } export default function App() { return ( <Theme.Provider value="dark"> <Label /> </Theme.Provider> ); }

Context in React

Example

Short notes

Questions

Context in React

Example

Short notes

Questions