🕌

ReactのState管理にRecoilを採用

2023/07/22に公開

React

1. はじめに

こんにちは！しょみーといいます。現在Webエンジニア転職に向けてポートフォリオ作成中です！

Webアプリケーションの開発中にReactのState管理にRecoilを採用したので、今回はRecoilについて解説していきます。

2. 開発環境の紹介

Reactを使用したWebアプリケーションの開発では、State管理が重要な役割を果たします。State管理を効果的に行うために、様々なライブラリが提供されています。その中でも今回はFacebookが開発したRecoilを使用しました。
Recoilのようなグローバルなステート管理の仕組みを導入することにより、どのコンポーネントからでもその値にアクセスできるようになるため、不要なPropsの受け渡しがなくなります。

開発環境は、Reactをフロントエンドに採用し、TypeScriptを導入しました。ステート管理にはRecoilを使用。また、ルーティングにはreact-router-domを使用しました。
具体的な開発については、患者情報の管理システムを作成しています。患者の新規作成、一覧表示、更新といった基本的な機能を持つこのシステムで、どのようにRecoilが活用されているかを紹介します。

3. Recoilとその特徴の解説

3.1 RecoilRoot

Recoilは、アプリケーション全体で共有するStateを持つために、RecoilRootというプロバイダーコンポーネントを提供します。
RecoilRootは、アプリケーションの最上位に配置し、その子孫のコンポーネントからRecoilのステートにアクセス可能にします。

今回のコードでは、以下のようにAppコンポーネントの一番外側でRecoilRootが使用されています。

// App.tsx
import { RecoilRoot } from 'recoil';

const App = () => {
  return (
    <RecoilRoot>
      {/* Router and Routes are here */}
    </RecoilRoot>
  );
}

export default App;

3.2 atom

atomはRecoilが提供する最も基本的なState単位です。atomは、グローバルStateを定義し、それを変更するための関数を提供します。
ここで、keyとdefaultの二つのプロパティが必須となります。keyはグローバルStateの一意の識別子で、defaultはそのStateの初期値です。

今回のコードでは、以下のようにpatients.tsで患者のリストを管理するState、patientListStateがatomを使用して定義されています。

// patients.ts
import { atom } from 'recoil';

export const patientListState = atom<Patient[]>({
  key: 'patientListState',
  default: [],
});

3.3 useRecoilValueとuseRecoilState

Recoilでは、StateにアクセスするためにuseRecoilValueとuseRecoilStateという二つのフックを提供しています。
useRecoilValueは、Stateの現在の値を読むためのフックで、Stateが変更されるとコンポーネントは再レンダリングされます。
一方、useRecoilStateは、Stateの現在の値を読み、そのStateを更新するための関数も返すフックです。

今回のコードでは、患者のリストを表示するPatientsListコンポーネントでuseRecoilValueが、新規患者を作成するPatientCreateコンポーネントでuseRecoilStateがそれぞれ使用されています。

// PatientsList.tsx
const PatientsList: React.FC = () => {
  const patients = useRecoilValue(patientListState);
  // Rest of the component
}

// PatientCreate.tsx
const PatientCreate: React.FC = () => {
  const [patients, setPatients] = useRecoilState(patientListState);
  // Rest of the component
};

4. Recoilの採用メリット

Recoilを採用することで得られるメリットは以下の通りです。

コードの可読性の向上
Stateはatomとして定義され、全てのコンポーネントから直接アクセスできます。これにより、ステートの共有やパススルーが容易になり、コードの可読性が向上します。
非同期データ処理の容易さ
Recoilは非同期処理を直感的に書くための機能を提供しています。これにより、非同期データの読み込みや更新を簡単に行うことができます。
高度な最適化
Recoilはデフォルトで最適化が行われており、大規模アプリケーションでもパフォーマンスが保たれます。

5. さいごに

以上がRecoilの基本的な使い方とメリットです。

Recoilは、そのシンプルさと強力な機能により、ReactでのState管理を大きく改善することができます。State管理に悩んでいる方は、Recoilを試してみる価値があります。

以上、RecoilによるReactのState管理について解説してきました。React学習中やポートフォリオ作成している方がRecoilを使用する際の参考になれば幸いです。