React Hooks (useContext)

useContextを呼び出したコンポーネントで、上位のコンポーネントからコンテクストオブジェクトを受け取り、そのコンテクストの現在値を返す。

コンポーネントの階層や、propsが多くなると下層のコンポーネントと
データのやりとりをバケツリレーのようにしなくてはならない。
これが大変面倒なので、そんな時に、useContextを使う。

React.createContextを生成→Context.Providerのvalueに値を渡す→
下層のコンポーネント全てでコンテクストの値を取得出来る。

データを受け取る時に、useContextを使う。
useContextでデータを受け取るコンポーネントはvalueが変わる度に、再レンダーされる。

import React, { useState, createContext, useContext } from "react";

const colors = ["#ff0000", "#00ff00", "#0000ff"];

const ColorsContext = createContext();

// 子供コンポーネント
const Son = () => {
 const { color, hello } = useContext(ColorsContext);
 return (
   <div style={{ color }}>
     子供 <button onClick={hello}>hello</button>
     <Grandson />
   </div>
 );
};

// 孫コンポーネント
const Grandson = () => {
 const { color, hello } = useContext(ColorsContext);
 return (
   <div style={{ color }}>
     孫 <button onClick={hello}>hello</button>
   </div>
 );
};

export default function App() {
 const [index, setIndex] = useState(0);
 const hello = () => {
   alert("hello!");
 };
 return (
   <div className="App">
     <select
       onChange={(e) => {
         setIndex(e.target.value);
       }}
     >
       {colors.map((v, i) => {
         return (
           <option key={v} value={i}>
             {v}
           </option>
         );
       })}
     </select>
     <ColorsContext.Provider
       value={{
         color: colors[index],
         hello
       }}
     >
       <Son />
     </ColorsContext.Provider>
   </div>
 );
}

とても便利。