React useContext
React Context
React Contextは、状態をグローバルに管理する方法です。
useStateフックと併用することで、useState単独よりも簡単に、深くネストしたコンポーネント間でステートを共有することができます。
問題
stateは、stateへのアクセスを必要とするスタック内の最上位の親コンポーネントによって保持される必要があります。
例として、ネストされたコンポーネントが多数あるとします。スタックの最上部と最下部のコンポーネントは状態にアクセスする必要があります。
コンテキストなしでこれを行うには、ネストされた各コンポーネントを介して状態を「props」として渡す必要があります。これを「prop drilling」といいます。
例：
ネストされたコンポーネントを介して「props」を渡します。:
import { useState } from "react";
import ReactDOM from "react-dom/client";
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<>
<h1>{
Hello ${user}!}</h1>
<Component2 user={user} />
</>
);
}
function Component2({ user }) {
return (
<>
<h1>Component 2</h1>
<Component3 user={user} />
</>
);
}
function Component3({ user }) {
return (
<>
<h1>Component 3</h1>
<Component4 user={user} />
</>
);
}
function Component4({ user }) {
return (
<>
<h1>Component 4</h1>
<Component5 user={user} />
</>
);
}
function Component5({ user }) {
return (
<>
<h1>Component 5</h1>
<h2>{Hello ${user} again!}</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);コンポーネント2～4はその状態を必要としないにもかかわらず、コンポーネント5に届くように状態を渡さなければいけませんでした。
ソリューション
解決策は、コンテキストを作成することです。
コンテキストの作成
コンテキストを作成するには、createContextをインポートして初期化する必要があります。:
import { useState, createContext } from "react";
import ReactDOM from "react-dom/client";
const UserContext = createContext()
次に、Context Providerを使用して、state Contextを必要とするコンポーネントのツリーをラップします。
Context Provider
Context Providerで子コンポーネントをラップし、state valueを提供します。
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{
Hello ${user}!}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}これで、このツリー内のすべてのコンポーネントがユーザー コンテキストにアクセスできるようになります。
useContextフックを使用します。
子コンポーネントでContextを使用するには、useContextフックを使用してそれにアクセスする必要があります。
まず、インポート ステートメントにuseContextを含めます。：
import { useState, createContext, useContext } from "react";
これで、すべてのコンポーネントのユーザー コンテキストにアクセスできるようになります。
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{
Hello ${user} again!}</h2>
</>
);
}完全な例
例：
React Contextを使用した完全な例を次に示します。
import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";
const UserContext = createContext();
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{
Hello ${user}!}</h1>
<Component2 />
</UserContext.Provider>
);
}
function Component2() {
return (
<>
<h1>Component 2</h1>
<Component3 />
</>
);
}
function Component3() {
return (
<>
<h1>Component 3</h1>
<Component4 />
</>
);
}
function Component4() {
return (
<>
<h1>Component 4</h1>
<Component5 />
</>
);
}
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{Hello ${user} again!}</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);