【React 公式の旅 #2】useContextでProps渡し地獄から開放された

目的

useContextの理解を深める

実践

公式を見ながら実践していく
Lightモード、Darkモードで解説されていた。

まずはコンテキストの作成からcontext.tsに記載していく（App.tsxと同じ階層）
コンテキストの初期値を決めてThemeContextを定義

context.ts

import { createContext } from "react";
export const ThemeContext = createContext("light")

次にしたこと
1.stateを用意
2.ThemeContextに.Providerをつけてdivを囲う

App.tsx

import { useContext, useState } from "react";
import { ThemeContext } from "./context";

export default function App() {
  const [theme, setTheme] = useState("light");
  return (
    <>
      <ThemeContext.Provider value={theme}>
        <div></div>
      </ThemeContext.Provider>
    </>
  );
}

続いて簡単にPコンポーネントを作成。

App.tsx

export default function App() {
  const [theme, setTheme] = useState("dark");
  return (
    <>
      <ThemeContext.Provider value={theme}>
        <P />
      </ThemeContext.Provider>
    </>
  );
}

const P = () => {
  const P_theme = useContext(ThemeContext);
  return <p>{P_theme}</p>;
};

これで表示を見てみると"dark"と表示される。

このvalueの値に設定したものが子要素でuseContextを使用すると使用できるみたい

<ThemeContext.Provider value={theme}>

ちなみにuseContextを使わないとPropsで受け渡すことになる

export default function App() {
  const [theme, setTheme] = useState("dark");
  return (
    <>
        <P theme={theme} />
    </>
  );
}

const P = ({theme}) => {
  return <p>{theme}</p>;
};

formで子要素をComponentを作りまくると状態管理を使うか、Propsの受け渡し等行わないとコードを書く量が多くなるのでこれを使えばよりコードの記述量を減らせることがメリットだと感じた。

ちなみにこんな感じで囲えば値を更新できるらしい

<ThemeContext.Provider value="dark">
  ...
  <ThemeContext.Provider value="light">
    <Footer />
  </ThemeContext.Provider>
  ...
</ThemeContext.Provider>

後便利そうだと思ったのは認証状態をいちいち引っ張ってこなくていいのはありがたい

function MyApp() {
  const [currentUser, setCurrentUser] = useState(null);

  function login(response) {
    storeCredentials(response.credentials);
    setCurrentUser(response.user);
  }

  return (
    <AuthContext.Provider value={{ currentUser, login }}>
      <Page />
    </AuthContext.Provider>
  );
}

まとめ

useContextでProps渡し地獄から開放されることで可読性とかあがりそうなので今後使っていきたい