2023年1月20日 Harajuku.ts Meetup 〜 Recoilの事例集めました〜 にて発表した資料です。
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
2023年1月20日 Harajuku.ts Meetup 〜 Recoilの事例集めました〜 にて発表した資料です。
Recoilにロジックを載せる運用戦略
皆さんこんにちは。株式会社バベルでエンジニアをしている uhyo です。バベルが提供しているaileadというプロダクトではNext.jsおよびReactを使用しています。以前から、自分はaileadのフロントエンドにおいてRecoilの利用を推進する活動をしてきました。実は、筆者が以前に公開した次の記事もその流れを汲んだものです。 Recoilはステート管理ライブラリとして知られていますが、筆者はRecoilのデータフローグラフを構築しその上にアプリケーションロジックを載せられるという点に可能性を感じています。実際、aileadではそのような方向性の設計に取り組んでいます。 そこで、この記事では筆者がaileadにおいて実践しているRecoilの運用を紹介します。 この記事はReact Advent Calendar 2022の8日目の記事です。 ステート更新に反応するならまずselec
React 用状態管理ライブラリ「Jotai」に入門
こんにちは．株式会社ゆめみの Keeth こと桑原です． 今回は Jotai という React 用の超軽量な状態管理ライブラリを触ってみたので勉強ログとしてまとめました．軽く使ってみた感触としては非常にシンプルで分かりやすく，導入も簡単でしたのでしたね． ただ，既に Jotai リリース後ある程度時間が経っており，Google で検索していただくとわかるかと思いますが，Jotai に関する記事もいくつかありますので，二番煎じな内容もありますことをご了承頂ければと思います． ※一応自分が手を動かしたコードのリポジトリも載せておきます 👇 https://github.com/kkeeth/my-jotai-demo TL;DR とにかく軽量で簡単 Redux が冗長に感じ，もっとライトなものを探している人にオススメ 軽量な分ルールが少ないのでカオスにならないように注意 Jotai の概要
Jotai, primitive and flexible state management for React
Fully compatible with React 18 and the upcoming use hook. Now with a store interface that can be used outside of React. Jotai takes an atomic approach to global React state management. Build state by combining atoms and renders are automatically optimized based on atom dependency. This solves the extra re-render issue of React context, eliminates the need for memoization, and provides a similar de
Reactの実験的ステート管理ライブラリRecoilの基本的な使い方
Reactにおける状態管理の方法論は、様々な道を辿ってきました。ある人はReduxを使い、またある人はMobXを、またある人はuseContextで物事を解決してきたでしょう。 先日、また新しい選択肢が増えました。Facebook公式による状態管理ライブラリRecoilです。 まだExperimental（実験版）なので実際のプロジェクトに導入することは難しいですが、ちょっとつまみ食いをしてみましょう。 Recoil RecoilはFacebook製のReact状態管理ライブラリです。 小さくシンプルで、Hooksネイティブなライブラリとなっており、非同期処理にも対応している点が特徴です。 まだExperimental（実験版）ということで仕様は大きく変わるかも知れませんし、もしかしたらプロジェクト自体が凍結になるかもしれません。 しかしそれでも触ってみたくなるのが人間というものです。なの
Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog
昨日、Facebook製のReact用ステート管理ライブラリRecoilが発表されました。Facebook製といってもReact公式のステート管理ライブラリとかそういう位置付けではないようですが、それでも大きな注目を集めているのは間違いありません。 そこで、筆者がRecoilに対して思ったことや、筆者の視点から見たRecoilの特徴を記事にまとめました。 なお、この記事の執筆時点では副作用の扱いなどの点はいまいち情報が揃っていません。この記事では速報性を重視し、コアのステート管理部分に絞って考えています。また、まだexperimentalなライブラリなので、今後この記事の内容からRecoilのAPIが変化したとしても悪しからずご了承ください。 この記事を書くときに筆者が色々試していたCodeSandboxはこちらです。 https://codesandbox.io/s/recoil-san
話題の「Recoil」を使ってTodoアプリ作ってみた with TypeScript - Qiita
はじめに Facebook公式から新しいステート管理のためのライブラリが公開されました。 その名もRecoilです。 特徴としては ミニマム Hooksではお馴染みのuseStateと同じようなAPI パフォーマンス問題が解決できる(Viewの再レンダリングを抑える) が挙げられるかと思います。 早速Todoアプリを作ってみましょう。 環境構築 $ npx create-react-app todo-recoil --typescript $ cd todo-recoil $ yarn add recoil 型定義しておく 意気揚々とTSで始めようとしましたが、型定義ファイルは2020/05/15 10時現在は無いようです。 ですが、TS supportがIssueで上がっていて、既に予定しているようです。 有志が型定義ファイルを作ってくださったみたいなので、今回はとりあえずそれを利用させ
Recoil
Minimal and ReactishRecoil works and thinks like React. Add some to your app and get fast and flexible shared state. Data-Flow GraphDerived data and asynchronous queries are tamed with pure functions and efficient subscriptions. Cross-App ObservationImplement persistence, routing, time-travel debugging, or undo by observing all state changes across your app, without impairing code-splitting.
Recoil について勉強した
Fecebook が新しく発表した Recoil について 自分の学習手順 Getting Started | Recoil を写経して動かす Facebook 製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog で非同期周りを理解 公式ドキュメントの API Reference で理解 <RecoilRoot ...props /> | Recoil これは自分が写経しながら書いた型定義。色々足りてないがチュートリアルで出る範囲は理解できる。 declare module "recoil" { export type RecoilState<T> = {}; export const RecoilRoot: React.ComponentType<{ initializeState?: (options: { set: <T>(recoilVal:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
