見出し画像

Web開発勉強日記 🧸その4🧸

ふぉい

さて、本日はお出かけをしていたので、お出かけまでのわずか1時間で学習したことをアウトプットしていきます！

あ、余談ですがGPTsすごですね〜🙌
目的に応じた専用の先生？メンター？になってくれる、より専門性の高い回答を引き出せるようになりましたね！！密かにバリバリ使いこなして周りと差をつけたいと思ってます・・・😇

本日の学び✍️

本日はRecoilについて学びました！

Recoilとは

RecoilとはMeta社が開発したReactの状態管理ライブラリです。
Reactを開発したMeta社が開発したこともあり、Reactの提唱する理念に沿った使用方法ができたり、信頼性という意味でも最近話題とのことです！

メリット

通常、状態管理はuseStateで管理をしてpropsで親から子、子から孫などに継承をしていきます。コンポーネントが少ない場合はこちらでも問題ないのですが、コンポーネントが多くなってくるとstateの管理が難しくなり、以下のようなデメリットが発生します。

  • 再レンダリングによるバグの発生

  • 可読性の低下

  • エラー特定の難しさ
    これを簡単に管理してくれるのがReactのライブラリーでもあるRecoilです。

Recoilを使用することでグローバルステートを1回の宣言のみで、定義をしてどのコンポーネントにおいてもバケツリレーをせずに読み書きが可能になります！また、かなり宣言的な書き方をするため管理や可読性にとても優れていると感じました。詳細は以下に書いていきます！

Storeの作成

Storeとは状態を管理する場所のことです。
Storeにて管理したい状態の定義を行います。

import { atom } from "recoil";

export const userState = atom({
  key: "userState",
  default: { isAdmin: false },
});

💡ポイント1
Aatomとは状態を管理する最小単位のこと

💡ポイント2
keyとは状態を管理するために一意に設定しなくてはいけない値のこと

💡ポイント3
defaultとはデフォルト値のこと

ステートの読み取り、書き込み

useRecoilState()フックを使用することにより、
ステートの読み取り、書き込みができるようになります。

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

const [userInfo, setUserInfo] = useRecoilState(userState);

💡ポイント1
recoilよりuseRecoilStateをインポートすること

💡ポイント2
useStateと同様な書き方ができます。
更新する変数、変数を更新するためのset関数をuseRecoilStateフックにて定義します。また、useRecoilStateの引数は対象のステートを入れます。上記のstoreで設定したやつですね！

ステートの取得（読み取り）

useRecoilValue()フックを使用することでステートを読み取り専用で取得することができます。読み取りしかできないならuseRecoilStateでいいじゃん！！と思ったのですが、こちらのフックを使用するメリットがいくつかあるのです！

  • メリットその1：状態の更新ができないため、不要な再レンダリングを防ぐことができる。つまり、シンプルな作りで最適化されることでバグを減らせる！

  • メリットその2：コンポーネント単位で読み取り専用なのか、更新専用なのかを明示的に分けられるため、可読性が上がる⤴️⤴️

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

const userInfo = useRecoilValue(userState);

💡ポイント1
recoilよりuseRecoilValueをインポートすること

💡ポイント2
useRecoilValue()の引数は対象のステートを入れます。

ステートの更新(書き込み)

useSetRecoilState()フックを使用することで、ステートの更新のみ行えるようになります。こちらは更新専用となるため、useRecoilValue()フックと同様に不要な再レンダリングを防ぐことができます！

import { useSetRecoilState } from "recoil";
import { userState } from "../../store/userState";

const setUserInfo = useSetRecoilState(userState);

💡ポイント1
recoilよりuseSetRecoilStateをインポートすること

💡ポイント2
useSetRecoilState()の引数は対象のステートを入れます。

まとめ🙆‍♂️

Recoilを知る前はpropsのバケツリレーを出来る自信がない・・・😇と自信喪失していましたが、便利なライブラリがあるもんですね！！
他にもRedux,Jotaiなど状態管理ライブラリはたくさんありそうなので、メリデメくらいは把握して実務で選定できるようになりたいです！

では( ＾∀＾)

いいなと思ったら応援しよう！