import { use, Suspense, createContext } from "react";
const ThemeContext = createContext("light");
const greetingCache = new Map<string, Promise<string>>();
Read promises and context directly during render with React's built-in use hook.
import { createContext, useContext, useState, type ReactNode } from "react";
type TabsState = { activeTab: string; setActiveTab: (id: string) => void };
const TabsContext = createContext<TabsState | null>(null);
Build a Tabs component whose parts talk through context instead of cloning and inspecting children, so consumers can nest and reorder freely.
import { createContext, useContext, useSyncExternalStore } from "react";
type State = { count: number; user: { name: string } };
type Listener = () => void;
Build a selector hook on useSyncExternalStore so components only re-render when the slice of context state they read actually changes.