【React】 Recoilでのstate管理実践

Recoilとは？
Recoilの使用方法
Recoilのフックの種類
- Recoilのフック使い所

Recoilとは？

Recoilは、Facebookが開発した状態管理ライブラリであり、Reactアプリケーションにおける状態の共有、更新、参照を簡単に行えるようにするために使用されます。

Recoilの使用方法

Recoilを使用するには、以下の手順に従います。

１、Recoilパッケージをインストールします。

npm install recoil

２、状態を定義するために、atom関数を使用します。atom関数は、Recoilの状態のアトム（原子）を表します。

import { atom } from 'recoil';

export const countState = atom({
  key: 'countState',
  default: 0,
});

この例では、countStateというアトムを定義し、その初期値を0としています。ここはファイル名とあわせることがお多いです。

３、状態を使用するために、useRecoilStateフックを使用します。useRecoilStateフックは、アトムの現在の状態とその状態を変更するためのsetter関数を返します。

import React from 'react';
import { useRecoilState } from 'recoil';
import { countState } from './atoms';

function Counter() {
  const [count, setCount] = useRecoilState(countState);

  const handleIncrement = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

export default Counter;

この例では、useRecoilStateフックを使用して、countStateアトムの現在の値とその値を変更するためのsetter関数を取得しています。コンポーネント内でstateとして使用することができます。

４、RecoilRootを使用して、状態をReactアプリケーションに提供します。

import React from 'react';
import ReactDOM from 'react-dom';
import { RecoilRoot } from 'recoil';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root')
);

この例では、RecoilRootコンポーネントを使用して、アプリケーション全体に状態を提供しています。

Recoilのフックの種類

Recoilには、状態管理のために使用するためのいくつかのフックがあります。主なものは以下の通りです。

useRecoilState：アトムの現在の状態とその状態を変更するためのsetter関数を返します。
useRecoilValue：アトムの現在の状態を返します。状態を変更することはできません。
useSetRecoilState：アトムの状態を変更するためのsetter関数を返します。現在の状態を取得することはできません。
useResetRecoilState：アトムの状態を初期値にリセットするための関数を返します。

Recoilのフック使い所

1.useRecoilState

useRecoilStateは、アトムの現在の状態とその状態を変更するためのsetter関数を返します。このフックは、状態を読み取り、状態を変更する必要がある場合に使用されます。

例えば、以下のようにしてカウンターの状態を管理することができます。

import { useRecoilState } from 'recoil';
import { counterState } from './atoms';

function Counter() {
  const [count, setCount] = useRecoilState(counterState);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

2.useRecoilValue

useRecoilValueは、アトムの現在の状態を返します。状態を変更することはできません。このフックは、状態を読み取る必要がある場合に使用されます。

例えば、以下のようにしてカウンターの状態を読み取ることができます。

import { useRecoilValue } from 'recoil';
import { counterState } from './atoms';

function CounterDisplay() {
  const count = useRecoilValue(counterState);

  return (
    <div>
      <h1>Count: {count}</h1>
    </div>
  );
}

3.useSetRecoilState

useSetRecoilStateは、アトムの状態を変更するためのsetter関数を返します。現在の状態を取得することはできません。このフックは、状態を変更する必要がある場合に使用されます。

例えば、以下のようにしてカウンターの状態を変更することができます。

import { useSetRecoilState } from 'recoil';
import { counterState } from './atoms';

function CounterButton() {
  const setCount = useSetRecoilState(counterState);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

4.useResetRecoilState

useResetRecoilStateは、アトムの状態を初期値にリセットするための関数を返します。このフックは、アプリケーション全体のリセットが必要な場合に使用されます。

例えば、以下のようにしてカウンターの状態をリセットすることができます。

import { useResetRecoilState } from 'recoil';
import { countState } from './atoms';

function Counter() {
  const setCount = useSetRecoilState(countState);
  const resetCount = useResetRecoilState(countState);

  return (
    <div>
      <p>Count: {countState}</p>
      <button onClick={() => setCount((count) => count + 1)}>Increment</button>
      <button onClick={resetCount}>Reset</button>
    </div>
  );
}