React · Theory

React Context API

Theory

89/94

React Context API

The ‘new’ Context API (16.3+) is createContext + Provider + Consumer/useContext. It replaced the barely-used legacy contextTypes API. Today you almost always useContext, not <Theme.Consumer>.

value should be stable when possible — a new {{}} object every render makes all consumers update. Memoize the value or split contexts (theme vs user).

React Context API — on screen — Asha. Deep child reads user without five prop layers.

Diagram

Provider value
      │
      ▼
  deep child
   useContext

Exam tip

New vs legacy + stable Provider value.

Example

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

const Auth = createContext(null);

export default function App() {
  const [user, setUser] = useState({ name: "Asha" });
  return (
    <Auth.Provider value={{ user, setUser }}>
      <Who />
    </Auth.Provider>
  );
}

function Who() {
  const { user } = useContext(Auth);
  return <p>{user.name}</p>;
}

React Context API — on screen: Asha. Deep child reads user without five prop layers.

Short notes

DefAPI : createContext + Provider + useContext.
RuleOld : contextTypes.
RememberPerf : stable value object.

// Context API import { createContext, useContext, useState } from "react"; const Auth = createContext(null); export default function App() { const [user, setUser] = useState({ name: "Asha" }); return ( <Auth.Provider value={{ user, setUser }}> <Who /> </Auth.Provider> ); } function Who() { const { user } = useContext(Auth); return <p>{user.name}</p>; }

React Context API

Example

Short notes

Questions

React Context API

Example

Short notes

Questions