グローバルstateの管理

React

2022.08.29

createContext
useContext

createContext

const AuthContextへcreateContext()を代入して、exportする。

propsにchildrenを渡して、valueにstateを代入する。

import { useEffect, useState, createContext } from "react";
import { auth } from '../service/firebase';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    auth.onAuthStateChanged(setCurrentUser);
  }, []);
  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  )
}

useContext

使用したい場所で、createContext()を代入した変数をimportする。その変数をuseContextの引数に設定する。

import React, { useContext } from 'react'
import { AuthContext } from '../providers/AuthProvider';
import { sinInWithGoogle } from '../service/firebase'

const Header = () => {
  const currentUser = useContext(AuthContext);
  console.log(currentUser);
  return (
    <div>
      <header>
        ヘッダー
        <button onClick={sinInWithGoogle}>ログイン</button>
      </header>
    </div>
  )
}

export default Header