このような疑問をお持ちの方に向けて書いています。
useContextを使うと親コンポーネントから孫コンポーネントへのデータの受け渡しが簡単になります。
Propsで親 -> 子 -> 孫と値を渡す方法よりもシンプルなコードになるため、ぜひ使い方を覚えておくことをおすすめします。
▼この記事では、useContextについて以下の点を理解できるように解説していきます。
- useContextの特徴
- useContextの使い方
- useContextのサンプルコード
useContextとは
ReactのuseContextにはどんな特徴や利用するメリットがあるのか紹介していきます。
useContextはどんな機能?
冒頭でも紹介したようにuseContextは、親から子、孫への値渡しをする場合にコードをシンプルにすることができます。
Propsを使った場合は、上の図の左側のように値を順に渡す必要があります。useContextを使うと値を使用しない子を通さないで値を渡すことが可能になります。
useContextの特徴
簡単にまとめると、以下のような特徴があります。
- React Hooksの機能で関数コンポーネントで使用が可能
- 値をコンポーネント間で共有できる
- Reduxに似ているが、複雑になりにくく使いやすい
useContextの使い方
実際にuseContextを使ってみます。
useContextの基本構文
createContextをインポートしておきます。createContextを使い初期化します。Providerを使い、共有したい値をvalueにセットします。
import React, { useState, createContext } from 'react'; const UserCount = createContext() <UserCount.Provider value={値}>
useContextを使ってみる
親コンポーネントでは、useContextを利用する設定、準備、値のセットを行う。孫コンポーネント(値を共有するコンポーネント)では、値を受け取ります。
親コンポーネント
const UserCount = createContext() // createContext()で初期化 <UserCount.Provider value={100}> // Providerを使い値をセット
孫コンポーネント
import { UserCount } from '../親コンポーネント' const count = useContext(UserCount) // useContext(UserCount)を使い孫コンポーネントで値を受け取る
useContextが便利な理由
useStateで管理している値をuseContextに渡すことで、他のコンポーネントで値を共有することができます。
useReducerと組み合わせて利用することで、reducerを他のコンポーネントでも利用することができます。
useContextはuseStateやuseReducerと組み合わせて使うと、よりReact Hooksが便利だと実感することができると思います。
useContextの使い方まとめ
今回は、ReactのuseContextの使い方について紹介しました。
親コンポーネントの値を孫コンポーネントと共有する場合、useContextは簡単に使うことができるため有効です。
他のReact Hooksと合わせて使ってみてください。