# React 状態管理　 Recoil

React の状態管理ライブラリ Recoil（リコーイル）をやってみました。

Recoil とは

Meta 社(旧 Facebook)が開発した React 状態管理ライブラリです。よく Redux と Context で比較されますが、Context では重複レンダーリングや単一の値しか保存できないなどの問題を解決するために Recoil を開発されたそうです。
Recoli は Atom（状態共有）から Selector（関数）、そして React に流れます。Atom は state 管理、Selector は同期と非同期に state を変更することが可能です。
Atom が更新された際に、バンドされた全ての component がレンダリングされます。

useRecoilValue useSetRecoilState hook を使い分けることでより不要な再レンダリングを防ぐことができます。

# Install

yarn add recoil
npm install recoil

eslint-plugin-react-hooks使う場合、additionalHooks を追加した方が Warning エラー回避できます。

// modified .eslint config
{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": [
      "warn",
      {
        "additionalHooks": "useRecoilCallback"
      }
    ]
  }
}

# RecoilRoot

状態管理をしたいコンポーネントの親 Component から RecoilRoot で囲う

import React from "react";
import { RecoilRoot } from "recoil";

function App() {
  return (
    <RecoilRoot>
      <ParentComponent />
    </RecoilRoot>
  );
}

Recoil から引用できる Hooks

// Recoilから引用できるHooks
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from "recoil";

# 状態管理 Atom

Atom ファイルの作成

const textState = atom({
  key: "textState", // 他のAtomと重複しないユニークなKeyが必要
  default: "", // デフォルト値を設定
});

Atom から state を読み込み書き込み変更する

import { useRecoilState } from "recoil";
import { textState } from "../store/textState";

export const Parent = () => {
  const [textState, setTextState] = useRecoilState(textState);
  return (
    <>
      <div>Test Atom {textState}</div>
      <button
        onClick={() => {
          setTextState(textState + textState);
        }}
      >
        click
      </button>
    </>
  );
};

useRecoilState は読み込みと書き込み Set 両方の機能を提供します。

読み込みだけ、書き込みだけの場合、useRecoilValue useSetRecoilStateを使います。

# 関数 Selector

const countState = selector({
  key: "countState",
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});

useRecoilValue は Selector を読み込むことができます。

2022-12-14 1年前

reactjs

eslint rule React Hook useEffect has missing dependencies を解消する

React Hook useEffect の warning について ESLint 制御と use...

Next.js の html lang を ja に設定

html lang 属性を適切に設定してアクセシビリティやSEOに役立ちます。...

React Ref ができること

React Refでファイル操作するjavascript createRef API使ってdom操作...

React Nextjs router object

Nextjs開発 router basePath query paramer 取得する方法とrout...

# React 状態管理 Recoil

# Install

# RecoilRoot

# 状態管理 Atom

# 関数 Selector

関連記事

# React 状態管理　 Recoil