フロントエンドの定番ライブラリ「React 19」の新機能を紹介──新しいAPI

// テーマコンテキスト
const ThemeContext = createContext("light");
// テーマを変更するコンポーネント
function ThemeChanger() {
  const [theme, setTheme] = useState("light");
  return (
    <div>
      <button onClick={() => setTheme((prev) => (prev === "light" ? "dark" : "light"))}>
        テーマ変更
      </button>
      <ThemeContext value={theme}>
        <ThemeDisplay />
      </ThemeContext>
    </div>
  );
}
// テーマを使用するコンポーネント
function ThemeDisplay() {
  // const theme = useContext(ThemeContext); // 従来の useContext を使った書き方 ... (1)
  const theme = use(ThemeContext); // React 19～の use を使った書き方 ...(2)
  return <p>テーマ: {theme}</p>;
}
function App() {
  return <ThemeChanger />;
}

// テーマを使用するコンポーネント
function ThemeDisplay() {
  if (someCondition) {
    return null; // 早期リターン
  }
  const theme = use(ThemeContext); // 早期リターン後は、useContextはNGだが、useならOK
  return <p>テーマ: {theme}</p>;
}

const ThemeContext = React.createContext("light");
function App() {
  return (
    // <ThemeContext.Provider value="dark"> {/* React 18 までの書き方 */}
    //   <ThemeDisplay />
    // </ThemeContext.Provider>
    <ThemeContext value="dark"> {/* React 19 以降の書き方 */}
      <ThemeDisplay />
    </ThemeContext>
  );
}

import { use, Suspense } from "react";

function DataDisplay({ dataPromise }) {
  // useを使ってPromiseからデータを取り出す
  // ※Promiseが未解決の間は中断されてSuspenseのフォールバックが表示される
  const dataContent = use(dataPromise);
  return <p>データ: {dataContent}</p>;
}

export function DataContainer({ dataPromise }) {
  return (
    // Promiseが未解決の間はフォールバックが表示される
    <Suspense fallback={<p>読み込み中...</p>}>
      <DataDisplay dataPromise={dataPromise} />
    </Suspense>
  );
}