グローバルState管理

  return (
    <UserProvider>
      <Router />
    </UserProvider>
  );

// Reactが絶対必要になるので忘れないように
// contextを使用する際にはcreateContextをインポート
import React, { createContext, useState } from "react";

// どのContextを呼び出しているか判別するために以下の一行が必要
export const UserContext = createContext({});
// UserContextを使うときのおきまり
// 何かを囲むときは以下のようにchildrenを使う
export const UserProvider = (props) => {
  const { children } = props;

  const [userInfo, setUserInfo] = useState(null);

  return (
    // 囲っている中でvalueの値が使える
    // 以下の描き方で、userInfoを使えるし、更新することも出来るようになる
    <UserContext.Provider value={{ userInfo, setUserInfo }}>
      {children}
    </UserContext.Provider>
  );
};

export const UserIconWithName = (props) => {
  const { image, name } = props;
  // useContextでどのUserContextを使用するのか指定する
  const { userInfo } = useContext(UserContext);
  const isAdmin = userInfo ? userInfo.isAdmin : false;

  return (
    <SContainer>
      <SImg height={160} width={120} src={image} alt={name} />
      <SName>{name}</SName>
      {isAdmin && <SEdit>編集</SEdit>}
    </SContainer>
  );
};

import { atom } from "recoil";

export const userState = atom({
  // keyは一意。ファイル名とそろえるとベネ
  key: "userState",
  default: { isAdmin: false }
});

  return (
    <RecoilRoot>
      <UserProvider>
        <Router />
      </UserProvider>
    </RecoilRoot>
  );

// 値を参照するだけの時はuseRecoilValueを使用する
import { useRecoilValue } from "recoil";

~

  // useRecoilValueを使えば値の取得は以下のように定数で行える
  const userInfo = useRecoilValue(userState);

~

// 値の更新だけしたいときはuseSetRecoilStateを使用する
import { useSetRecoilState } from "recoil";

~

  // Recoilによるグローバルstate管理
  const setUserInfo = useSetRecoilState(userState);

  const onClickAdmin = () => {
    setUserInfo({ isAdmin: true });
    history.push("/users");
  };