What's happening in the future of recoil? · Issue #1495 · facebookexperimental/RecoilYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Reactにおける状態管理の動向を追ってみた
こんにちは、@nerusanです。 皆さんは、状態管理ツールなどは使っておられますでしょうか。 例えば、有名なところでは、Redux, Recoilなどがあります。 今回は、Reactにおける状態管理についての動向を知ることで、なぜ、Reduxが使われるようになったのか？何をReduxなどのグローバルな状態管理ライブラリで扱えばいいのか？現状どうなっているのか？を調べたので、記事にしたいと思います！ 自身の解釈なので、もしかしたら、誤ったことを言っている可能性もあるので、その際はご指摘いただければと思います m(- -)m SPAの流行り SPAとはSingle Page Applicationの略であり、新しいページに移動する際、サーバからページを再読み込みするのではなく、JavaScriptを使って、クライアント側のブラウザで動的にページを書き換えるアプリケーションを指します。ページご
Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog
昨日、Facebook製のReact用ステート管理ライブラリRecoilが発表されました。Facebook製といってもReact公式のステート管理ライブラリとかそういう位置付けではないようですが、それでも大きな注目を集めているのは間違いありません。 そこで、筆者がRecoilに対して思ったことや、筆者の視点から見たRecoilの特徴を記事にまとめました。 なお、この記事の執筆時点では副作用の扱いなどの点はいまいち情報が揃っていません。この記事では速報性を重視し、コアのステート管理部分に絞って考えています。また、まだexperimentalなライブラリなので、今後この記事の内容からRecoilのAPIが変化したとしても悪しからずご了承ください。 この記事を書くときに筆者が色々試していたCodeSandboxはこちらです。 https://codesandbox.io/s/recoil-san
Testing | Recoil
Testing Recoil state inside of a React componentIt can be helpful to test Recoil state when testing a component. You can compare the new state against expected values using this pattern. It uses a React functional component, useRecoilValue and useEffect, to observe an atom/selector's changes and execute a callback every time the user performs an action that modifies the state. export const Recoil
「3種類」で管理するReactのState戦略
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Stateのアーキテクチャ」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが開発・運用しているアプリケーションのState戦略についてご紹介していきます。 全体像 アプリケーションに存在する状態（State）を以下の3種類に分類し、それぞれのやり方で管理しています。 サーバーデータのキャッシュ Global State Local State 1. サーバーデータのキャッシュ 「SPAで管理する必要のあるGlobal Stateって、そのうちほとんどがサーバーデータのキャッシュだよね。それを取り除けたら、管理する必要のあるGlobal Stateってすごく小さくなるんじゃない？」という主張を私が認識しはじめたのが2020年の初旬でした。おそらく
Recoilの非同期Selectorを考える - Qiita
こちらは株式会社POLテックカレンダー2021 13日目の記事になります。 前回の記事はこちら こんにちは。POLでフロントエンドを担当している根岸です。 今回は状態管理ライブラリRecoilについて書いていこうと思います。 Recoilも徐々にバージョンが上がってきて使いやすくなってきましたね！ 個人的にはRefresherの機能が追加されたのが嬉しいです！ ここが使いやすくなってくれるとありがたいなぁ〜なんて思っていました。今後に期待。 前置き さて今回はRecoilの特徴的な機能の1つ非同期Selectorについて考えていこうと思います。 以下のコードはRecoilのドキュメントのAsynchronous Exampleから持ってきたものです。 こちらのコード、Selectorと非同期ロジックが依存してしまっていてちょっと扱いづらいなって思いませんか？ あくまでサンプルなのでシンプル
React ステート管理 比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
Reactの実験的ステート管理ライブラリRecoilの基本的な使い方
Reactにおける状態管理の方法論は、様々な道を辿ってきました。ある人はReduxを使い、またある人はMobXを、またある人はuseContextで物事を解決してきたでしょう。 先日、また新しい選択肢が増えました。Facebook公式による状態管理ライブラリRecoilです。 まだExperimental（実験版）なので実際のプロジェクトに導入することは難しいですが、ちょっとつまみ食いをしてみましょう。 Recoil RecoilはFacebook製のReact状態管理ライブラリです。 小さくシンプルで、Hooksネイティブなライブラリとなっており、非同期処理にも対応している点が特徴です。 まだExperimental（実験版）ということで仕様は大きく変わるかも知れませんし、もしかしたらプロジェクト自体が凍結になるかもしれません。 しかしそれでも触ってみたくなるのが人間というものです。なの
Recoil触ってみた - stmn tech blog
Recoil入門 こんにちは。フロントエンドエンジニアの渡邉です。 最近フロントエンド界隈で盛り上がっているRecoilについて学びました。 本記事は自分のRecoil入門のついでに記事にしたので、初級者向けになっています。 目次 Recoilとは 使ってみる API Referenceを読む 参考サイト Recoilとは Fecebookが新しく発表したのReactの状態管理ライブラリです。 公式ドキュメント 使ってみる 何からやったらいいか分からない人もいるかも知れないので自分の学習手順を紹介しつつ実際に触っていきます。 公式ドキュメントのGetting Started & BasicTutorialをやる Recoilについて書かれている記事を読む 公式ドキュメントのAPI Referenceを読む みたいな感じで学習しました。 Getting Startedでは入力した文字を出力す
Atom Effects | Recoil
Atom effects are an API for managing side-effects and synchronizing or initializing Recoil atoms. They have a variety of useful applications such as state persistence, state synchronization, managing history, logging, &c. They are similar to React effects, but are defined as part of the atom definition, so each atom can specify and compose their own policies. Also check out the recoil-sync library
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:
【LINE証券 FrontEnd】Recoilを使って安全快適な状態管理を手に入れた話
こんにちは。LINEフィナンシャル開発センター フロントエンドエンジニアの峯です。 先日新卒としてLINE証券プロジェクトに配属となり、最初のタスクとしてRecoilによる状態管理の導入に取り組みました。 その際、なぜRecoilにしたのか、また本番開発にRecoilを使うにあたって設計に気をつけたことなどを本記事でご紹介しようと思います。 技術選定 いままでの状態と課題 LINE証券フロントエンドではReact+Typescriptによる開発を採用しており、いままでのグローバルな状態管理にはUnstated を用いていました。 Unstatedでは Container classを状態の単位とし、その内部の stateを setState によって更新します。状態を使用したいコンポーネント側では、<Subscribe> コンポーネントによって情報を読み出すことができます。 一方ご存知の通
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Recoilのテスト - mrsekut-p
useRecoilCallback - study-react
atom(options) | Recoil
recoil-ts-sample/src at master · ShutoYamada/recoil-ts-sample
How to refresh/invalidate an asynchronous selector? · Issue #85 · facebookexperimental/Recoil
Core Concepts | Recoil
Selectors | Recoil
GitHub - yuuu/next-ts-amplify-recoil-todolist