Hapicode

# 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
  • reactjs

同じタグを持つ記事をピックアップしました。