16. Context API

`React.createContext` plus a provider lets deeply nested components (like a wallet-connected address needed on many screens) read shared state without threading props through every level.

import { createContext, useContext, useState } from "react";

const WalletContext = createContext<{ address: string | null }>({ address: null });

function WalletProvider({ children }: { children: React.ReactNode }) {
  const [address] = useState<string | null>("0xabc123");
  return <WalletContext.Provider value={{ address }}>{children}</WalletContext.Provider>;
}

function useWallet() {
  return useContext(WalletContext);
}

Context is great for low-frequency, broadly shared values (theme, auth, connected wallet); for high-frequency updates, a dedicated state library often performs better.

Read in another language

How to study this topic

Scoring

Check your understanding

Badges