📙
【React v19】use APIの基本的な使い方 ~コンテクスト編~
はじめに
こんにちは!
今回はReact v19で新しく追加されたuse
APIのコンテクスト(Context)に関する使い方について紹介しようと思います!
学んだことのアウトプットになりますので、コメントなどいただけますと幸いです!
対象読者
-
use
APIのコンテクストに関する概要・使い方を知りたい方
記事を読むメリット
-
use
APIのコンテクストに関する概要・使い方、メリットを知ることができる
結論
-
use
APIを使うことでuseContext
のようにコンテクストから値を読み取ることができる -
if
やfor
などの条件式の中でも呼び出すことができる
特徴
前提としてuseContext
の使い方をまだ学習されていない方は以下を参照してください。
簡単に説明すると、useContext
は親階層から子階層へのprops
のバケツリレーすることなく、グローバルに値を参照することができるReactフックです。
以下のライトモードとダークモードを切り替えるデモコードを例に説明していきます。
デモコード
import { useState, use, createContext } from "react";
import "./styles.css";
// コンテクストの設定
const ThemeContext = createContext({
theme: "light",
handleClick: () => {},
});
export default function App() {
const [theme, setTheme] = useState("light");
const handleClick = () => {
setTheme((prevTheme) => {
return prevTheme === "light" ? "dark" : "light";
});
};
const contextValue = {
theme,
handleClick,
};
return (
<ThemeContext.Provider value={contextValue}>
<Section />
</ThemeContext.Provider>
);
}
const Section = () => {
return (
<Panel title="モード切り替え">
<p>ボタンを押下するとライトモードとダークモードを切り替えられます</p>
<Button>モード切り替え</Button>
</Panel>
);
};
const Panel = ({ title, children }) => {
const { theme } = use(ThemeContext);
return (
<section className={theme}>
<h2>{title}</h2>
<HorizontalRule show={theme === "dark"} />
{children}
</section>
);
};
const Button = ({ children }) => {
const { handleClick } = use(ThemeContext);
return <button onClick={handleClick}>{children}</button>;
};
const HorizontalRule = ({ show }) => {
if (show) {
const { theme } = use(ThemeContext);
return <hr className={theme} />;
}
return false;
};
コンテクストから値を読み取ることができる
以下のようにuseContext
と同様の書き方ができます。
// ...
export default function App() {
// ...
return (
<ThemeContext.Provider value={contextValue}>
<Section />
</ThemeContext.Provider>
);
}
// ...
const Panel = ({ title, children }) => {
// `useContext`と同様の書き方ができる
const { theme } = use(ThemeContext);
return (
<section className={theme}>
<h2>{title}</h2>
{children}
</section>
);
};
if
やfor
などの条件式の中でも呼び出すことができる
以下のようにif
やfor
などの条件式の中でも呼び出すことができます。
// ...
const HorizontalRule = ({ show }) => {
if (show) {
const { theme } = use(ThemeContext);
return <hr className={theme} />;
}
return false;
};
まとめ
まとめるとuse
APIは以下のような特徴があります。
-
useContext
のようにコンテクストから値を読み取ることができる -
if
やfor
などの条件式の中でも呼び出すことができる
また、ドキュメントにも記載がありますが、条件式でも使えるという柔軟性からuseContext
より優先的に使用するのが良さそうです。
コンテクストが use に渡された場合、useContext と同様に動作します。useContext はコンポーネントのトップレベルで呼び出す必要がありますが、use は if や for などの条件式の中でも呼び出すことができます。use はより柔軟であるため、useContext よりも優先的に使用してください。
参考
Discussion