【React】useContextの使い方

はじめに

　本記事は、プログラミングの学習を始めて1ヶ月の初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

useContextの使い方

useContextとは

Providerでラップしたコンポーネントのツリーのどこからでも、同一のContextObjectを参照できるようにするHookです。
propsのバケツリレーを避けることができます。
Contextを更新したときに再レンダーされるべきでないコンポーネントにも再レンダーが走る場合は、注意するべきでしょう。

useContextを使うタイミング

コンポーネントの階層が深い場合や複数コンポーネントで同一stateを使用する場合に使用します。

useContextの使用例

App.jsx

import React, {createContext, useState} from 'react'
import Header from './component/Header'
import Footer from './component/Footer'
import Content from './component/Content'

export const ChangeContext = React.createContext();

function App() {
  const [chageContext, setChangeContext] = useState(true);
  const value = {
    chageContext, setChangeContext
  };
  return (
    <div className="App">
      <ChangeContext.Provider value = {value}>
        <Header />
        <Content />
        <Footer />
      </ChangeContext.Provider>
    </div>
  );
}

export default App;

Content.jsx

import React, {useContext} from 'react';
import {ChangeContext} from '../App';
import style from '../style/content.module.scss';

const Content = () => {
  const {chageContext, setChangeContext} = useContext(ChangeContext);

  return(
    <div className={style.content}>
      <h1>
        {chageContext ? 'content': 'コンテンツ'}
      </h1>
    </div>
  )
}

export default Content;