関連

React のコンテキストは、propsを使わずに子コンポーネントに親のデータを渡す為に使います。これにより

  • 複数のコンポーネントから成り立つコンポーネント間のpropsが簡単になる

  • 子が特定の親の下に置かれてるどうか確認できる

などの利点があります。

コンテキストを作るにはReact.createContextを使います。これはデフォルトで渡されることになる値を引数として1つ受け取ります。

const Meta = React.createContext({title: 'blog title'});

このMetaはオブジェクトでProviderConsumer2つのコンポーネントを持っています。
まずProviderは渡すデータを置くために使います。データはこの要素のvalue属性に渡します。   次にConsumerは渡ってきた値を受け取る為の要素です。
Consumerは上位階層にProviderがある時、一番近いそれに渡された値を受け取りますが、もしProviderが1つも無い場合、コンテキストを作る時に渡したデフォルト値を受け取ります。注意なのがこのコンポーネントのchildrenはデータを引数に受け取る関数だという点です。

です。この例はProviderと通す時と通さない時の動作を見れるもので、それぞれpropsで何も値を渡していないのにapp titleblog titleと別の内容が表示されます。

const Meta = React.createContext({ title: "blog title" });

const Title = () => {
  return (
    
      {meta => {
        return 

{meta.title}

; }}
); }; const App = () => { return ( <> <Meta.Provider value={{ title: "app title" }}> <Title /> </Meta.Provider> </> ); }</code></pre><div class="relative flex justify-between text-sm" style="margin-top:-1.5rem"></div></div></div></div><div class="flex-auto w-full relative -z-1"></div></div><div class="md__paragraph-block flex"><div class="md__paragraph-helper flex-auto w-full hidden lg:flex justify-start box-border z-10"><div class="flex-none flex items-stretch w-full justify-end"><div class="md__paragraph-line h-full shadow-default py-1 mr-6 space-y-2 border-r-4 border-subBackgroud"><div class="relative z-30 flex flex-col"><div style="width:48px"></div></div></div></div></div><div class="flex-none w-full lg:w-paragraph z-10"><h3 id="useContext" class="part-of-markdown__heading part-of-markdown__heading--depth-3 break-all">useContext</h3></div><div class="flex-auto w-full relative -z-1"></div></div><div class="md__paragraph-block flex"><div class="md__paragraph-helper flex-auto w-full hidden lg:flex justify-start box-border z-10"><div class="flex-none flex items-stretch w-full justify-end"><div class="md__paragraph-line h-full shadow-default py-1 mr-6 space-y-2 border-r-4 border-subBackgroud"><div class="relative z-30 flex flex-col"><div style="width:48px"></div></div></div></div></div><div class="flex-none w-full lg:w-paragraph z-10"><p class="part-of-markdown__paragraph flex-none w-full"><code class="md__inline-code">Consumer</code>の代わりに、<code class="md__inline-code">useContext</code>フックを使う方法もあります。このフックを使って上記のコードを書き換えると<span class="md__html"><a href="https://codesandbox.io/s/pensive-water-c9tmc?fontsize=14&hidenavigation=1&theme=dark" target="_blank" rel="noopener">例<a href="https://codesandbox.io/s/context-with-hook-mhosl?fontsize=14&hidenavigation=1&theme=dark" target="_blank" rel="noopener">こう</a></span>なります。</p></div><div class="flex-auto w-full relative -z-1"></div></div><div class="md__paragraph-block flex"><div class="md__paragraph-helper flex-auto w-full hidden lg:flex justify-start box-border z-10"><div class="flex-none flex items-stretch w-full justify-end"><div class="md__paragraph-line h-full shadow-default py-1 mr-6 space-y-2 border-r-4 border-subBackgroud"><div class="relative z-30 flex flex-col"><div style="width:48px"></div></div></div></div></div><div class="flex-none w-full lg:w-paragraph z-10"><div class="md__code-package relative flex w-full"><button aria-label="コードをコピー" class="absolute right-0 top-0 hover:text-mutable-accent text-sm duration-100"><i class="svg-inline--fa far fa-copy"></i> <!-- -->コードをコピー</button><div class="md__code-editor flex-auto order-2 max-w-full overflow-hidden"><div class="md__code-tab-like inline-block text-sm"><i class="svg-inline--fa far fa-brackets-curly mr-2 text-mutable-accent"></i></div><pre class="md__code-block line-numbers p-2 pb-6 box-border overflow-auto"><code class="md__code">const Meta = React.createContext({ title: "blog title" }); const Title = () => { const meta = React.useContext(Meta); return <h1>{meta.title}</h1>; }; export default function App() { return ( <> <Title /> <Meta.Provider value={{ title: "app title" }}> <Title /> </Meta.Provider> </> ); }</code></pre><div class="relative flex justify-between text-sm" style="margin-top:-1.5rem"></div></div></div></div><div class="flex-auto w-full relative -z-1"></div></div><div class="md__paragraph-block flex"><div class="md__paragraph-helper flex-auto w-full hidden lg:flex justify-start box-border z-10"><div class="flex-none flex items-stretch w-full justify-end"><div class="md__paragraph-line h-full shadow-default py-1 mr-6 space-y-2 border-r-4 border-subBackgroud"><div class="relative z-30 flex flex-col"><div style="width:48px"></div></div></div></div></div><div class="flex-none w-full lg:w-paragraph z-10"><p class="part-of-markdown__paragraph flex-none w-full"><code class="md__inline-code">useContext</code>へは<code class="md__inline-code">Consumer</code>を渡すわけではなくコンテキストそのものを渡します。</p></div><div class="flex-auto w-full relative -z-1"></div></div><div class="md__paragraph-block flex"><div class="md__paragraph-helper flex-auto w-full hidden lg:flex justify-start box-border z-10"><div class="flex-none flex items-stretch w-full justify-end"><div class="md__paragraph-line h-full shadow-default py-1 mr-6 space-y-2 border-r-4 border-subBackgroud"><div class="relative z-30 flex flex-col"><div style="width:48px"></div></div></div></div></div><div class="flex-none w-full lg:w-paragraph z-10"><h3 id="考察" class="part-of-markdown__heading part-of-markdown__heading--depth-3 break-all">考察</h3></div><div class="flex-auto w-full relative -z-1"></div></div><div class="md__paragraph-block flex"><div class="md__paragraph-helper flex-auto w-full hidden lg:flex justify-start box-border z-10"><div class="flex-none flex items-stretch w-full justify-end"><div class="md__paragraph-line h-full shadow-default py-1 mr-6 space-y-2 border-r-4 border-subBackgroud"><div class="relative z-30 flex flex-col"><div style="width:48px"></div></div></div></div></div><div class="flex-none w-full lg:w-paragraph z-10"><p class="part-of-markdown__paragraph flex-none w-full"><code class="md__inline-code">memo</code>化されたコンポーネントの中で<code class="md__inline-code">useContext</code>を使っていると、<code class="md__inline-code">Context</code>の値を更新してもそのコンポーネントは再レンダリングされません。このことから<code class="md__inline-code">Context</code>の全ての値を更新することはオススメしないです。</p></div><div class="flex-auto w-full relative -z-1"></div></div><div class="md__paragraph-block flex"><div class="md__paragraph-helper flex-auto w-full hidden lg:flex justify-start box-border z-10"><div class="flex-none flex items-stretch w-full justify-end"><div class="md__paragraph-line h-full shadow-default py-1 mr-6 space-y-2 border-r-4 border-subBackgroud"><div class="relative z-30 flex flex-col"><div style="width:48px"></div></div></div></div></div><div class="flex-none w-full lg:w-paragraph z-10"><p class="part-of-markdown__paragraph flex-none w-full">僕的には<code class="md__inline-code">Context</code>へは何かキーの下にぶら下がれるオブジェクト値などを格納すると良いと思います。例えば以下のような感じです。</p></div><div class="flex-auto w-full relative -z-1"></div></div><div class="md__paragraph-block flex"><div class="md__paragraph-helper flex-auto w-full hidden lg:flex justify-start box-border z-10"><div class="flex-none flex items-stretch w-full justify-end"><div class="md__paragraph-line h-full shadow-default py-1 mr-6 space-y-2 border-r-4 border-subBackgroud"><div class="relative z-30 flex flex-col"><div style="width:48px"></div></div></div></div></div><div class="flex-none w-full lg:w-paragraph z-10"><div class="md__code-package relative flex w-full"><button aria-label="コードをコピー" class="absolute right-0 top-0 hover:text-mutable-accent text-sm duration-100"><i class="svg-inline--fa far fa-copy"></i> <!-- -->コードをコピー</button><div class="md__code-editor flex-auto order-2 max-w-full overflow-hidden"><div class="md__code-tab-like inline-block text-sm"><i class="svg-inline--fa far fa-brackets-curly mr-2 text-mutable-accent"></i></div><pre class="md__code-block line-numbers p-2 pb-6 box-border overflow-auto"><code class="md__code">const contextValues = { '/': { title: 'Top Page', description: '...' }, '/foo': { title: 'Foo Page', description: '...' }, }</code></pre><div class="relative flex justify-between text-sm" style="margin-top:-1.5rem"><div class="px-2 space-x-2"><button class="px-2 py-1 hover:text-mutable-accent duration-100"><i class="fak fa-codesandbox mr-1"></i>Codesandbox で開く</button></div></div></div></div></div><div class="flex-auto w-full relative -z-1"></div></div><div class="md__paragraph-block flex"><div class="md__paragraph-helper flex-auto w-full hidden lg:flex justify-start box-border z-10"><div class="flex-none flex items-stretch w-full justify-end"><div class="md__paragraph-line h-full shadow-default py-1 mr-6 space-y-2 border-r-4 border-subBackgroud"><div class="relative z-30 flex flex-col"><div style="width:48px"></div></div></div></div></div><div class="flex-none w-full lg:w-paragraph z-10"><p class="part-of-markdown__paragraph flex-none w-full">そしてこのキー(<code class="md__inline-code">path</code>)だけ Flux で管理して必要に応じて<code class="md__inline-code">useContext</code>を使っているコンポーネントに渡します。コンポーネントの中では渡された<code class="md__inline-code">path</code>を使い<code class="md__inline-code">useContext</code>から値を取り出して使います。</p></div><div class="flex-auto w-full relative -z-1"></div></div><div class="md__paragraph-block flex"><div class="md__paragraph-helper flex-auto w-full hidden lg:flex justify-start box-border z-10"><div class="flex-none flex items-stretch w-full justify-end"><div class="md__paragraph-line h-full shadow-default py-1 mr-6 space-y-2 border-r-4 border-subBackgroud"><div class="relative z-30 flex flex-col"><div style="width:48px"></div></div></div></div></div><div class="flex-none w-full lg:w-paragraph z-10"><div class="md__code-package relative flex w-full"><button aria-label="コードをコピー" class="absolute right-0 top-0 hover:text-mutable-accent text-sm duration-100"><i class="svg-inline--fa far fa-copy"></i> <!-- -->コードをコピー</button><div class="md__code-editor flex-auto order-2 max-w-full overflow-hidden"><div class="md__code-tab-like inline-block text-sm"><i class="svg-inline--fa far fa-brackets-curly mr-2 text-mutable-accent"></i></div><pre class="md__code-block line-numbers p-2 pb-6 box-border overflow-auto"><code class="md__code">const {title, description} = useContext(XxContext)[path];</code></pre><div class="relative flex justify-between text-sm" style="margin-top:-1.5rem"><div class="px-2 space-x-2"><button class="px-2 py-1 hover:text-mutable-accent duration-100"><i class="fak fa-codesandbox mr-1"></i>Codesandbox で開く</button></div></div></div></div></div><div class="flex-auto w-full relative -z-1"></div></div><div class="md__paragraph-block flex"><div class="md__paragraph-helper flex-auto w-full hidden lg:flex justify-start box-border z-10"><div class="flex-none flex items-stretch w-full justify-end"><div class="md__paragraph-line h-full shadow-default py-1 mr-6 space-y-2 border-r-4 border-subBackgroud"><div class="relative z-30 flex flex-col"><div style="width:48px"></div></div></div></div></div><div class="flex-none w-full lg:w-paragraph z-10"><p class="part-of-markdown__paragraph flex-none w-full">このようにすることで<code class="md__inline-code">memo</code>化されていても値を更新できますし、その第2引数を渡してない場合は、デフォルトで行われる浅い比較の回数も減らせれます。</p></div><div class="flex-auto w-full relative -z-1"></div></div></div></div></div></div></article><div class="flex justify-center space-x-4"></div></div></div></div><div class="my-8 space-y-16"><aside><section aria-labelledby="to-share" class="flex flex-col items-center space-y-4"><header><h2 id="to-share" class="text-3xl font-bold">シェアする</h2></header><div></div></section></aside><aside class="relative flex flex-col justify-center my-16"><div class="flex justify-center my-8 w-full transform -rotate-12"><div style="overflow:hidden;box-sizing:border-box;display:inline-block;position:relative;width:64px;height:64px"><img role="presentation" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" style="visibility:hidden;position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/></div></div><p class="flex items-center justify-center -mt-2 text-xl"><strong><span class="relative inline-flex items-center mx-2 pr-1">Dash<span class="absolute right-0 whitespace-pre text-xs font-normal" style="transform:translateX(96%);top:-14px"><i class="svg-inline--fa fas fa-asterisk" style="font-size:9px" aria-hidden="true"></i><span class="ml-2">Mac 用 ドキュメントブラウザ</span></span></span>からも参照できます!</strong></p><div style="display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0"><div style="box-sizing:border-box;display:block;max-width:100%"><img style="max-width:100%;display:block;margin:0;border:none;padding:0" alt="" aria-hidden="true" role="presentation" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTExIiBoZWlnaHQ9IjUwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="/></div><img alt="Dash docset の紹介画像" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" style="visibility:hidden;position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/></div><p class="flex items-center justify-center -mt-2 text-xl"><a class="button__container" role="button" href="dash-feed://https%3A%2F%2Fnju33.com%2Ffeeds%2Fnju33.xml" target="_blank" rel="noopener noreferrer"><div role="presentation" class="button__layout-presentation-foundation duration-100 bg-mutable-accent opacity-25 button/container-hover:opacity-0 button/container-disabled:bg-transparent button/container-.is-target:opacity-75 rounded shadow"></div><div role="presentation" class="button__layout-presentation-foundation duration-100 border-2 border-mutable-accent button/opacity-8 button/container-hover:button/opacity-33 button/container-disabled:button/opacity-8 button/container-.is-target:button/opacity-33 rounded shadow"></div><div class="button__layout xl:button__layout--large"><span class="button__icon xl:button__icon--large"><i class="svg-inline--fa far fa-cloud-download" aria-hidden="true"></i></span><span class="button__label xl:button__label--large">Dash に追加</span></div><div role="presentation" class="button__layout-presentation-foundation duration-100 bg-mutable-accent button/opacity-8 rounded shadow"></div></a></p></aside><div><section aria-label="Buy a 紅茶花伝" class="p-8"><div aria-label="buy me a coffee" class="m-auto bg-contain bg-center bg-no-repeat" style="width:200px;height:130px;background-image:url()"></div><div class="relative transform scale-75"><div class="nju33com__animation--eye" style="position:absolute;z-index:2;top:-33px;right:50%;transform:translate3d(50%, 0, 0);height:80px;width:76px;background-image:url(/images/eye.svg), url(/images/eye.svg);background-size:20px, 20px;background-repeat:no-repeat, no-repeat"></div><div style="position:absolute;z-index:1;top:-33px;right:50%;transform:translate3d(50%, 0, 0);height:80px;width:76px;background-image:url(/images/eye-white.svg), url(/images/eye-white.svg);background-size:33px, 33px;background-repeat:no-repeat, no-repeat;background-position:left center, right center"></div><div class="flex flex-col items-center space-y-2"><div style="overflow:hidden;box-sizing:border-box;display:inline-block;position:relative;width:200px;height:437px"><img alt="紅茶花伝" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" style="visibility:hidden;position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/></div><a href="https://www.buymeacoffee.com/nju33" target="_blank" rel="noopener noreferrer" class="text-invert flex flex-col items-center p-2 rounded-3xl shadow hover:opacity-75 duration-100" style="background:#ffdd04;width:200px"><span class="text-gray-800 text-xl font-bold space-x-2"><i class="svg-inline--fa far fa-dollar-sign" aria-hidden="true"></i><span>2</span></span></a></div></div></section></div><div class="flex justify-center"><div class="py-8 lg:py-0 px-8 lg:px-2 space-y-4 max-w-md m-auto lg:m-0"><div class="flex flex-col items-center justify-center space-y-2"><div class="inline-block"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGZpbGw9IiMzQzJGNDEiIGQ9Ik0wIDUxMkMwIDIyOS4yMyAyMjkuMjMgMCA1MTIgMHM1MTIgMjI5LjIzIDUxMiA1MTItMjI5LjIzIDUxMi01MTIgNTEyUzAgNzk0Ljc3IDAgNTEyeiIvPjxwYXRoIGZpbGw9IiNGMTdDNjciIGQ9Ik00NTQuODQ0IDE3NGMtNTMuMiAwLTkyLjggMjcuNi05Mi44IDc4IDAgNDYuOCAyNi44IDY3LjYgNzQuNCA4OGwxNCA2YzI0IDEwLjQgMzQuNCAxNy4yIDM0LjQgMzQgMCAxMy42LTEwLjQgMjQtMjYuOCAyNC0xNiAwLTI2LjQtNi44LTM2LTI0bC00My42IDI4YzE4LjQgMzIuNCA0NCA0NC44IDc5LjYgNDQuOCA1MCAwIDgyLTMyIDgyLTc0IDAtNDUuNi0yNi44LTY3LjItNjcuMi04NC40bC0xNC02Yy0yNS42LTExLjItNDAuOC0xOC00MC44LTM3LjIgMC0xNiAxNC44LTI3LjYgMzgtMjcuNiAyNy42IDAgNDMuMiAxNC40IDU1LjIgMzRsNDUuNi0yNi40Yy0xNi40LTMyLjQtNTAtNTcuMi0xMDItNTcuMnpNMjU3LjYgMTc0Yy00OS42IDAtODMuNiAyNi40LTgzLjYgODQuNHYxOTEuMmg1NlYyNTkuMmMwLTI4IDExLjYtMzUuMiAzMC0zNS4yIDE5LjIgMCAyNy4yIDEzLjIgMzYgMjguOGw0NS42LTI3LjZjLTEzLjItMjgtMzkuMi01MS4yLTg0LTUxLjJ6Ii8+PC9zdmc+" alt="Logo image" class="h-logo w-logo"/></div><div class="relative flex flex-col items-center justify-center space-x-2"><h1 class="inline-block m-0 mt-1 text-xl"><span class="font-nju33 text-3xl">純</span></h1></div></div><div class="text-sm space-y-2"><p><span class="inline-block">JavaScript</span> で飯食べたい歴約<!-- --> <!-- -->8<!-- --> 年、<!-- --> <span class="inline-block">純( nju33 )</span> による<span class="inline-block">ノート</span>サイトです。</p><div class="flex items-center space-x-4 p-4 pl-6 rounded shadow bg-warning"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i><div>このサイトではドリンク代や奨学金返済の為、広告などを貼らせて頂いてますがご了承ください。</div></div><ul class="pl-2 leading-7 text-sm flex flex-wrap"><li class="w-1/2 flex items-center space-x-1"><i title="github.com/" class="svg-inline--fa fab fa-github" aria-hidden="true"></i><a href="https://github.com/nju33" class="underline" target="_blank" rel="noopener noreferrer">nju33</a></li><li class="w-1/2 flex items-center space-x-1"><i title="twitter.com/" class="svg-inline--fa fab fa-twitter" aria-hidden="true"></i><a href="https://twitter.com/nju33_ki" class="underline" target="_blank" rel="noopener noreferrer">nju33_ki</a></li><li class="w-1/2 flex items-center space-x-1"><i title="pixiv.net/users/" class="svg-inline--fa fak fa-pixiv" aria-hidden="true"></i><a href="https://www.pixiv.net/users/14803297" class="underline" target="_blank" rel="noopener noreferrer">14803297</a></li><li class="w-1/2 flex items-center space-x-1"><i title="qiita.com/" class="svg-inline--fa fak fa-qiita" aria-hidden="true"></i><a href="https://qiita.com/nju33" class="underline" target="_blank" rel="noopener noreferrer">nju33</a></li><li class="w-1/2 flex items-center space-x-1"><i title="note.com/" class="svg-inline--fa fak fa-note" aria-hidden="true"></i><a href="https://note.com/nju33" class="underline" target="_blank" rel="noopener noreferrer">nju33</a></li><li class="w-1/2 flex items-center space-x-1"><i title="figma.com/" class="svg-inline--fa fak fa-figma" aria-hidden="true"></i><a href="https://www.figma.com/@742127" class="underline" target="_blank" rel="noopener noreferrer">@742127</a></li><li class="w-1/2 flex items-center space-x-1"><i title="figma.com/" class="svg-inline--fa fab fa-amazon" aria-hidden="true"></i><a href="https://www.amazon.co.jp/gp/registry/wishlist/287YLYBFDB5KS" class="underline text-xs" target="_blank" rel="noopener noreferrer">欲しい物</a></li><li class="w-1/2 flex items-center space-x-1"><i class="svg-inline--fa far fa-ellipsis-h" aria-hidden="true"></i><a class="underline" href="/about-nju33">もっと</a></li></ul></div></div></div><div class="flex justify-start mx-auto w-2/3" style="min-height:33vh"><section aria-labelledby="changelog-section" class="w-full"><header class="flex flex-col mb-6"><div class="hidden ml-1 text-sm space-x-2 lg:block"><i class="svg-inline--fa fas fa-rss text-mutable-accent" aria-hidden="true"></i><a href="/feeds/changelog/atom.xml" target="_blank" class="hover:text-mutable-accent duration-100">Atom 1.0</a><a href="/feeds/changelog/rss.xml" target="_blank" class="hover:text-mutable-accent duration-100">RSS 2.0</a></div><h2 id="changelog-header" class="text-3xl font-bold">Change Log</h2></header><div><div class="flex items-center justify-center p-8 w-full" style="min-height:300px"><i class="svg-inline--fa fad fa-spinner-third fa-spin text-xl"></i></div></div></section></div></div></div><div class="relative hidden flex-auto justify-end w-4/12 min-h-full lg:flex"></div></div></div><div class="w-sidebar absolute lg:fixed top-0 lg:top-auto lg:bottom-0 -left-sidebar order-1"><div class="flex px-4 py-2 w-full h-screen lelg:overflow-auto lg:items-end lg:ml-sidebar lg:w-sidebar"><div class="lg:max-h-full"><aside class="flex flex-col space-y-4"><div class="flex items-center"><div class="flex flex-col justify-center"><a class="button__container lg:button__container" href="/"><div role="presentation" class="button__layout-presentation-foundation duration-100 bg-mutable-accent opacity-25 button/container-hover:opacity-0 button/container-disabled:bg-transparent button/container-.is-target:opacity-75 rounded shadow"></div><div role="presentation" class="button__layout-presentation-foundation duration-100 border-2 border-mutable-accent button/opacity-8 button/container-hover:button/opacity-33 button/container-disabled:button/opacity-8 button/container-.is-target:button/opacity-33 rounded shadow"></div><div class="button__layout lg:button__layout--large"><span class="button__icon lg:button__icon--large"><i aria-hidden="true" class="fas fa-home"></i></span><span class="button__label lg:button__label--large">トップ</span></div><div role="presentation" class="button__layout-presentation-foundation duration-100 bg-mutable-accent button/opacity-8 rounded shadow"></div></a><a class="button__container" href="/search"><div role="presentation" class="button__layout-presentation-foundation duration-100 bg-mutable-accent opacity-25 button/container-hover:opacity-0 button/container-disabled:bg-transparent button/container-.is-target:opacity-75 rounded shadow"></div><div role="presentation" class="button__layout-presentation-foundation duration-100 border-2 border-mutable-accent button/opacity-8 button/container-hover:button/opacity-33 button/container-disabled:button/opacity-8 button/container-.is-target:button/opacity-33 rounded shadow"></div><div class="button__layout "><span class="button__icon"><i aria-hidden="true" class="fas fa-search"></i></span><span class="button__label">検索</span></div><div role="presentation" class="button__layout-presentation-foundation duration-100 bg-mutable-accent button/opacity-8 rounded shadow"></div></a></div></div><aside class="flex flex-col space-y-4"><div class="flex-auto"><button class="accordion__label cursor-pointer font-bold select-none duration-100"><i class="accordion__icon far fa-angle-down duration-100 ml-2 mr-2 cursor-pointer transform -rotate-90" aria-hidden="true"></i><i aria-hidden="true" class="far fa-books mr-2"></i><span>ノート</span></button><div class="accordion h-0 overflow-hidden"><div class="pl-6 pt-2 text-sm overflow-auto lg:max-h-collapsable"><ul class="flex flex-col m-0 lelg:mt-2 p-0 pl-2 space-y-2 lelg:space-y-4"></ul></div></div></div><div class="flex-auto"><button class="accordion__label cursor-pointer font-bold select-none duration-100"><i class="accordion__icon far fa-angle-down duration-100 ml-2 mr-2 cursor-pointer transform -rotate-90" aria-hidden="true"></i><i aria-hidden="true" class="far fa-browser mr-2"></i><span>内部アプリ</span></button><div class="accordion h-0 overflow-hidden"><div class="pl-6 pt-2 text-sm overflow-auto lg:max-h-collapsable"><ul class="flex flex-col m-0 lelg:mt-2 p-0 pl-2 space-y-2 lelg:space-y-4"><li><div class="group flex"><a class="hover:text-mutable-accent whitespace-pre overflow-hidden duration-100 overflow-ellipsis lg:w-1/2 xl:w-full" style="text-overflow:ellipsis" href="/apps/tailwindcss-color-generator">Tailwindcss Color Generator</a></div></li><li><div class="group flex"><a class="hover:text-mutable-accent whitespace-pre overflow-hidden duration-100 overflow-ellipsis lg:w-1/2 xl:w-full" style="text-overflow:ellipsis" href="/apps/minimum-tailwindcss-config-generator">Minimim Tailwindcss Config Generator</a></div></li><li><div class="group flex"><a class="hover:text-mutable-accent whitespace-pre overflow-hidden duration-100 overflow-ellipsis lg:w-1/2 xl:w-full" style="text-overflow:ellipsis" href="/apps/inline-script-generator">Inline Script Generator</a></div></li></ul></div></div></div><div class="flex-auto"><button class="accordion__label cursor-pointer font-bold select-none duration-100"><i class="accordion__icon far fa-angle-down duration-100 ml-2 mr-2 cursor-pointer transform -rotate-90" aria-hidden="true"></i><i class="far fa-map-marker-question mr-2"></i><span>その他</span></button><div class="accordion h-0 overflow-hidden"><div class="pl-6 pt-2 text-sm overflow-auto lg:max-h-collapsable"><ul class="flex flex-col m-0 lelg:mt-2 p-0 pl-2 space-y-2 lelg:space-y-4"><li><div class="group flex"><a class="hover:text-mutable-accent duration-100" href="https://bit.dev/nju33/com" target="_blank" rel="noopener noreferrer">Bit Components</a></div></li><li><div class="group flex"><a class="hover:text-mutable-accent duration-100" href="/privacy-policy">Privacy Policy</a></div></li></ul></div></div></div><div class="flex-auto"><button class="accordion__label cursor-pointer font-bold select-none duration-100"><i class="accordion__icon far fa-angle-down duration-100 ml-2 mr-2 cursor-pointer transform -rotate-90" aria-hidden="true"></i><i aria-hidden="true" class="far fa-user-cog mr-2"></i><span>設定</span></button><div class="accordion h-0 overflow-hidden"><div class="pl-6 pt-2 text-sm overflow-auto lg:max-h-collapsable"><div class="mt-2"><form class="space-y-4"><div class="flex flex-col space-y-2"><div class="flex flex-col space-y-2"><div class="flex flex-col items-start w-full space-x-2"><div class="flex flex-none"><label for="theme" class="font-bold">テーマ</label></div><div class="flex flex-auto items-center w-full space-x-2"><div class="flex flex-col space-y-1 xl:flex-row xl:space-x-2 xl:space-y-0"><label class="flex-auto p-1"><input type="radio" class="w-0 overflow-hidden" id="theme/theme" name="theme" value="Light"/><span role="presentation" class="inline-flex items-center justify-center mr-2 w-4 h-4 border-2 duration-100 rounded-full"><i class="svg-inline--fa fas fa-circle" style="width:0.5rem" aria-hidden="true"></i></span>Light</label><label class="flex-auto p-1"><input type="radio" class="w-0 overflow-hidden" id="theme/theme" name="theme" value="Dark"/><span role="presentation" class="inline-flex items-center justify-center mr-2 w-4 h-4 border-2 duration-100 rounded-full"><i class="svg-inline--fa fas fa-circle" style="width:0.5rem" aria-hidden="true"></i></span>Dark</label></div></div></div><div></div></div><div class="flex flex-col space-y-2"><div class="flex flex-col items-start w-full space-x-2"><div class="flex flex-none"><label for="language" class="font-bold">言語</label></div><div class="flex flex-auto items-center w-full space-x-2"><div class="flex flex-col space-y-1 xl:flex-row xl:space-x-2 xl:space-y-0"><label class="flex-auto p-1"><input type="radio" class="w-0 overflow-hidden" id="language/language" name="language" value="JP"/><span role="presentation" class="inline-flex items-center justify-center mr-2 w-4 h-4 border-2 duration-100 rounded-full"><i class="svg-inline--fa fas fa-circle" style="width:0.5rem" aria-hidden="true"></i></span>JP</label><label class="flex-auto p-1"><input type="radio" class="w-0 overflow-hidden" id="language/language" name="language" value="EN"/><span role="presentation" class="inline-flex items-center justify-center mr-2 w-4 h-4 border-2 duration-100 rounded-full"><i class="svg-inline--fa fas fa-circle" style="width:0.5rem" aria-hidden="true"></i></span>EN</label></div></div></div><div></div></div></div><button type="submit" class="px-2 py-1 hover:bg-mutable-accent border hover:border-mutable-accent rounded duration-100">保存</button></form></div></div></div></div></aside></aside><div class="ml-2 mt-4 text-center text-sm"><i class="svg-inline--fa fal fa-copyright mr-2"></i>nju33</div></div></div></div></div><div class="fixed z-50 bottom-notification right-notification"><aside data-component="dayo--queue" data-to="bottom" data-position="right" data-testid="dayo--queue"></aside></div><script type="application/ld+json">{"@context":"http://schema.org","@graph":[{"@type":"Organization","name":"nju33","url":"https://nju33.com","logo":"https://nju33.com/android-chrome-512x512.png","sameAs":["https://github.com/nju3","https://twitter.com/nju33_ki","https://www.pixiv.net/users/14803297","https://qiita.com/nju33","https://note.com/nju33","https://www.figma.com/@742127"]},{"@context":"https://schema.org/","@type":"WebSite","name":"nju33","url":"https://nju33.com","potentialAction":{"@type":"SearchAction","target":"https://nju33.com/search?type=article&search={search_term_string}","query-input":"required name=search_term_string"}},{"@type":"Person","name":"純","url":"https://nju33.com","image":"https://nju33.com/android-chrome-512x512.png","sameAs":"https://github.com/nju33","jobTitle":"Front-End Engineer"},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://nju33.com","name":"Top"}},{"@type":"ListItem","position":2,"item":{"@id":"https://nju33.com/notes/react/articles","name":"react"}},{"@type":"ListItem","position":3,"item":{"@id":"https://nju33.com/notes/react/articles/Context","name":"Context"}}]},{"@context":"https://schema.org","@type":"Article","headline":"Context","image":{"_tag":"Some","value":"https://dbnqtykvioe24.cloudfront.net/notes/react/articles/Context?theme=dark"},"author":{"@type":"Person","name":"nju33"},"publisher":{"@type":"Organization","name":"nju33","logo":{"@type":"ImageObject","url":"https://nju33.com/android-chrome-512x512.png"}}}]}</script></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"locale":"ja","article":{"title":"Context","labels":[],"notes":["react"],"content":[{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"React のコンテキストは、","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":16,"offset":16},"indent":[]}},{"type":"inlineCode","value":"props","position":{"start":{"line":2,"column":16,"offset":16},"end":{"line":2,"column":23,"offset":23},"indent":[]}},{"type":"text","value":"を使わずに子コンポーネントに親のデータを渡す為に使います。これにより","position":{"start":{"line":2,"column":23,"offset":23},"end":{"line":2,"column":57,"offset":57},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":57,"offset":57},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"複数のコンポーネントから成り立つコンポーネント間の","position":{"start":{"line":4,"column":3,"offset":61},"end":{"line":4,"column":28,"offset":86},"indent":[]}},{"type":"inlineCode","value":"props","position":{"start":{"line":4,"column":28,"offset":86},"end":{"line":4,"column":35,"offset":93},"indent":[]}},{"type":"text","value":"が簡単になる","position":{"start":{"line":4,"column":35,"offset":93},"end":{"line":4,"column":41,"offset":99},"indent":[]}}],"position":{"start":{"line":4,"column":3,"offset":61},"end":{"line":4,"column":41,"offset":99},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":59},"end":{"line":4,"column":41,"offset":99},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"子が特定の親の下に置かれてるどうか確認できる","position":{"start":{"line":5,"column":3,"offset":102},"end":{"line":5,"column":25,"offset":124},"indent":[]}}],"position":{"start":{"line":5,"column":3,"offset":102},"end":{"line":5,"column":25,"offset":124},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":100},"end":{"line":5,"column":25,"offset":124},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":59},"end":{"line":5,"column":25,"offset":124},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":"などの利点があります。","position":{"start":{"line":7,"column":1,"offset":126},"end":{"line":7,"column":12,"offset":137},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":126},"end":{"line":7,"column":12,"offset":137},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"コンテキストを作るには","position":{"start":{"line":9,"column":1,"offset":139},"end":{"line":9,"column":12,"offset":150},"indent":[]}},{"type":"inlineCode","value":"React.createContext","position":{"start":{"line":9,"column":12,"offset":150},"end":{"line":9,"column":33,"offset":171},"indent":[]}},{"type":"text","value":"を使います。これはデフォルトで渡されることになる値を引数として1つ受け取ります。","position":{"start":{"line":9,"column":33,"offset":171},"end":{"line":9,"column":73,"offset":211},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":139},"end":{"line":9,"column":73,"offset":211},"indent":[]}},{"type":"code","lang":"js","meta":null,"value":"const Meta = React.createContext({title: 'blog title'});","position":{"start":{"line":11,"column":1,"offset":213},"end":{"line":13,"column":4,"offset":279},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"この","position":{"start":{"line":15,"column":1,"offset":281},"end":{"line":15,"column":3,"offset":283},"indent":[]}},{"type":"inlineCode","value":"Meta","position":{"start":{"line":15,"column":3,"offset":283},"end":{"line":15,"column":9,"offset":289},"indent":[]}},{"type":"text","value":"はオブジェクトで","position":{"start":{"line":15,"column":9,"offset":289},"end":{"line":15,"column":17,"offset":297},"indent":[]}},{"type":"inlineCode","value":"Provider","position":{"start":{"line":15,"column":17,"offset":297},"end":{"line":15,"column":27,"offset":307},"indent":[]}},{"type":"text","value":"と","position":{"start":{"line":15,"column":27,"offset":307},"end":{"line":15,"column":28,"offset":308},"indent":[]}},{"type":"inlineCode","value":"Consumer","position":{"start":{"line":15,"column":28,"offset":308},"end":{"line":15,"column":38,"offset":318},"indent":[]}},{"type":"text","value":"2つのコンポーネントを持っています。","position":{"start":{"line":15,"column":38,"offset":318},"end":{"line":15,"column":56,"offset":336},"indent":[]}},{"type":"break","position":{"start":{"line":15,"column":56,"offset":336},"end":{"line":16,"column":1,"offset":339},"indent":[1]}},{"type":"text","value":"まず","position":{"start":{"line":16,"column":1,"offset":339},"end":{"line":16,"column":3,"offset":341},"indent":[]}},{"type":"inlineCode","value":"Provider","position":{"start":{"line":16,"column":3,"offset":341},"end":{"line":16,"column":13,"offset":351},"indent":[]}},{"type":"text","value":"は渡すデータを置くために使います。データはこの要素の","position":{"start":{"line":16,"column":13,"offset":351},"end":{"line":16,"column":39,"offset":377},"indent":[]}},{"type":"inlineCode","value":"value","position":{"start":{"line":16,"column":39,"offset":377},"end":{"line":16,"column":46,"offset":384},"indent":[]}},{"type":"text","value":"属性に渡します。  \n次に","position":{"start":{"line":16,"column":46,"offset":384},"end":{"line":17,"column":3,"offset":397},"indent":[1]}},{"type":"inlineCode","value":"Consumer","position":{"start":{"line":17,"column":3,"offset":397},"end":{"line":17,"column":13,"offset":407},"indent":[]}},{"type":"text","value":"は渡ってきた値を受け取る為の要素です。","position":{"start":{"line":17,"column":13,"offset":407},"end":{"line":17,"column":32,"offset":426},"indent":[]}},{"type":"break","position":{"start":{"line":17,"column":32,"offset":426},"end":{"line":18,"column":1,"offset":429},"indent":[1]}},{"type":"inlineCode","value":"Consumer","position":{"start":{"line":18,"column":1,"offset":429},"end":{"line":18,"column":11,"offset":439},"indent":[]}},{"type":"text","value":"は上位階層に","position":{"start":{"line":18,"column":11,"offset":439},"end":{"line":18,"column":17,"offset":445},"indent":[]}},{"type":"inlineCode","value":"Provider","position":{"start":{"line":18,"column":17,"offset":445},"end":{"line":18,"column":27,"offset":455},"indent":[]}},{"type":"text","value":"がある時、一番近いそれに渡された値を受け取りますが、もし","position":{"start":{"line":18,"column":27,"offset":455},"end":{"line":18,"column":55,"offset":483},"indent":[]}},{"type":"inlineCode","value":"Provider","position":{"start":{"line":18,"column":55,"offset":483},"end":{"line":18,"column":65,"offset":493},"indent":[]}},{"type":"text","value":"が1つも無い場合、コンテキストを作る時に渡したデフォルト値を受け取ります。注意なのがこのコンポーネントの","position":{"start":{"line":18,"column":65,"offset":493},"end":{"line":18,"column":117,"offset":545},"indent":[]}},{"type":"inlineCode","value":"children","position":{"start":{"line":18,"column":117,"offset":545},"end":{"line":18,"column":127,"offset":555},"indent":[]}},{"type":"text","value":"はデータを引数に受け取る関数だという点です。","position":{"start":{"line":18,"column":127,"offset":555},"end":{"line":18,"column":149,"offset":577},"indent":[]}}],"position":{"start":{"line":15,"column":1,"offset":281},"end":{"line":18,"column":149,"offset":577},"indent":[1,1,1]}},{"type":"paragraph","children":[{"type":"html","value":"\u003ca href=\"https://codesandbox.io/s/pensive-water-c9tmc?fontsize=14\u0026hidenavigation=1\u0026theme=dark\" target=\"_blank\" rel=\"noopener\"\u003e","position":{"start":{"line":20,"column":1,"offset":579},"end":{"line":20,"column":127,"offset":705},"indent":[]}},{"type":"text","value":"例","position":{"start":{"line":20,"column":127,"offset":705},"end":{"line":20,"column":128,"offset":706},"indent":[]}},{"type":"html","value":"\u003c/a\u003e","position":{"start":{"line":20,"column":128,"offset":706},"end":{"line":20,"column":132,"offset":710},"indent":[]}},{"type":"text","value":"です。この例は","position":{"start":{"line":20,"column":132,"offset":710},"end":{"line":20,"column":139,"offset":717},"indent":[]}},{"type":"inlineCode","value":"Provider","position":{"start":{"line":20,"column":139,"offset":717},"end":{"line":20,"column":149,"offset":727},"indent":[]}},{"type":"text","value":"と通す時と通さない時の動作を見れるもので、それぞれ","position":{"start":{"line":20,"column":149,"offset":727},"end":{"line":20,"column":174,"offset":752},"indent":[]}},{"type":"inlineCode","value":"props","position":{"start":{"line":20,"column":174,"offset":752},"end":{"line":20,"column":181,"offset":759},"indent":[]}},{"type":"text","value":"で何も値を渡していないのに","position":{"start":{"line":20,"column":181,"offset":759},"end":{"line":20,"column":194,"offset":772},"indent":[]}},{"type":"inlineCode","value":"app title","position":{"start":{"line":20,"column":194,"offset":772},"end":{"line":20,"column":205,"offset":783},"indent":[]}},{"type":"text","value":"、","position":{"start":{"line":20,"column":205,"offset":783},"end":{"line":20,"column":206,"offset":784},"indent":[]}},{"type":"inlineCode","value":"blog title","position":{"start":{"line":20,"column":206,"offset":784},"end":{"line":20,"column":218,"offset":796},"indent":[]}},{"type":"text","value":"と別の内容が表示されます。","position":{"start":{"line":20,"column":218,"offset":796},"end":{"line":20,"column":231,"offset":809},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":579},"end":{"line":20,"column":231,"offset":809},"indent":[]}},{"type":"code","lang":"jsx","meta":null,"value":"const Meta = React.createContext({ title: \"blog title\" });\n\nconst Title = () =\u003e {\n return (\n \u003cMeta.Consumer\u003e\n {meta =\u003e {\n return \u003ch1\u003e{meta.title}\u003c/h1\u003e;\n }}\n \u003c/Meta.Consumer\u003e\n );\n};\n\nconst App = () =\u003e {\n return (\n \u003c\u003e\n \u003cTitle /\u003e\n \u003cMeta.Provider value={{ title: \"app title\" }}\u003e\n \u003cTitle /\u003e\n \u003c/Meta.Provider\u003e\n \u003c/\u003e\n );\n}","position":{"start":{"line":22,"column":1,"offset":811},"end":{"line":45,"column":4,"offset":1191},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"useContext","position":{"start":{"line":47,"column":5,"offset":1197},"end":{"line":47,"column":15,"offset":1207},"indent":[]}}],"position":{"start":{"line":47,"column":1,"offset":1193},"end":{"line":47,"column":15,"offset":1207},"indent":[]}},{"type":"paragraph","children":[{"type":"inlineCode","value":"Consumer","position":{"start":{"line":49,"column":1,"offset":1209},"end":{"line":49,"column":11,"offset":1219},"indent":[]}},{"type":"text","value":"の代わりに、","position":{"start":{"line":49,"column":11,"offset":1219},"end":{"line":49,"column":17,"offset":1225},"indent":[]}},{"type":"inlineCode","value":"useContext","position":{"start":{"line":49,"column":17,"offset":1225},"end":{"line":49,"column":29,"offset":1237},"indent":[]}},{"type":"text","value":"フックを使う方法もあります。このフックを使って上記のコードを書き換えると","position":{"start":{"line":49,"column":29,"offset":1237},"end":{"line":49,"column":65,"offset":1273},"indent":[]}},{"type":"html","value":"\u003ca href=\"https://codesandbox.io/s/context-with-hook-mhosl?fontsize=14\u0026hidenavigation=1\u0026theme=dark\" target=\"_blank\" rel=\"noopener\"\u003e","position":{"start":{"line":49,"column":65,"offset":1273},"end":{"line":49,"column":195,"offset":1403},"indent":[]}},{"type":"text","value":"こう","position":{"start":{"line":49,"column":195,"offset":1403},"end":{"line":49,"column":197,"offset":1405},"indent":[]}},{"type":"html","value":"\u003c/a\u003e","position":{"start":{"line":49,"column":197,"offset":1405},"end":{"line":49,"column":201,"offset":1409},"indent":[]}},{"type":"text","value":"なります。","position":{"start":{"line":49,"column":201,"offset":1409},"end":{"line":49,"column":206,"offset":1414},"indent":[]}}],"position":{"start":{"line":49,"column":1,"offset":1209},"end":{"line":49,"column":206,"offset":1414},"indent":[]}},{"type":"code","lang":"jsx","meta":null,"value":"const Meta = React.createContext({ title: \"blog title\" });\n\nconst Title = () =\u003e {\n const meta = React.useContext(Meta);\n\n return \u003ch1\u003e{meta.title}\u003c/h1\u003e;\n};\n\nexport default function App() {\n return (\n \u003c\u003e\n \u003cTitle /\u003e\n \u003cMeta.Provider value={{ title: \"app title\" }}\u003e\n \u003cTitle /\u003e\n \u003c/Meta.Provider\u003e\n \u003c/\u003e\n );\n}","position":{"start":{"line":51,"column":1,"offset":1416},"end":{"line":70,"column":4,"offset":1759},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"inlineCode","value":"useContext","position":{"start":{"line":72,"column":1,"offset":1761},"end":{"line":72,"column":13,"offset":1773},"indent":[]}},{"type":"text","value":"へは","position":{"start":{"line":72,"column":13,"offset":1773},"end":{"line":72,"column":15,"offset":1775},"indent":[]}},{"type":"inlineCode","value":"Consumer","position":{"start":{"line":72,"column":15,"offset":1775},"end":{"line":72,"column":25,"offset":1785},"indent":[]}},{"type":"text","value":"を渡すわけではなくコンテキストそのものを渡します。","position":{"start":{"line":72,"column":25,"offset":1785},"end":{"line":72,"column":50,"offset":1810},"indent":[]}}],"position":{"start":{"line":72,"column":1,"offset":1761},"end":{"line":72,"column":50,"offset":1810},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"考察","position":{"start":{"line":74,"column":5,"offset":1816},"end":{"line":74,"column":7,"offset":1818},"indent":[]}}],"position":{"start":{"line":74,"column":1,"offset":1812},"end":{"line":74,"column":7,"offset":1818},"indent":[]}},{"type":"paragraph","children":[{"type":"inlineCode","value":"memo","position":{"start":{"line":76,"column":1,"offset":1820},"end":{"line":76,"column":7,"offset":1826},"indent":[]}},{"type":"text","value":"化されたコンポーネントの中で","position":{"start":{"line":76,"column":7,"offset":1826},"end":{"line":76,"column":21,"offset":1840},"indent":[]}},{"type":"inlineCode","value":"useContext","position":{"start":{"line":76,"column":21,"offset":1840},"end":{"line":76,"column":33,"offset":1852},"indent":[]}},{"type":"text","value":"を使っていると、","position":{"start":{"line":76,"column":33,"offset":1852},"end":{"line":76,"column":41,"offset":1860},"indent":[]}},{"type":"inlineCode","value":"Context","position":{"start":{"line":76,"column":41,"offset":1860},"end":{"line":76,"column":50,"offset":1869},"indent":[]}},{"type":"text","value":"の値を更新してもそのコンポーネントは再レンダリングされません。このことから","position":{"start":{"line":76,"column":50,"offset":1869},"end":{"line":76,"column":87,"offset":1906},"indent":[]}},{"type":"inlineCode","value":"Context","position":{"start":{"line":76,"column":87,"offset":1906},"end":{"line":76,"column":96,"offset":1915},"indent":[]}},{"type":"text","value":"の全ての値を更新することはオススメしないです。","position":{"start":{"line":76,"column":96,"offset":1915},"end":{"line":76,"column":119,"offset":1938},"indent":[]}}],"position":{"start":{"line":76,"column":1,"offset":1820},"end":{"line":76,"column":119,"offset":1938},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"僕的には","position":{"start":{"line":78,"column":1,"offset":1940},"end":{"line":78,"column":5,"offset":1944},"indent":[]}},{"type":"inlineCode","value":"Context","position":{"start":{"line":78,"column":5,"offset":1944},"end":{"line":78,"column":14,"offset":1953},"indent":[]}},{"type":"text","value":"へは何かキーの下にぶら下がれるオブジェクト値などを格納すると良いと思います。例えば以下のような感じです。","position":{"start":{"line":78,"column":14,"offset":1953},"end":{"line":78,"column":66,"offset":2005},"indent":[]}}],"position":{"start":{"line":78,"column":1,"offset":1940},"end":{"line":78,"column":66,"offset":2005},"indent":[]}},{"type":"code","lang":"js","meta":null,"value":"const contextValues = {\n '/': {\n title: 'Top Page',\n description: '...'\n },\n '/foo': {\n title: 'Foo Page',\n description: '...'\n },\n}","position":{"start":{"line":80,"column":1,"offset":2007},"end":{"line":91,"column":4,"offset":2165},"indent":[1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"そしてこのキー(","position":{"start":{"line":93,"column":1,"offset":2167},"end":{"line":93,"column":9,"offset":2175},"indent":[]}},{"type":"inlineCode","value":"path","position":{"start":{"line":93,"column":9,"offset":2175},"end":{"line":93,"column":15,"offset":2181},"indent":[]}},{"type":"text","value":")だけ Flux で管理して必要に応じて","position":{"start":{"line":93,"column":15,"offset":2181},"end":{"line":93,"column":35,"offset":2201},"indent":[]}},{"type":"inlineCode","value":"useContext","position":{"start":{"line":93,"column":35,"offset":2201},"end":{"line":93,"column":47,"offset":2213},"indent":[]}},{"type":"text","value":"を使っているコンポーネントに渡します。コンポーネントの中では渡された","position":{"start":{"line":93,"column":47,"offset":2213},"end":{"line":93,"column":81,"offset":2247},"indent":[]}},{"type":"inlineCode","value":"path","position":{"start":{"line":93,"column":81,"offset":2247},"end":{"line":93,"column":87,"offset":2253},"indent":[]}},{"type":"text","value":"を使い","position":{"start":{"line":93,"column":87,"offset":2253},"end":{"line":93,"column":90,"offset":2256},"indent":[]}},{"type":"inlineCode","value":"useContext","position":{"start":{"line":93,"column":90,"offset":2256},"end":{"line":93,"column":102,"offset":2268},"indent":[]}},{"type":"text","value":"から値を取り出して使います。","position":{"start":{"line":93,"column":102,"offset":2268},"end":{"line":93,"column":116,"offset":2282},"indent":[]}}],"position":{"start":{"line":93,"column":1,"offset":2167},"end":{"line":93,"column":116,"offset":2282},"indent":[]}},{"type":"code","lang":"js","meta":null,"value":"const {title, description} = useContext(XxContext)[path];","position":{"start":{"line":95,"column":1,"offset":2284},"end":{"line":97,"column":4,"offset":2351},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"このようにすることで","position":{"start":{"line":99,"column":1,"offset":2353},"end":{"line":99,"column":11,"offset":2363},"indent":[]}},{"type":"inlineCode","value":"memo","position":{"start":{"line":99,"column":11,"offset":2363},"end":{"line":99,"column":17,"offset":2369},"indent":[]}},{"type":"text","value":"化されていても値を更新できますし、その第2引数を渡してない場合は、デフォルトで行われる浅い比較の回数も減らせれます。","position":{"start":{"line":99,"column":17,"offset":2369},"end":{"line":99,"column":75,"offset":2427},"indent":[]}}],"position":{"start":{"line":99,"column":1,"offset":2353},"end":{"line":99,"column":75,"offset":2427},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":100,"column":1,"offset":2428}}},[],[]],"dependencies":{},"index":11,"milestone":"Release","column":"ja"},"note":{"slug":"react","title":"React","originalColor":"#61dafb","lightColor":"#047493","darkColor":"#61dafb","totalArticles":30,"hasArchivedArticles":true},"notes":[{"slug":"rust","title":"Rust","originalColor":"#c04567","lightColor":"#b63e5f","darkColor":"#ce6f89","totalArticles":42,"hasArchivedArticles":false},{"slug":"typescript","title":"TypeScript","originalColor":"#007bcc","lightColor":"#006fb8","darkColor":"#008ce8","totalArticles":31,"hasArchivedArticles":true},{"slug":"react","title":"React","originalColor":"#61dafb","lightColor":"#047493","darkColor":"#61dafb","totalArticles":30,"hasArchivedArticles":true},{"slug":"git","title":"git","originalColor":"#de4c36","lightColor":"#c23520","darkColor":"#e2624e","totalArticles":28,"hasArchivedArticles":false},{"slug":"javascript","title":"JavaScript","originalColor":"#f6df1c","lightColor":"#766a05","darkColor":"#f6df1c","totalArticles":27,"hasArchivedArticles":false},{"slug":"postgresql","title":"Postgresql","originalColor":"#326890","lightColor":"#326890","darkColor":"#4c8fc1","totalArticles":24,"hasArchivedArticles":false},{"slug":"shell","title":"Shell","originalColor":"#4ea725","lightColor":"#38771a","darkColor":"#4ea725","totalArticles":23,"hasArchivedArticles":false},{"slug":"nextjs","title":"NextJS","originalColor":"#0276ff","lightColor":"#0064d9","darkColor":"#2689ff","totalArticles":23,"hasArchivedArticles":true},{"slug":"now","title":"now","originalColor":"#007cff","lightColor":"#0069d8","darkColor":"#1a89ff","totalArticles":19,"hasArchivedArticles":true},{"slug":"circleci","title":"CircleCI","originalColor":"#27a0b6","lightColor":"#1d7687","darkColor":"#27a0b6","totalArticles":17,"hasArchivedArticles":false},{"slug":"vscode","title":"VSCode","originalColor":"#373277","lightColor":"#373277","darkColor":"#8883cb","totalArticles":14,"hasArchivedArticles":false},{"slug":"figma","title":"Figma","originalColor":"#7c2ce1","lightColor":"#7c2ce1","darkColor":"#a772eb","totalArticles":13,"hasArchivedArticles":false},{"slug":"nodejs","title":"NodeJS","originalColor":"#036e01","lightColor":"#036e01","darkColor":"#04a201","totalArticles":12,"hasArchivedArticles":false},{"slug":"aws","title":"AWS","originalColor":"#ff9900","lightColor":"#9a5c00","darkColor":"#ff9900","totalArticles":12,"hasArchivedArticles":false},{"slug":"github-actions","title":"GitHub Actions","originalColor":"#1074e7","lightColor":"#0e69d1","darkColor":"#328bf1","totalArticles":11,"hasArchivedArticles":false},{"slug":"slack","title":"Slack","originalColor":"#4a164b","lightColor":"#4a164b","darkColor":"#ce5ed0","totalArticles":10,"hasArchivedArticles":false},{"slug":"npm","title":"npm","originalColor":"#c12127","lightColor":"#c12127","darkColor":"#e45f64","totalArticles":10,"hasArchivedArticles":true},{"slug":"json-schema","title":"JSON Schema","originalColor":"#2a7ae2","lightColor":"#1c6ace","darkColor":"#4289e5","totalArticles":10,"hasArchivedArticles":false},{"slug":"graphql","title":"GraphQL","originalColor":"#e10098","lightColor":"#cb0089","darkColor":"#ff0aaf","totalArticles":9,"hasArchivedArticles":false},{"slug":"docker","title":"Docker","originalColor":"#1396c3","lightColor":"#0f7395","darkColor":"#1396c3","totalArticles":9,"hasArchivedArticles":false},{"slug":"material-ui","title":"Material-UI","originalColor":"#f48fb1","lightColor":"#ce1453","darkColor":"#f48fb1","totalArticles":8,"hasArchivedArticles":false},{"slug":"jest","title":"Jest","originalColor":"#99424f","lightColor":"#99424f","darkColor":"#c47581","totalArticles":7,"hasArchivedArticles":false},{"slug":"styled-components","title":"styled-components","originalColor":"#db7092","lightColor":"#c43160","darkColor":"#db7092","totalArticles":7,"hasArchivedArticles":false},{"slug":"vue","title":"Vue","originalColor":"#42b983","lightColor":"#2b7855","darkColor":"#42b983","totalArticles":7,"hasArchivedArticles":false},{"slug":"sass","title":"Sass","originalColor":"#cd6699","lightColor":"#b73c79","darkColor":"#cd6699","totalArticles":7,"hasArchivedArticles":false},{"slug":"lerna","title":"Lerna","originalColor":"#cc01ff","lightColor":"#b300e0","darkColor":"#d738ff","totalArticles":7,"hasArchivedArticles":false},{"slug":"webpack","title":"Webpack","originalColor":"#2a3a42","lightColor":"#2a3a42","darkColor":"#6b8fa1","totalArticles":6,"hasArchivedArticles":false},{"slug":"tmux","title":"tmux","originalColor":"#1bb91f","lightColor":"#127c15","darkColor":"#1bb91f","totalArticles":6,"hasArchivedArticles":false},{"slug":"diesel","title":"Diesel","originalColor":"#ffcd57","lightColor":"#8f6400","darkColor":"#ffcd57","totalArticles":6,"hasArchivedArticles":false},{"slug":"yarn","title":"Yarn","originalColor":"#2188b6","lightColor":"#1c739a","darkColor":"#2391c2","totalArticles":6,"hasArchivedArticles":false},{"slug":"eslint","title":"ESLint","originalColor":"#433abb","lightColor":"#433abb","darkColor":"#8b85d9","totalArticles":5,"hasArchivedArticles":false},{"slug":"http","title":"HTTP","originalColor":"#27415e","lightColor":"#27415e","darkColor":"#638ebe","totalArticles":5,"hasArchivedArticles":false},{"slug":"codesandbox","title":"Code Sandbox","originalColor":"#5aa8ed","lightColor":"#146bb8","darkColor":"#5aa8ed","totalArticles":5,"hasArchivedArticles":false},{"slug":"docz","title":"Docz","originalColor":"#39d2eb","lightColor":"#0e7688","darkColor":"#39d2eb","totalArticles":5,"hasArchivedArticles":false},{"slug":"yew","title":"Yew","originalColor":"#009a5b","lightColor":"#007a48","darkColor":"#009f5e","totalArticles":4,"hasArchivedArticles":false},{"slug":"storybook","title":"Storybook","originalColor":"#ff4785","lightColor":"#d30047","darkColor":"#ff4785","totalArticles":4,"hasArchivedArticles":false},{"slug":"alfred","title":"Alfred","originalColor":"#5c1f87","lightColor":"#5c1f87","darkColor":"#ae6bdd","totalArticles":4,"hasArchivedArticles":false},{"slug":"formik","title":"Formik","originalColor":"#0052cc","lightColor":"#0052cc","darkColor":"#3888ff","totalArticles":4,"hasArchivedArticles":false},{"slug":"google-apps-script","title":"Google Apps Script","originalColor":"#3a80f7","lightColor":"#0a5ff0","darkColor":"#4486f7","totalArticles":4,"hasArchivedArticles":false},{"slug":"fish-shell","title":"Fish Shell","originalColor":"#1e2d53","lightColor":"#1e2d53","darkColor":"#6b86ca","totalArticles":4,"hasArchivedArticles":false},{"slug":"plantuml","title":"PlantUML","originalColor":"#0366d6","lightColor":"#0366d6","darkColor":"#278bfc","totalArticles":3,"hasArchivedArticles":false},{"slug":"redux","title":"Redux","originalColor":"#774abc","lightColor":"#774abc","darkColor":"#9c7bce","totalArticles":3,"hasArchivedArticles":false},{"slug":"contentful","title":"Contentful","originalColor":"#192432","lightColor":"#192432","darkColor":"#6f8eb7","totalArticles":3,"hasArchivedArticles":false},{"slug":"dash","title":"Dash","originalColor":"#21a8e1","lightColor":"#157198","darkColor":"#21a8e1","totalArticles":3,"hasArchivedArticles":false},{"slug":"nuxtjs","title":"NuxtJS","originalColor":"#41b883","lightColor":"#2a7755","darkColor":"#41b883","totalArticles":3,"hasArchivedArticles":false},{"slug":"web-service","title":"Web Service","originalColor":"#8bbfc2","lightColor":"#3f7477","darkColor":"#8bbfc2","totalArticles":3,"hasArchivedArticles":false},{"slug":"firebase","title":"Firebase","originalColor":"#ffa000","lightColor":"#955e00","darkColor":"#ffa000","totalArticles":3,"hasArchivedArticles":false},{"slug":"yaml","title":"YAML","originalColor":"#a51123","lightColor":"#a51123","darkColor":"#ed4f62","totalArticles":2,"hasArchivedArticles":false},{"slug":"ubuntu","title":"Ubuntu","originalColor":"#e95420","lightColor":"#bf3f13","darkColor":"#ea5a28","totalArticles":2,"hasArchivedArticles":false},{"slug":"tailwindcss","title":"tailwindcss","originalColor":"#4299e1","lightColor":"#1c6fb4","darkColor":"#4299e1","totalArticles":2,"hasArchivedArticles":false},{"slug":"glitch","title":"Glitch","originalColor":"#76ecff","lightColor":"#007588","darkColor":"#76ecff","totalArticles":2,"hasArchivedArticles":false},{"slug":"lighthouse","title":"Lighthouse","originalColor":"#2c46ff","lightColor":"#2c46ff","darkColor":"#6c7eff","totalArticles":2,"hasArchivedArticles":false},{"slug":"sqlite","title":"SQLite","originalColor":"#044b64","lightColor":"#044b64","darkColor":"#0894c6","totalArticles":2,"hasArchivedArticles":false},{"slug":"nippo","title":"Nippo","originalColor":"#3591B8","lightColor":"#2a7391","darkColor":"#3591b8","totalArticles":2,"hasArchivedArticles":false},{"slug":"react-native","title":"React Native","originalColor":"#61dafb","lightColor":"#047493","darkColor":"#61dafb","totalArticles":2,"hasArchivedArticles":false},{"slug":"ansible","title":"Ansible","originalColor":"#ff5850","lightColor":"#d90a00","darkColor":"#ff5850","totalArticles":2,"hasArchivedArticles":false},{"slug":"markdown","title":"Markdown","originalColor":"#1eaedb","lightColor":"#147492","darkColor":"#1eaedb","totalArticles":1,"hasArchivedArticles":false},{"slug":"github-packages","title":"GitHub Packages","originalColor":"#1074e7","lightColor":"#0e69d1","darkColor":"#328bf1","totalArticles":1,"hasArchivedArticles":false},{"slug":"font-awesome","title":"Font Awesome","originalColor":"#4dabf7","lightColor":"#086bbb","darkColor":"#4dabf7","totalArticles":1,"hasArchivedArticles":false},{"slug":"homebrew","title":"Homebrew","originalColor":"#be862d","lightColor":"#8c6321","darkColor":"#be862d","totalArticles":1,"hasArchivedArticles":false},{"slug":"automator","title":"Automator","originalColor":"#0058d0","lightColor":"#0058d0","darkColor":"#348aff","totalArticles":1,"hasArchivedArticles":false},{"slug":"python","title":"Python","originalColor":"#3776ab","lightColor":"#336ea0","darkColor":"#4d8fc6","totalArticles":1,"hasArchivedArticles":false},{"slug":"parcel","title":"Parcel","originalColor":"#21374b","lightColor":"#21374b","darkColor":"#5d8db8","totalArticles":1,"hasArchivedArticles":false},{"slug":"rollup","title":"Rollup","originalColor":"#aa1e1e","lightColor":"#aa1e1e","darkColor":"#e36262","totalArticles":1,"hasArchivedArticles":false},{"slug":"vim","title":"Vim","originalColor":"#027f00","lightColor":"#027b00","darkColor":"#039f00","totalArticles":1,"hasArchivedArticles":false},{"slug":"css","title":"CSS","originalColor":"#254de4","lightColor":"#254de4","darkColor":"#6b86ed","totalArticles":1,"hasArchivedArticles":false},{"slug":"stripe","title":"Stripe","originalColor":"#6772e5","lightColor":"#4c59e0","darkColor":"#7a84e8","totalArticles":1,"hasArchivedArticles":false},{"slug":"twitter","title":"Twitter","originalColor":"#1ba1f1","lightColor":"#0b71af","darkColor":"#1ba1f1","totalArticles":1,"hasArchivedArticles":false},{"slug":"dart","title":"Dart","originalColor":"#0375c2","lightColor":"#036db5","darkColor":"#048eec","totalArticles":1,"hasArchivedArticles":false}],"page":{"note":{"link":"http://api.nju33.com/v2/notes/react/articles","title":"React"},"prev":{"link":"http://api.nju33.com/v2/notes/react/articles/子要素参照 React.forwardRef","title":"子要素参照 React.forwardRef"},"next":{"link":"http://api.nju33.com/v2/notes/react/articles/React.memo で更新制御","title":"React.memo で更新制御"}},"query":{"slug":"react","article":"Context","archived":false,"articlesOrArchives":"articles"}},"__N_SSG":true},"page":"/notes/[slug]/[articlesOrArchives]/[article]","query":{"slug":"react","articlesOrArchives":"articles","article":"Context"},"buildId":"25va8DY9JmVAWzo4vIIFb","runtimeConfig":{},"nextExport":false,"isFallback":false,"gsp":true,"locale":"ja","locales":["ja","en"],"defaultLocale":"ja"}</script><script nomodule="" src="/_next/static/chunks/polyfills-52c5b5af9b38d4a18d68.js"></script><script src="/_next/static/chunks/main-dc32d9560911f297bc15.js" async=""></script><script src="/_next/static/chunks/webpack-dee560536d4361985f12.js" async=""></script><script src="/_next/static/chunks/framework.79683c9c6077f12fec45.js" async=""></script><script src="/_next/static/chunks/0a301732.19958c0d047fd492e40b.js" async=""></script><script src="/_next/static/chunks/4bfee28567229e55e72887d551fa6eec32833508.3addb1050937f6ea0daf.js" async=""></script><script src="/_next/static/chunks/b176edbace8ff5cc05bd1d5444781227b29a7687.5f5d33c0c25968623d66.js" async=""></script><script src="/_next/static/chunks/pages/_app-1de47144d5ac5612cffd.js" async=""></script><script src="/_next/static/chunks/17efc4f15cb051e6925c16c443d5d43d66c69745.7a05c5994c82d7527c3e.js" async=""></script><script src="/_next/static/chunks/28bbb52b85821d87fc680fe94fe3bcbd4f8fc95e.c95992efb73dada0493d.js" async=""></script><script src="/_next/static/chunks/524140d9623513a560ee0baf9eb6977c169d985c.4edc09ec7cd71ce1ebf9.js" async=""></script><script src="/_next/static/chunks/pages/notes/%5Bslug%5D/%5BarticlesOrArchives%5D/%5Barticle%5D-046fd7acb3bd5220eae5.js" async=""></script><script src="/_next/static/25va8DY9JmVAWzo4vIIFb/_buildManifest.js" async=""></script><script src="/_next/static/25va8DY9JmVAWzo4vIIFb/_ssgManifest.js" async=""></script><div id="portal-for-right-sidebar" class="fixed z-90 left-0 top-0 w-full"></div><div id="portal-for-paragragh-link-detail"></div><template id="canbetoc" data-canbetoc-id="toc"></template><div aria-hidden="true" id="ads" class="h-none absolute z-100 right-50% top-0 w-innerWidth transform translate-x-50% lg:w-article"></div><div aria-hidden="true" id="ads-for-inside-app" class="h-none absolute z-100 right-0 top-0 w-innerWidth lg:w-without-sidebar"></div><div class="modal__portal" id="portal-for-history-modal" style="z-index:99"></div></body></html>