HOME
blog
tokuyasu
【React】useContextについて

ブログblog

【React】useContextについて

Writer： tokuyasu　更新日：2023/11/07

こんにちは、デジナーレ福岡オフィスの徳安です。

この記事では、useContextについて説明します。

useContextとは

useContextはコンポーネントで、

コンテクスト(context)の読みとりと

サブスクライブ(subscribe, 変更の受け取り)を

行うためのReactフック。

const value = useContext(SomeContext)

1	const value = useContext(SomeContext)

通常、親コンポーネントから

子コンポーネントには

propsを使って情報を渡す。

propsを受け渡す際、

多数の中間コンポーネントを

経由して渡さないといけない場合や、

アプリ内の多くのコンポーネントが

同じ情報を必要とする場合、

propsの受け渡しは冗長で、不便なものになる。

　→props drilling（propsのバケツリレー）

と呼ばれる状況に陥る。

そういった際に、

コンテクストを使用することで、

親コンポーネントから、

propsを明示的に受け渡さなくても

任意のコンポーネントが

情報を受け取れるようにできる機能。

=== サンプル ===

コンポーネントのトップレベルで

useContextを呼び出して、

サブスクライブする。

簡単なサンプルを作成してみる。

＜ファイル構成＞

・propsの受け渡しで、stateを渡す場合

【APP.jsx】

import { useState } from "react";
import SampleA from "./components/SampleA";

const App = () => {
  const [user, setUser] = useState({
    name: "taro",
    age: 20,
  });
  return (
    <div className="App">
      <SampleA user={user} />
    </div>
  );
};

export default App;

import { useState } from "react";

import SampleA from "./components/SampleA";

const App = () => {

const [user, setUser] = useState({

name: "taro",

age: 20,

});

return (

</div>

);

};

export default App;

【SampleA】

import React from "react";
import SampleB from "./SampleB";

const SampleA = ({ user }) => <SampleB user={user} />;

export default SampleA;

import React from "react";

import SampleB from "./SampleB";

const SampleA = ({ user }) => <SampleB user={user} />;

export default SampleA;

【SampleB】

import React from "react";
import SampleC from "./SampleC";

const SampleB = ({ user }) => <SampleC user={user} />;

export default SampleB;

import React from "react";

import SampleC from "./SampleC";

const SampleB = ({ user }) => <SampleC user={user} />;

export default SampleB;

【SampleC】

const ContextC = ({ user }) => {
  return (
    <p>
      {user.name}: {user.age}歳です。
    </p>
  );
};

export default ContextC;

const ContextC = ({ user }) => {

return (

<p>

{user.name}: {user.age}歳です。

</p>

);

};

export default ContextC;

このように親コンポーネントから値を受け渡す際に

バケツリレーで値を受け渡しているため

不要なpropsの受け渡しが発生している。

・contextを使用して、値を受け取れるようにする場合

【APP.jsx】

import { createContext, useState } from "react";
import SampleA from "./components/SampleA";

// UserContextを利用できるようにするためにexportし、
// ContextオブジェクトであるUserContextを作成
export const UserContext = createContext();

const App = () => {
  const [user, setUser] = useState({
    name: "taro",
    age: 20,
  });
  return (
    <div className="App">
      {/* providerを作成、valueにuserをセットする */}
      <UserContext.Provider value={user}>
        <SampleA />
      </UserContext.Provider>
    </div>
  );
};

export default App;

import { createContext, useState } from "react";

import SampleA from "./components/SampleA";

// UserContextを利用できるようにするためにexportし、

// ContextオブジェクトであるUserContextを作成

export const UserContext = createContext();

const App = () => {

const [user, setUser] = useState({

name: "taro",

age: 20,

});

return (

{/* providerを作成、valueにuserをセットする */}

<UserContext.Provider value={user}>

</UserContext.Provider>

</div>

);

};

export default App;

【SampleA.jsx】

import React from "react";
import SampleB from "./SampleB";

// 不要なpropsの受け渡しがなくなる。
const SampleA = () => <SampleB />;

export default SampleA;

import React from "react";

import SampleB from "./SampleB";

// 不要なpropsの受け渡しがなくなる。

const SampleA = () => <SampleB />;

export default SampleA;

【SampleB.jsx】

import React from "react";
import SampleC from "./SampleC";

// 不要なpropsの受け渡しがなくなる。
const SampleB = () => <SampleC />;

export default SampleB;

import React from "react";

import SampleC from "./SampleC";

// 不要なpropsの受け渡しがなくなる。

const SampleB = () => <SampleC />;

export default SampleB;

【SampleC.jsx】

import { useContext } from "react";
import { UserContext } from "../App";

const ContextC = () => {
  //useContextの引数に、UserContextを渡すことによって、
  //AppコンポーネントでProviderに渡したvalueの値を変数に代入することが出来る
  const user = useContext(UserContext);
  return (
    <p>
      {user.name}: {user.age}歳です。
    </p>
  );
};

export default ContextC;

import { useContext } from "react";

import { UserContext } from "../App";

const ContextC = () => {

//useContextの引数に、UserContextを渡すことによって、

//AppコンポーネントでProviderに渡したvalueの値を変数に代入することが出来る

const user = useContext(UserContext);

return (

<p>

{user.name}: {user.age}歳です。

</p>

);

};

export default ContextC;

useContextを使用すれば、

ツリー内の様々な階層から、

Contextに収容されている

データへアクセスすることができる。

ここまで読み進めていただきありがとうございます。

tokuyasuの
他の記事を読む

【React】カスタムフックについて

2024/11/07
【React】useEffectを使用するべき場所なのか

2024/06/07

tokuyasuの記事一覧

スタッフブログ一覧

【React】useContextについて

useContextとは

=== サンプル ===

・propsの受け渡しで、stateを渡す場合

・contextを使用して、値を受け取れるようにする場合

tokuyasuの
他の記事を読む

関連タグ

デジナーレをもっと知るABOUT US

【React】useContextについて

useContextとは

=== サンプル ===

・propsの受け渡しで、stateを渡す場合

・contextを使用して、値を受け取れるようにする場合

tokuyasuの他の記事を読む

関連タグ

デジナーレをもっと知るABOUT US

tokuyasuの
他の記事を読む