1. この記事について
React公式の状態管理機能であるContext APIの使い方メモです
ReactとRemixでの利用について書きます
2. Context APIとは
prop drillingダルいよね
という時にReact標準で使えるstate管理機能です
Reduxと似たようなことが出来るようです
3. ReactでContext APIを使う
以下の3つのステップでstateを共有できます
- 渡したいstateや更新する為の関数を定義したContextを作る
- Contextを渡す範囲をProviderで指定する
- useContextでContextを呼び出してstateや関数を使う
3-1. ContextとProviderをつくる
React.createContextでContextを作り、これをProviderに組み込んで使います
context.tsx
import React, { useState, ReactNode } from 'react';
type CountContextType = {
count: number;
setCount: (newCount: number) => void;
} | null
export const CountContext = React.createContext<CountContextType>(null);
export function CountProvider({ children }: { children: ReactNode }) {
const [count, setCount] = useState<number>(0);
return (
<CountContext.Provider value={{ count, setCount }}>
{children}
</CountContext.Provider>
);
}
3-2. Contextを渡す範囲をProviderで指定する
Providerで囲んでやれば囲まれているすべてのコンポーネントでContextが利用可能になります
app.tsx
import { CountProvider } from './context'
export function App() {
return (
<CountProvider>
<ComponentA />
<ComponentB />
</CountProvider>
)
}
上記の場合はComponentAとComponentBで利用可能になります
直接でなく子コンポーネントや孫コンポーネントでも利用可能です
3-3. useContextで呼び出して利用する
useContextで作成済みのContextを呼んでくるとProviderを定義したときにvalueに渡した値や関数を受け取れます。useState単独でなく、複数のstateやもっと複雑な処理をする関数を作って共有することも出来ます
import { useContext } from 'react';
import { CountContext } from './context'
export default function ComponentA() {
const context = useContext(CountContext);
if (context === null) {
throw new Error('CountButton must be used within a CountProvider');
}
const { count, setCount } = context;
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={incrementCount}>Click me!</button>
<p>ComponentA {count}</p>
</div>
);
}
export default function ComponentB() {
const context = useContext(CountContext);
if (context === null) {
throw new Error('CountButton must be used within a CountProvider');
}
const { count, setCount } = context;
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={incrementCount}>Click me!</button>
<p>ComponentB {count}</p>
</div>
);
}
同じstateを共有しているのでどちらをクリックしても両方がカウントアップされるようになりました
4. RemixでContext APIを使う
RemixのNested Routeのようにナビゲーションやサイドバーとメイン画面を分けて書くときもContext APIが使えます
4-1. ContextとProviderをつくる
ここは同じです
4-2. Contextを渡す範囲をProviderで指定する
Providerで囲んでやれば良いのは同じです
/root.tsx
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import "./tailwind.css";
import React, { useContext } from 'react';
import { CountProvider, CountContext } from './routes/context'
function Header() {
const context = useContext(CountContext);
if (context === null) {
throw new Error('CountButton must be used within a CountProvider');
}
const { count } = context;
return (
<header>
<nav>
へっだー部分です: { count }
</nav>
</header>
)
}
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<CountProvider>
<Header />
{children}
</CountProvider>
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
export default function App() {
return <Outlet />;
}
4-3. useContextで呼び出して利用する
後は使いたいコンポーネントで呼び出して使うだけです
/routes/_index.tsx
import { useContext } from 'react';
import { CountContext } from './context'
export default function Index() {
const context = useContext(CountContext);
if (context === null) {
throw new Error('CountButton must be used within a CountProvider');
}
const { count, setCount } = context;
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={incrementCount}>Click me!</button>
<p>本文部分です {count}</p>
</div>
);
}
できました
5. まとめ
prop drillingに悩まされていたのが解消できそうです
また、Contextを分けて書いておけるのが分かりやすく、リファクタリングや設計変更でアプリのコンポーネント構造が変わるときにもすごく役立ちそう
コンポーネント内でのみ使うstateは普通にコンポーネントで書いておく方が簡単なので、使い分けるのが良さげです