jotai

はじめに こんにちは！ テクノロジー戦略本部24年新卒の高橋です。 2023年の10月から内定者インターンを経験し、現在は開発3部CRMチームでフロントエンド(以後、FE)エンジニアとして働いております。 チーム内でFEの状態管理ライブラリを選定する機会があり、調査していく中で得た知見を共有したく、執筆に至りました。 少しでも状態管理ライブラリの選定に困っているFEエンジニアの参考になればと考えています。 はじめに 概要 前提 課題感 Context APIの思想とのズレ Context APIの記述量の多さ 状態管理ライブラリに求める要素 小さい単位で取り扱い可能 ボイラーテンプレートが少な…

こんにちは。 DIGGLE エンジニアの ito です。 九月末になり、厳しい残暑に少しずつ終わりが見え始めた中いかがお過ごしでしょうか？ ここ数年は、残暑という名だけで本格的な暑さが続いているように感じています。 私はDIGGLEエンジニアという身分の他に自前の田んぼでお米を育てている兼業農家という身分もあるため、毎年稲刈りの時期までこの厳しい残暑が続いてしまうと困るなと思っています。 ですが、今年も無事残暑が落ち着いてから稲刈りを実施することができて安心しました。 毎年稲を刈る度に新しいライブラリが現れるフロントエンド界隈ですが、最近の DIGGLE のフロントエンドでは従来 Contex…

はじめに こんにちは！エキサイト株式会社の就業型インターンシップ Booost!!! に参加した吉田です。 本記事では、1 ヶ月のインターンシップで私が行ったことや学んだことについてご紹介します。 はじめに 自己紹介 インターンでの業務内容 実務の観点で学んだこと Jotai を用いたグローバルな State 管理 グローバルな State とは？ Jotai の特徴と基本的な使い方 Jotai を用いた snackbar の作成 おわりに 自己紹介 私は現在大学院修士 1 年生で、情報学を専攻しています。人工知能分野の研究を行っており、普段は Python を使ってデータ処理・データ分析のた…

React で jotai を使って local storage に JTW を保存して永続化・リロード時に状態を復帰するのをやってみためも。 (※ サンプルなので local storage に JWT を保存するのはセキュリティ的によろしくないってのは今回考慮していません ) シナリオ ログインの際に API から JWT token とユーザー情報が返される JWT token は local storage に保存する ユーザー情報は React の state にする 初回アクセス・リロード時にユーザー情報を永続化された JWT から復元するシナリオ local storage に …

「たったこれだけで "ひととおり" って言うな！」というツッコミは甘んじて受けます。 触ったもの useReducer + useContext 👍 React 本体の知識だけで使える ❌ reducer に非同期処理を書けない ❌ Context が増えてきたら非常に読みづらくなる ❌ 結果的に劣化 Redux ができがちなので、よっぽど小規模でない限りわざわざ採用するメリットは無い Redux Toolkit 👍 素 Redux と比べてボイラープレートコードは減った ❌ 非同期処理の絡むコードは必ずしも読みやすくない（私見） 非同期の処理は extraReducers という所に分けて書…

SPA はリロードすると state が消えてしまうので永続化したい状態ってのが結構あります 生の React だと カスタム hook や useEffect 内で localStorage にアクセスして保存させたえい、Recoil でも effect を使って永続化するコードを書く必要がありました jotai を使うと localStorage に保存するための API が用意されていて永続化がめちゃくちゃ簡単だったのでメモに残しておきます 環境 React 18.2.0 Next.js 13.2.4 jotai 2.0.3 TypeScript 5.0.2 atomWithStorag…

前回までのあらすじ React の軽量状態管理ライブラリ jotai に入門しました 今回は jotai の Provider と store の使い方について試したみたのメモです 環境 jotai v 2.0.3 React v 18.2.0 TypeScript v 4.9.3 結論 jotai の atom はデフォルトでは global として扱われる Provider の中で使用された atom は Provider の中で閉じられる Provider で囲われたコンポーネントから Provider の外の global な atom にはアクセスできない Provider の外の …