React での状態管理をもっとシンプルに！Recoil 解説ガイド

import { atom } from "recoil";

export const userState = atom<string | null>({
  key: "userState",        // 一意なキー（Recoil 内で重複しない必要あり）
  default: null,           // 初期値
});

import { selector } from "recoil";
import { userState } from "./atoms";

export const isLoggedInState = selector<boolean>({
  key: "isLoggedInState",
  get: ({ get }) => Boolean(get(userState)),
});

npm install recoil
# または
yarn add recoil

import { RecoilRoot } from "recoil";
import App from "./App";

export default function Root() {
  return (
    <RecoilRoot>
      <App />
    </RecoilRoot>
  );
}

import { useRecoilState, useRecoilValue } from "recoil";
import { userState, isLoggedInState } from "./store";

function LoginButton() {
  const [user, setUser] = useRecoilState(userState); // 状態を読み書き
  const isLoggedIn = useRecoilValue(isLoggedInState); // 状態を読み取り専用

  return isLoggedIn ? (
    <button onClick={() => setUser(null)}>Logout</button>
  ) : (
    <button onClick={() => setUser("Alice")}>Login</button>
  );
}

const userProfileQuery = selector({
  key: "userProfileQuery",
  get: async ({ get }) => {
    const userId = get(userIdState);
    if (!userId) return null;
    const res = await fetch(`/api/users/${userId}`);
    return res.json();
  },
});

import { useRecoilSnapshot } from "recoil";
import { useEffect } from "react";

function DebugObserver() {
  const snapshot = useRecoilSnapshot();
  useEffect(() => {
    console.debug("Snapshot", snapshot);
  }, [snapshot]);
  return null;
}