こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
昨日、Facebook製のReact用ステート管理ライブラリRecoilが発表されました。Facebook製といってもReact公式のステート管理ライブラリとかそういう位置付けではないようですが、それでも大きな注目を集めているのは間違いありません。 そこで、筆者がRecoilに対して思ったことや、筆者の視点から見たRecoilの特徴を記事にまとめました。 なお、この記事の執筆時点では副作用の扱いなどの点はいまいち情報が揃っていません。この記事では速報性を重視し、コアのステート管理部分に絞って考えています。また、まだexperimentalなライブラリなので、今後この記事の内容からRecoilのAPIが変化したとしても悪しからずご了承ください。 この記事を書くときに筆者が色々試していたCodeSandboxはこちらです。 https://codesandbox.io/s/recoil-san
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか Reactを取り巻く状態管理のアプローチは変化を続けていますが、いま知っておくべき手法とはどのようなものでしょうか。小林 徹（@koba04）さんに、現在、そしてこの先の状態管理について執筆いただきました。 こんにちは、小林（@koba04）です。 2019年5月に『SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷』という記事を書きましたが、そこから2年以上が経過し、Reactを用いた状態管理は大きく変わりました。本記事ではReactを取り巻く状態管理の変遷について解説します。 広がるReduxの採用 Hooksの登場 コンポーネントツリーから独立した状態管理 Concurrent Featuresによる新しいユーザー体験 状態とキャ
はじめに この記事は、Alan Alickovicさんの著書「React Application Architecture for Production」をまとめたものになります。Alanさんと言えばZennで最も人気のある記事「bulletproof-react」の作者であり、彼のprojectから学ぶことはとても多い印象です。 今回紹介する本は2023年1月に公開されたため、bulletproof-react以後のReactアプリケーションにおけるベストプラクティスの宝庫となっています。また、本で扱われているアプリケーションのProjectがGitHubで公開されていることから、Projectを眺めるだけでも勉強になる点があるかと思います。 想定読者 Reactのアーキテクチャを模索している方 テスト手法やCI/CDなどのアプリケーション設計に関心がある方 使用される技術と本の構成 言
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Stateのアーキテクチャ」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが開発・運用しているアプリケーションのState戦略についてご紹介していきます。 全体像 アプリケーションに存在する状態（State）を以下の3種類に分類し、それぞれのやり方で管理しています。 サーバーデータのキャッシュ Global State Local State 1. サーバーデータのキャッシュ 「SPAで管理する必要のあるGlobal Stateって、そのうちほとんどがサーバーデータのキャッシュだよね。それを取り除けたら、管理する必要のあるGlobal Stateってすごく小さくなるんじゃない？」という主張を私が認識しはじめたのが2020年の初旬でした。おそらく
南太平洋の島国ツバルの総人口は１万１０００人。９つの環礁で暮らす人々にとって、残された時間は減りつつある。写真は人口の集中するフナフティ環礁の航空写真。９月６日撮影（２０２４年 ロイター/Kirsty Needham） ［フォンガファル（ツバル） ２５日 ロイター］ - 南太平洋の島国ツバルの総人口は１万１０００人。９つの環礁で暮らす人々にとって、残された時間は減りつつある。 フカノエ・ラアファイさん（２９）は、できれば子どもを産みたいと思っている。だが海面上昇を考えると、なかなか夢の実現には踏み切れない。科学者たちの予測では、子どもが成人する頃には、故郷の大半は海面下に沈んでしまうからだ。
こんにちは、@nerusanです。 皆さんは、状態管理ツールなどは使っておられますでしょうか。 例えば、有名なところでは、Redux, Recoilなどがあります。 今回は、Reactにおける状態管理についての動向を知ることで、なぜ、Reduxが使われるようになったのか？何をReduxなどのグローバルな状態管理ライブラリで扱えばいいのか？現状どうなっているのか？を調べたので、記事にしたいと思います！ 自身の解釈なので、もしかしたら、誤ったことを言っている可能性もあるので、その際はご指摘いただければと思います m(- -)m SPAの流行り SPAとはSingle Page Applicationの略であり、新しいページに移動する際、サーバからページを再読み込みするのではなく、JavaScriptを使って、クライアント側のブラウザで動的にページを書き換えるアプリケーションを指します。ページご
Reactでのシングルページアプリケーションを作成していると、必ず意識しなくてはいけないのが状態管理です。Hooks APIの登場により、アプリケーションの状態管理方法にも選択肢が増えてきました。2023年のReactアプリケーションの状態管理方法はどのような選択肢が考えられるでしょうか？ 状態管理の選択肢 Reactの状態管理として本記事でには紹介している手法は下記の4通りになります。 ローカルステート（useState、useReducer）での管理 Hooks APIのuseReducer、useContextを使った管理 Reduxによる管理 Recoilによる管理 状態管理フレームワークは他にも選択肢がありますが、Reduxを紹介します。理由は、候補として挙がるライブラリの中でもっともシェア数が多く、知名度が高いためです。 下図は、主要なReact状態管理フレームワークのダウンロ
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:
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.
The new wave of React state managementUnderstand the core problems state management libraries need to solve. And how the proliferation of modern libraries address them in new ways. IntroductionAs React applications grow in size and complexity, managing shared global state is challenging. The general advice is to only reach for global state management solutions when needed. This post will flesh out
こんにちは。LINEフィナンシャル開発センター フロントエンドエンジニアの峯です。 先日新卒としてLINE証券プロジェクトに配属となり、最初のタスクとしてRecoilによる状態管理の導入に取り組みました。 その際、なぜRecoilにしたのか、また本番開発にRecoilを使うにあたって設計に気をつけたことなどを本記事でご紹介しようと思います。 技術選定 いままでの状態と課題 LINE証券フロントエンドではReact+Typescriptによる開発を採用しており、いままでのグローバルな状態管理にはUnstated を用いていました。 Unstatedでは Container classを状態の単位とし、その内部の stateを setState によって更新します。状態を使用したいコンポーネント側では、<Subscribe> コンポーネントによって情報を読み出すことができます。 一方ご存知の通
ABEMA weber 勉強会 2021/06/30, 07/07 --- @uenitty 本当にあったモーダルの怖い話 ABEMA weber 勉強会 2021/06/30, 07/07 背景と目的 2 • モーダルに驚くほど苦しめられたので、状況を説明して改善方法を提案する • OO…
404This page could not be found.
Recoil 終了のお知らせ Recoilが2025年始にarchivedされたようです。 冗長的な書き方をせずにglabal stateを扱えるライブラリだったので、度々使用していましたが、何かしらの影響で開発停止となりました。 This repository has been archived by the owner on Jan 2, 2025. It is now read-only. 理由を調べてみた 元Metaのメンテナーの方が、以下のようなポストをしていました。 翻訳すると、 これは言われていることですが、まったく予想通りです。Meta が Douglas Armstrong を解雇した後、私は Recoil の唯一のメンテナーになりました。その後、私も解雇されました。社内の多数のプロジェクトでまだ使用されていますが、誰も責任を引き継ぎたくありませんでした (これはパフォー
React19のRCが発表され数ヶ月が経ちました。Next.jsではReact19のExperimentalな機能を使った実装をいち早くしていたので、少し馴染みのあるアップデートが多かったように思います。 Next.js（特にApp Router）においてReact19のAPIやHooksをどのように使うべきかはNext.jsのドキュメントを見れば大体のベストプラクティスが見えてきます。ですが、実際の開発現場ではApp Routerを採用しているケース以外にもVite+ReactやPages Router, Remixなどと様々な実装があるのが現実です。 そこでこの記事では、特にVite+Reactのスタックを前提にReact19の新機能をいかに活用できるか整理したいと考えています。 また、React19の新機能を見た時にTanStack QueryやSWRのようなサードパーティの状態管理
ReactはじめSPAのStateは大きく2種類、Local State・Global Stateの2種類でおおよそのStateの分類が可能であると考えていました。これに対し会社の先輩から意見をもらって、以下2点に気づきました。 Global Stateには大きく、Client StateとServer Stateの2つがある Stateにはライフタイム（生存期間）が存在し、Client Stateにはスコープ的Globalと時間的Globalの2つが含まれている これらを意識すると、自分はStateの実装を結構感覚的にやってしまっていたなと気づいたので、Stateの分類について改めてまとめてみようと思います。Reactで何かしらのStateを実装する時に、本稿の分類が実装の参考になれば幸いです。 スコープによるStateの分類 まずこれまで自分が認識してたスコープにおけるStateの分類
(Baffled by all these logos? Check out our architectural options guide to make sense of it all!) Start with a simple key-value store.Creating a Store requires just a simple call to the createStore function. Once you have one, you can easily set Values in it by unique Id. And of course you can easily get them back out again. Read more about using keyed value data in The Basics guide. import {create
Reactにおいて、フォームをどのように実装するかというのは開発者の悩みの種のようです。筆者は最近ロジックをRecoilに載せるのにはまっていますので、今回はRecoilを使ってフォームを実装することを考えてみます。 制御コンポーネントと非制御コンポーネント Reactにおいてフォームの実装方法は2種類に大別されます。それは、制御コンポーネント (controlled components) を使うか非制御コンポーネント (uncontrolled components) を使うかです。制御コンポーネントとは、入力されたテキスト等をReactのステートとして保持し、<input value={state} />のようにinput等のvalueに渡してレンダリングする方法です。制御コンポーネントではデータの本体がReact側にあり、DOMはそれを写像しているだけです。一方、非制御コンポーネン
ソーシャルネットワークサービスをつくって公開したので、リリースとして文章を書いてみます。 今のソーシャルメディアに対する自分の考え方とか、どういう感じで開発してたのか、みたいなことはいろいろあるんですが、そのへんはサービス利用する上で関係ない情報なので、あとの方に書きます。まずは、どんなサービスなのか、というところのご説明をします。 このサービスの機能つくったのは、「state」というサービスになります。stateという単語にはいろんな意味があるんですけど、このサービスにおける「state」っていうのは「状態」っていう意味です。「状態」っていう名前のサービスということになりますね。 「自分がいま何をしているのか？（＝状態）」をペロッと投稿することに特化したサービスです。 Twitter（X）と何が違うんだ、という話なんですが、かなり違います。 最新の投稿しか見えない。まず、一番特徴的なのが
You 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
You 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
A decision that arises over and over when designing concurrent programs is whether to represent program state in control flow or as data. This post is about what that decision means and how to approach it. Done well, taking program state stored in data and storing it instead in control flow can make programs much clearer and more maintainable than they otherwise would be. Before saying much more,
こんにちは。ぬこすけです。 皆さんは React でフォームをライブラリを使わずに実装する時にどう実装しますか？ おそらく useState を使いまくっているのではないかと思います。 少し上級者の方は useReducer を使っているかもしれません。 が、そもそも React で状態管理することなくフォームは実装できます 。 実際にコードをお見せしながら紹介しましょう。 ※記事の最後に紹介した全てのコード例を CodeSandbox に載せています。 ありがちな例 コードをお見せする前に、まずはありがちな例から見たいと思います。 （結論のコードだけ知りたい方は読み飛ばして OK です） 簡易的なフォームの例です。 useState を使った実装は次のようになります。 import { useState, ChangeEventHandler, FormEventHandler } fr
@riverpod Future<String> boredSuggestion(Ref ref) async { final response = await http.get( Uri.https('boredapi.com', '/api/activity'), ); final json = jsonDecode(response.body) as Map; return json['activity']! as String; } class Home extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { final boredSuggestion = ref.watch(boredSuggestionProvider); // Perform a switch
Signals is a performant state management library with two primary goals: Make it as easy as possible to write business logic for small up to complex apps. No matter how complex your logic is, your app updates should stay fast without you needing to think about it. Signals automatically optimize state updates behind the scenes to trigger the fewest updates necessary. They are lazy by default and au
Using Livebook to build and deploy internal tools @ ElixirConf 2024
The idea of state is one of the trickier things to nail down when you’re starting with React, and as your app grows, so do your state management needs. In this post I’ll give you the Grand Tour of state management options in React and help you decide which one to use in your project. What is State? Just so we’re on the same page, let’s talk about state for a second. Every interactive app involves
はじめに 今更ですが、Reduxに関する備忘録になります。 Reduxの基本的な考え方や公式のサンプルコードを読み解いていき、基礎を理解することを目的とした記事です。 そのため、公式ドキュメントで基礎を理解できるのであればこの記事を読む必要はありません。 Reduxの入門記事ですので、Reactは出てこないです。 Reduxとは state（状態）を容易に管理をするためのフレームワークのこと。Reactと相性が良いため、セットで紹介されていることが多いが、Redux自体は独立したものなので単体で利用することも可能。 redux（GitHub） Redux（ドキュメント） stateとは? 以下のようなViewに表示されているデータやUIの状態などのアプリケーションが保持している情報のことを指す。 そのため、「stateの変更」はViewに表示されているデータやUIの状態などが変更されること
You 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
StateとStatus、共に「状態」を意味する英単語です。 「~状態」というデータ型を定義するとき、どちらをつけるべきか悩むことがあります。 一旦Stateと名付けたものの、やっぱりStatusかなとなることもしばしば。 疑問 例えば、データの取得状況において、「更新前」「更新中」「更新済み」などの状態を管理するデータ型名はStatus、Stateどちらをつけるべきでしょうか？ 結論 この結論は、そのデータ型をどのように使うかで、StatusとStateどちらをつけても誤りではないということです。 つまりどのように使うかで、StatusとStateを決める必要があります。 例えば上記のデータ型をもちいて、「データの更新状況をユーザーに表示する」ことに使うのであれば、「Status」と名付けても問題ないと思います。 (ステータスバーのように。また、ユーザーはそれをみて自ら次のアクションがと
Angularアプリケーションの状態管理の方法はさまざまな実装がありえるが、その中でも典型的ないくつかのパターンを、それがどのようなニーズがあって選ばれるのかという考察を踏まえながら列挙する。パターンとその特徴を例示するのであって、それぞれのパターンにおける最良の実装を示すものでもないし、これらのパターンに該当しない実装を否定するものでもない。 Standalone Componentsなど、Angularのメンタルモデルが変わっていく兆しを見せる今、これらをまとめておくことは諸々のAngularアプリケーションの状態管理のあり方を見直すきっかけになるのでないかと思う。特に、NgRxがデファクトスタンダードであり唯一の選択肢だと考えている人には、それが単にひとつの選択肢であることを思い出してもらえるのではないだろうか。 コンポーネントクラスによる直接の状態管理一番最初のパターンは、次の例の
State Colocation will make your React app fasterSeptember 23rd, 2019 — 11 min read One of the leading causes to slow React applications is global state, especially the rapidly changing variety. Allow me to illustrate my point with a super contrived example, then I'll give you a slightly more realistic example so you can determine how it can be more practically applicable in your own app. Here's th
SWR と React Query どっち使ってるの 2021年12月の現状として、ついこの間まではSWRを使っていたが、最近React Queryに乗り換えた。 両方触ってみた感じ、たしかにReact Queryのほうが多機能（そのぶんバンドルサイズもデカいけど） ただ解決したい課題と解決手法は同じなので、APIはほとんど一緒。 腐敗防止層になる中継ファイルを作り、適切にAPIやOptionsを中継しておけば、乗り換えはそのファイル内の書き換えのみで済む。 機能比較ページ： https://react-query.tanstack.com/comparison React Queryの優位性（2021/12現在） キャッシュを参照しないオプション 乗り換えに至った直接的な理由。 あるリソース詳細を取得済みだったとしても、そのリソースの編集フォームではそのキャッシュを使いたくない。 なぜな
この記事は翻訳されたものです： この記事はAsync/Awaitをコミュニティの手により翻訳したものです。そのため、翻訳が完全・最新でなかったり、原文にない誤りを含んでいる可能性があります。問題があればこのissue上で報告してください！ 翻訳者： @kahirokunn, @garasubo, @sozysozbot 及び @swnakamura. With contributions from @asami-kawasaki 及び @Foo-x. この記事では、Rustの協調的マルチタスクとasync/await機能について説明します。Rustのasync/await機能については、Future trait の設計、ステートマシンの変換、 pinning などを含めて詳しく説明します。そして、非同期キーボードタスクと基本的なexecutorを作成することで、カーネルにasync/awa
You 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
You 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
2020年に、株式会社パルケのCTOに就任してから、Reactでいくつかのサービスを開発してきました。 状態管理ツールの選定に悩みに悩み、試しに試してブレまくってしまい、プロダクトでどのように状態管理ツールを使っていくのか混沌としてしまっていた時期がありました。 その時期にプロダクト開発に携わっていただいて、いろいろ混乱させてしまった開発メンバーの方には、この場を借りてお詫びしたいと思います。 なお、この記事は当時の個人の体験・印象に基づくものであり、事実とは異なる場合、現状とは異なる場合があります事をご了承ください。 状態管理ツールに求める事 コンポーネント間のデータの受け渡しをPropsを介在せずにできる事、データの変更に応じて関連するコンポーネントの再描画する事の２点だと思います。 これらはどの状態管理ツールでも問題なく実現できますので、選定にあたってはそれ以外の開発体験（という開発
Welcome to the world of Statecharts What is a statechart? A statechart can be explained in many ways, and we’ll get to those explanations, but essentially, a statechart is a drawing. Here’s a simple statechart: However, this drawing isn’t very useful for software engineers who want to reap the benefits outlined elsewhere on this site, so let’s dive into some other ways of describing what a statech
Ansibleでyum moduleを使っていたときに少しハマったのでメモします。 yum - Manages packages with the yum package manager — Ansible Documentation yum moduleとは その名の通り、RedHat系で利用されるパッケージ管理システムを利用してプロビジョニングを行うためのモジュールです。 このmoduleを利用して、パッケージをインストールしたり削除したりします。 各stateの一覧と意味 公式ドキュメントの state 欄にも Whether to install (present or installed, latest), or remove (absent or removed) a package. としか書かれておらず、結局それぞれの違いはなんだろうと思ったのがきっかけです。 state
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5igame.blogspot.com