チーム開発でRecoilを良い感じに使う（ベストプラクティス？）
はじめに 今回は「俺が考えた最強のRecoilの使い方」を紹介します Recoilのベストプラクティスを紹介する記事が見当たらなかったので書いてみました 既出でしたら申し訳ありません 間違いや改善点、疑問点等ありましたら是非コメントでご指摘ください 注意 本記事はRecoil修得済みの方向けの記事になります Recoilなんもわからんな方は是非以下の記事をご覧ください（Recoilはいいぞ） 1.サンプルアプリ 今回は数字を保存する状態hogeStateを加工したhogeStrStateを表示するアプリを例にとります create-react-appを使用して作成したプロジェクトです 左右のボタンによりインクリメント・デクリメントが可能 2.ディレクトリ構成 src ├── components ~省略~ └── recoil ├── {State名} | ├── index.ts | ├
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
recoilを理解する
今更ながらrecoilを勉強したので、そのまとめを書きます。 所感としては、reduxよりも書きやすく、学習コストも低いなと感じました。 基本的には公式ドキュメントをベースに説明しますので、そちらも併せて確認してください。 セットアップ 当たり前の、yarn add recoil。もしくはnpm install recoil。 その上で、RecoilRootで囲っときましょう。 import { RecoilRoot } from "recoil"; export const App: React.FC = () => { return ( <RecoilRoot> <Component /> </RecoilRoot> ); };
【LINE証券 FrontEnd】Recoilを使って安全快適な状態管理を手に入れた話
こんにちは。LINEフィナンシャル開発センター フロントエンドエンジニアの峯です。 先日新卒としてLINE証券プロジェクトに配属となり、最初のタスクとしてRecoilによる状態管理の導入に取り組みました。 その際、なぜRecoilにしたのか、また本番開発にRecoilを使うにあたって設計に気をつけたことなどを本記事でご紹介しようと思います。 技術選定 いままでの状態と課題 LINE証券フロントエンドではReact+Typescriptによる開発を採用しており、いままでのグローバルな状態管理にはUnstated を用いていました。 Unstatedでは Container classを状態の単位とし、その内部の stateを setState によって更新します。状態を使用したいコンポーネント側では、<Subscribe> コンポーネントによって情報を読み出すことができます。 一方ご存知の通
Recoil Patterns: Hierarchic & Separation
This article will discuss practical patterns in Recoil. It’s an advance topic that goes beyond Recoil basics, so we won’t spend time describing Recoil or its fundamentals concepts. If you’re not familiar with Recoil I suggest starting with the following sources: * Official Recoil YouTube * Recoil documentation This article is brought to you by WeKnow and represents insights gained during architect
[React+Recoil] Recoil でつくるお天気アプリ | DevelopersIO
お天気アプリを作りながら、リロードができない問題の解決策である Query Refresh Pattern を含め Recoil について学びます。 React の状態管理といえば Redux がまだまだ使われることが多そうですが、2020 年の 5 月に発表された状態管理ライブラリの Recoil を使ってシンプルなお天気アプリを作ってみました。 https://github.com/hbsnow-sandbox/recoil-sandbox 完成品は上記のリポジトリにあります。 今回つくるアプリについて セレクトボックスで都市を選択する、選択できる都市の情報はローカルで持たせる セレクトボックスの初期値は「選択なし」である 決定ボタンを押すとセレクトボックスで選択された都市の天気情報を表示させる API には OpenWeatherMap を使用する ローディング中には loading
![[React+Recoil] Recoil でつくるお天気アプリ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee41023e6f390843baace34a303c74b1767c52d0/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F07%2Freact.jpg)
React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 04 ー 状態を直接exportしないようにする - Qiita
React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 04 ー 状態を直接exportしないようにするJavaScriptTypeScriptECMAScriptReactRecoil 「React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 01 ー atomを使った項目操作」 「React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 02 ー selectorによるフィルタリングと集計」 「React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 03 ー 構成とロジックを整える」 前回は、Recoilの状態をコンポーネントから直に書き替えないようにしました。運用としては、これでもよいかもしれません。けれど、あえてRecoilの
Recoilで快適フロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
最近社内向けのツールを新規で開発していて、React + Next.js と合わせてRecoilとRelayを使うことにしたら大変素晴らしかったので、（すでに世の中に紹介記事がたくさんありますが）ご紹介します。 Recoilだけで結構な量になってしまったので、Relayについてはまた後日別の記事を書きます。 （追記：書きましたがRelay使わなくなったという記事になっちゃいました：GraphQLライブラリをApollo→Relay→Urqlにハシゴした話） Reactの提供元であるFacebook改めMetaが開発中の新しい状態管理ライブラリです。 アプリケーション内に複数のデータストアを持てる 非同期対応 React hooks前提 が特徴です。個人的に、Redux + middleware周りの全てをまるっと置き換えてくれると期待しています。 ※ 2021年11月現在、recoilはま
Recoil Syncでさらに快適フロントエンド開発 #ヌーラボ真夏のブログリレー | 株式会社ヌーラボ(Nulab inc.)
React界隈で大注目のRecoilについて、先日紹介記事を書いた藤田です。 Recoilで快適フロントエンド開発 Recoilに新しいパッケージRecoil Syncが加わったので、簡単にご紹介します。 軽くおさらい：コンポーネントの状態を管理する最もシンプルな方法=useState React hooksで最も基本的なuseStateは、コンポーネント中に閉じた状態を手軽に定義する方法でした。 const MyComponent: React.FC<{defaultName:string}> = ({defaultName}) => { const [name, setName] = React.useState(defaultName) : : このようなコードで、コンポーネント中で変更できる値”name”が使えて、初期値はコンポーネント引数のdefaultNameとなります。 Re
Reactの新しい状態管理ライブラリ「Recoil」とは？ Reduxとの違いを解説 - ICS MEDIA
Reactの開発において、状態管理の方法は注意深く検討する必要があります。状態管理ライブラリ「Redux」が大きい勢力ではありますが（参照：npm trends）、記事『ベストな手法は？ Reactのステート管理方法まとめ』でも紹介した通りさまざまな状態管理の手法が現在でも編み出されています。本記事では状態管理ライブラリ「Recoil」についての概要と簡単な使い方、Reduxとの思想の違いについて解説します。 Reduxによる状態管理の懸念点 Reduxでは状態管理を一か所にまとめられるというメリットがあります。これはメリットのように思えますが、小さな単位の状態管理もReduxに委ねるのか迷いどころです。 また、Reduxは状態更新の作法的な書き方が複雑でした。Redux ToolkitというReduxのアドオンとしてのJSライブラリもありますが、基本的には作法的な書き方はあまり軽減しませ
Recoil最低限 CRA編（2021年8月） - Qiita
Reactにおける最新のグローバルステート管理ライブラリであるRecoilを試してみたいと思います。グローバルで利用できるuseStateと捉えるのが一番イメージに近いかもしれませんね。手軽に使えるのでマスターしておきたいところです。 redux版も書きました。こちらをどうぞ。 やりたいこと recoilのテスト グローバルで値が維持されていることを確認するために最低限のrouting（ページ移動）も行う 値の永続化も行う やりたいことイメージをまとめると下記のような感じ。 準備 作業場の確保とライブラリのインストール npx craete-react-app recoil-test cd recoil-test npm install recoil react-router-dom recoilと関係のない実装（骨組みづくり） まず、複数ページからなる最低限の構造を作ります。とりあえずH
Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog
昨日、Facebook製のReact用ステート管理ライブラリRecoilが発表されました。Facebook製といってもReact公式のステート管理ライブラリとかそういう位置付けではないようですが、それでも大きな注目を集めているのは間違いありません。 そこで、筆者がRecoilに対して思ったことや、筆者の視点から見たRecoilの特徴を記事にまとめました。 なお、この記事の執筆時点では副作用の扱いなどの点はいまいち情報が揃っていません。この記事では速報性を重視し、コアのステート管理部分に絞って考えています。また、まだexperimentalなライブラリなので、今後この記事の内容からRecoilのAPIが変化したとしても悪しからずご了承ください。 この記事を書くときに筆者が色々試していたCodeSandboxはこちらです。 https://codesandbox.io/s/recoil-san
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Is the project still maintained? · facebookexperimental/Recoil · Discussion #2171
Async selector set function · Issue #762 · facebookexperimental/Recoil
【Typescript】いろいろな型の指定方法：React・Recoil編