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 { useState, useTransition } from "react";
export const FilterableList = ({ items }: { items: string[] }) => {
const [text, setText] = useState("");
const [visible, setVisible] = useState(items);Mark an expensive state update as a transition so React keeps typing responsive and only shows the update once it is ready.
import { useState, useDeferredValue, useMemo } from "react";
const filterItems = (items: string[], query: string) =>
items.filter((item) => item.toLowerCase().includes(query.toLowerCase()));
Defer expensive list re-renders behind fast keystrokes with useDeferredValue, and show a stale-content hint while it catches up.
import { useSyncExternalStore } from "react";
const EVENTS = ["online", "offline"] as const;
const subscribe = (onStoreChange: () => void) => {Subscribe a component to state that lives outside React, like navigator.onLine, without ever showing a torn snapshot mid-render.