【React Hooks】useContextについてシンプルにまとめる

はじめに

useStateを使っていると、データをpropsで子の更に子のコンポーネント、とバケツリレーする形になることが多い。
useContextを使うことで、一気に下層のコンポーネントに渡すことができるということで学習した。

上層コンポーネント

app.jsx

import React, {createContext, useState} from 'react'

//Contextの作成
export const UserContext = createContext()

export default App = () => {

  const [user, setUser] = useState({
    name: 'username',
    email: '[e-mail]'
  })

  return (
　　　　//下位コンポーネントを囲うProviderにstateを渡す
      <UserContext.Provider value={user}>
          <nextComponent/>
      </UserContext.Provider>
  )
}

下層コンポーネント

上層コンポーネントの、<nextComponent/>の更に下層に<nextNextComponent/>があるとする。

nextNextComponent.jsx

import React, {useContext} from 'react'
//上層コンポーネントで定義したContextのインポート
import {UserContext} from '../../App'

const nextNextComponent = () => {
　//インポートしたUserContextをuseContextして変数に代入することで、jsx内で表示できる。
  const user = useContext(UserContext)

  return (
    <p>username：{user.name}</p>
    <p>email:{user.email}</p>
  )
}

感想

規模の小さいプロジェクトで、部分的に使う文には書きやすくて簡単で便利。
下層コンポーネントに渡したいデータが多くなってくると、
<UserContext.Provider value={user}>
と定義する部分が増えて見通しが悪くなるかと思いました。

これに対して、Reduxでのstate管理だと、記述量が増えるデメリットがあるが、
・コンポーネントのファイル内がスッキリする
・stateの処理のパターンごとにファイルを分けて管理できる
・データの流れが常に一定で慣れれば理解しやすい
といったメリットがあるのかなと思いました。

終わりに。

最後まで読んで頂きありがとうございます
転職の為、未経験の状態からReact,Railsを学習しております。継続して投稿していく中で、その為のインプットも必然的に増え、成長に繋がるかと考えています。
投稿の内容に間違っているところや、付け加えるべきところが多々あるかと思いますので、ご指摘頂けると幸いです。この記事を読んで下さりありがとうございました。