こんにちは。ぬこすけです。 皆さんは React でフォームをライブラリを使わずに実装する時にどう実装しますか？ おそらく useState を使いまくっているのではないかと思います。 少し上級者の方は useReducer を使っているかもしれません。 が、そもそも React で状態管理することなくフォームは実装できます 。 実際にコードをお見せしながら紹介しましょう。 ※記事の最後に紹介した全てのコード例を CodeSandbox に載せています。 ありがちな例 コードをお見せする前に、まずはありがちな例から見たいと思います。 （結論のコードだけ知りたい方は読み飛ばして OK です） 簡易的なフォームの例です。 useState を使った実装は次のようになります。 import { useState, ChangeEventHandler, FormEventHandler } fr
初めに こんにちは、アジアクエスト株式会社でフロントエンドエンジニアをしていますかめぽんです。初めてZennの記事を書きます！がしかし、なんの記事を書こうかな迷っていまして、最近VueのComposition APIを業務で触ることがあったので、そこでの知見とかちょこっと考察してみたのでそれを書き留められればと思います。この記事で扱う機能はまだ改善の余地が含まれるため、一つの参考として捉えてもらえればと思います。 Composition APIについて Vue3にも搭載されたことでも話題のComposition APIですが期待値の高さから見るに、知っている人も聞いたことある人も多いと思います。3.0だけでなく2.x向けのpluginも配布されているので手軽に触ることができると思います。 Vueと言えば、Options APIでSFCを書くことがほとんどかと思いますが、今回用意されたAPI
前編と後編の2部構成にしています。 前編は【今までのReactらしい状態管理術】 後編は【Next.js 13 /app (React Server Components) らしい状態管理術】 の説明です。両者を比較します。 コンポーネント単位でサーバー側のレンダリングを選択できるので、GraphQLでなくてもバックエンドへのアクセスを纏められたり、あらかじめサーバー側でデータを加工することで、バンドルサイズ0を目指せる React Server Components 。 これは周知の通り、クライアントコンポーネントとサーバーコンポーネントに分かれますが、 useState や Recoil などはサーバーコンポーネントでは利用できないので、 Next.js 13 /app （React Server Components） らしい状態管理術はこんな感じになります。 サーバーコンポーネント
Redux Toolkit で React.js の状態管理をもっと簡単にする方法[TypeScript版] React.jsの状態管理ライブラリはReduxが有名ですが、結構複雑だったりステートを一つ更新するだけでもタイプ量が多くなってしまうというデメリットもあります。 そこでこの記事ではRedux Toolkitというライブラリを使用して、もう少し簡単に状態管理する方法をご紹介します。 投稿日2020年01月27日 更新日2020年01月29日 環境は react : 16.12 typescript : 3.7 @reduxjs/toolkit : 1.2 react-redux : 7.1 でお送りします。 この記事でやること 基本的に以前作成したTodoアプリにRedux Toolkitを導入します。 Todoアプリについては下記記事を参照ください。 React.js + Typ
![Redux Toolkit で React.js の状態管理をもっと簡単にする方法[TypeScript版]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a30174b13b59e7f3dd471819be977e4692229a1e/height=288;version=1;width=512/https%3A%2F%2Fwww.webopixel.net%2Fblog%2Fwp-content%2Fuploads%2F2018%2F08%2Freact-icon.png){kind=tracking}
「状態管理」って何？
状態管理ってなに？？ フロントエンド界隈でかなり頻繁に飛び交うワード「状態管理」。 しかし、状態管理とは何か。正直「全然わからん」な方って結構いらっしゃるのではないでしょうか。 状態管理とはフロントエンド特有の特殊な事情から生まれたワードであり、設計論的なテーマなのでフロントエンド初心者、特に駆け出しエンジニアの方々にはえらく取っ付きにくい印象を与えてしまいます。 今回はそんな方々に分かりやすく「状態管理」について説明していこうと思います。 対象読者 状態管理って言われてピンとこないエンジニア TL,DR 「状態管理」とは、SPA開発においてステートレスにUIを実装する上で必ず発生する 「では、どこに・どうやって状態を持つのか？」 というテーマのことです。(あくまで筆者の解釈です。) SPA開発における複雑さは「状態」によって生まれる 従来のフロントエンドの主流はデータを静的なHTMLに変
Serverless Frontend Meetup #1 「Cloudflare Workers」
Mac ノートブックのバッテリーの状態管理について Intel プロセッサを搭載した Mac ノートブックコンピュータは、コンピュータのバッテリーの耐用年数 (寿命) を延ばすことを狙いとした「バッテリーの状態管理」という機能を利用します。 Mac ノートブックのリチウムイオンバッテリーについて Mac ノートブックのバッテリーには、リチウムイオン技術を採用しています。リチウムイオンバッテリーは充電が速く長持ちで、現時点では、コンピュータへの給電という目的に一番ふさわしい技術です。 充電式のバッテリーは消耗部品なので、古くなればその能力も落ちていきますが、劣化の度合いは時間だけでは決まりません。バッテリーの耐用年数は、その化学的経年劣化に左右されますが、温度の履歴や充電パターンなどが劣化の要因です。ノートブックのバッテリーの化学的経年劣化が進むと、充電容量は減っていきます。 バッテリーを最
Next.js 入門 状態管理をする簡単な方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Next.jsでReact Contextを使用する コンテキストの使用 最後に Reactアプリケーションで状態を管理するには、常にReduxが必要なわけではありません。 Reduxは、アプリケーションが複雑になり、状態管理が複雑になる場合に使用することが推奨される状態管理ライブラリの一つです。 Next.jsを使用してアプリケーション全体で状態を管理する場合、Reactライブラリの一部である「ReactContext」を使用することが最も簡単な方法です。 ただし、グローバル状態オブジェクトを使用することがすべての種類のプロジェクトで便利であるとは限りません。 アプリケーションの規模や性質に合わせて最適な状態管理方法を選択することが重要です。 React Contextについては、当ブログで詳しく解説しておりますので下記を参照下さい。 dev-k.hatenablog.com Next.
Angularアプリケーションの状態管理の方法はさまざまな実装がありえるが、その中でも典型的ないくつかのパターンを、それがどのようなニーズがあって選ばれるのかという考察を踏まえながら列挙する。パターンとその特徴を例示するのであって、それぞれのパターンにおける最良の実装を示すものでもないし、これらのパターンに該当しない実装を否定するものでもない。 Standalone Componentsなど、Angularのメンタルモデルが変わっていく兆しを見せる今、これらをまとめておくことは諸々のAngularアプリケーションの状態管理のあり方を見直すきっかけになるのでないかと思う。特に、NgRxがデファクトスタンダードであり唯一の選択肢だと考えている人には、それが単にひとつの選択肢であることを思い出してもらえるのではないだろうか。 コンポーネントクラスによる直接の状態管理一番最初のパターンは、次の例の
JotaiはReactの新しい小粒な状態管理ライブラリ
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
Reactの基本を学ぼう～コンポーネントで動的な状態管理
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
SWRはローカルの状態管理としても使える
SWRとは SWRとはReactのためのデータフェッチライブラリです。 詳しい説明は省略しますが、リモートのデータ取得のためのキャッシュ機構を提供するライブラリとして知られています。 この記事では、そんなSWRが実はローカルの状態管理にも使用できることを紹介します。
公開日 2019.6.2更新日 2019.6.16カテゴリ：Vue.jsタグ：JavaScript,Vue,Vuex
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。 Zustandとは ZustandはReactの状態管理ライブラリの一つです。シンプルで使いやすく、他の状態管理ライブラリと比べてもコード量が少ないです。 基本的な使い方については、以下のエントリで書いています。 今回は、Zustandのミドルウェアを使ってみました。基本的には、公式のGitHubに沿って進めています。 Next.jsプロジェクトを作成 前回、エントリで使用したコードをそのまま使っていきます。 $ npx create-next-app sample-zustand --ts $ yarn add zustand // または $ npm install zustand libs/index.ts import create from "zustand"; type Count = { coun
Reactの状態管理ライブラリを比較してベストな選択をしよう！ | Reactおじさんブログ
Reactの状態管理ライブラリを比較してベストな選択をしよう！2022-11-032023-01-04 どうもReactおじさんです。 昨今のReact、Next.jsの進化の早さにはとても驚いています。 それはReactに追従するライブラリも同様です。 特にReactの状態管理ライブラリは戦国時代を迎え、様々な状態管理ライブラリが台頭してきました。 今回はライブラリの紹介、これから使用されていくであろう物にフォーカスして自分なりにまとめてみようと思います。 ※2022年版に更新しました。 結局、状態管理ライブラリは何が人気なのか？？JavaScript Rising StartsのState Management部門(2022)とnpm trendsを見ていきましょう。 JavaScript Rising Starts ※ JavaScript Rising StartsとはGithub
7つの入金外部サービスと連携して分かった実践的な”状態管理”設計パターン3選 | Kaigi on Rails 2022 - inSmartBank
こんにちは、株式会社スマートバンクでサーバーサイドエンジニアをしている mitani です。 この記事は2022/10/21~22に開催されたKaigi on Railsでお話した内容を記事にしたものです。当日の発表はYouTubeからご覧いただくことができますが、まだご覧になっていない方で動画よりも文字で見たいという方向けに、特にお伝えしたかったポイントに絞りながらご紹介したいと思います。 www.youtube.com 外部サービスと状態管理 サービスを作る際、状態管理は至るところで実装する必要のある機能です。例えばログイン状態、会員の登録状態等のどのようなサービスでも共通的に実装するものから、商品の購入状態、決裁フローの現在状態などサービスによって異なるものまで様々な状態管理があります。状態管理の設計方法はその機能の要件によって大きく変わってくるものではありますが、正確に状態を記録し
TL;DR inject/provideとslotでcontextを作れる pc/spで同じロジック&違うテンプレートを扱う時に状態を共有したい時とか有用 先日Vue 3.x系のRCが外れ正式にリリースされたということで、みなさんゴリゴリcomposition apiを書いていることかと思います。 ここでは、3系になりより扱いやすく強力なAPIとなったprovide/injectを用いて、コンポーネント間の状態管理を行う方法を紹介します。概念的にはReact Contextとほぼ同じようなものなので、目新しいものではありません。また、この機能はsetupプロパティを通してのみ値の取り出しや加工ができるため、Option APIを引き続き使う場合は注意してください。 provide/injectのおさらい Vue 3になりprovideとinjectは関数として外部へ公開され、さらにリアクテ
Flutterアプリの主流な状態管理パターンと導入事例まとめ（2020年版） - TetsuFeの個人開発ブログ
はじめに 状態管理パターンとは？ Flutterの主流な状態管理パターン どれを選ぶべき？ パターン1. StatefulWidget パターン2. InheritedWidget / InheritedModel もっと詳しく パターン3. ChangeNotifier/ValueNotifier + Provider 導入事例 もっと詳しく パターン4. BLoC + Provider BLoCのメリット、デメリット コード例 導入事例 flutter_blocとBLoC BLoCの課題 Stream＝BLoCではない おまけ：BLoCの歴史 cubit もっと詳しく パターン5. state_notifier + freezed + Provider 例 もっと詳しく 新パターン. Riverpod + ? package:providerとの比較 もっと詳しく アーキテクチャパター
macOS 10.15.5 CatalinaでMacBook Air/Proに導入された新しいバッテリー状態管理機能は、MacBookのバッテリー駆動時間を短くする可能性があるので注意を。
macOS 10.15.5 CatalinaでMacBook Air/Proシリーズに導入された新しいバッテリー状態管理機能は、MacBook Air/Proの駆動時間を短くする可能性があるので注意して下さい。詳細は以下から。 Appleは現地時間2020年05月26日、macOS Catalinaの5度目のアップデートとなる「macOS Catalina 10.15.5 Build 19F96」をリリースし、このアップデートにMacBook Air/Proに搭載されたバッテリーの経年劣化の進行に合わせてピーク容量を減らし、バッテリー寿命を伸ばす新しい「バッテリーの状態管理機能(Battery health management)」を追加していますが、この機能は以下の通り、MacBookシリーズのバッテリー駆動期間を短くする可能性があります。 macOS Catalina 10.15.5で
はじめに この記事はDominikさんが執筆された「Thinking in React Query」を参考にReact Queryの考え方をまとめたものになります。DominikさんはTanStack Query（以下ではReact Queryと呼ぶ）のコアメンテナーであり、彼のブログからReact Queryについての知見を吸収することができます。 目次 React Queryはデータフェッチライブラリではない ではReact Queryとは何か？ Client StateとServer Stateの違い React Queryは非同期の状態（Server State）管理ライブラリである キャッシュを有効活用する React Queryのキャッシュについて staleTimeでキャッシュをコントロールする queryKeyを適切に設定する まとめ 🎆 React Queryはデータフ
Appleは日本時間5月27日、「macOS Catalina 10.15.5」をリリースしました。 MacBook ProやMacBook Airの省エネルギー設定に、新たにバッテリーの状態管理機能が追加されています。 また、グループFaceTime通話のオプションの追加のほか、バグ修正や改善が含まれています。 バッテリーの状態管理機能はデフォルトで有効となっています。 Apple メニュー ＞「システム環境設定」＞「省エネルギー」＞「バッテリーの状態」 この機能の詳細や無効にする方法などは次のサポートページをご覧ください。 Mac ノートブックのバッテリーの状態管理について - Apple サポート macOS Catalina 10.15.5 macOS Catalina 10.15.5では、ノートブックの“省エネルギー”設定にバッテリーの状態管理機能が追加されるほか、グループF
Piniaとは PiniaはVue用のState Managementライブラリで複数のコンポーネントでデータを共有するために利用することができます。アプリケーションの中にStoreという場所を準備しその中にコンポーネント間で共有の必要があるデータを保存していきます。またデータを保存するだけではなくデータを更新する機能も備えています。 Piniaによるデータ管理のイメージ Vueプロジェクトの作成 Piniaを利用するためにVueのプロジェクトの作成を行います。本文書ではViteでプロジェクトを作成後にnpmコマンドでpiniaのインストールを行います。 viteではなくnpm init vue@latestコマンドを利用するとプロジェクトの作成と同時にpiniaをインストールすることもできます。 Viteによるインストール npm init viteコマンドを実行してVueのプロジェクト
useStateと同じ感覚で、グローバルのstoreをかけるので、これが最も使いやすいstore管理なのではないかなと思います。 今まで状態管理で、ReduxとかMobxとか、あれやこれや悩んでいたことが嘘のように一掃される感。 俺はこれを待ってたんだ感がします。すごいライブラリ！ zustand - npm pmndrs/zustand: 🐻 Bear necessities for state management in React Code import { useStore } from "./store"; import "./styles.css"; export default function App() { const countDefault = 1; const { count = countDefault, setCount } = useStore(); ret
![[JavaScript] Reactの状態管理にはZustandが決定解になるような気がする](https://cdn-ak-scissors.b.st-hatena.com/image/square/8306f0e4614b1b55d37afb2f1a10bba13678f821/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--HaC5xTUh--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BJavaScript%25255D%252520React%2525E3%252581%2525AE%2525E7%25258A%2525B6%2525E6%252585%25258B%2525E7%2525AE%2525A1%2525E7%252590%252586%2525E3%252581%2525AB%2525E3%252581%2525AFZustand%2525E3%252581%25258C%2525E6%2525B1%2525BA%2525E5%2525AE%25259A%2525E8%2525A7%2525A3%2525E3%252581%2525AB%2525E3%252581%2525AA%2525E3%252582%25258B%2525E3%252582%252588%2525E3%252581%252586%2525E3%252581%2525AA%2525E6%2525B0%252597%2525E3%252581%25258C%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Astandard%252520software%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2hUTFVOWW5kSkNCbFBkYUppM1BJU2xsaVd4Mi1UTDU4MTU3eE1kPXM5Ni1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
SWRと状態管理
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
Flutterの状態管理ツールをproviderからriverpodに移行しました - Diverse developer blog
id:kikuchy です。 婚活サービスyoubrideのスマートフォンアプリは以前からFlutterを採用しています。 developer.diverse-inc.com このアプリでは、始めはscoped_model、次にproviderを状態管理ツールとして採用してきました。 この度、通常の開発を大きく止めることなくproviderからriverpodへと移行できたので、どのように移行したのかをお話したいと思います。 前提：なぜriverpodにしたのか providerパッケージ（以下、provder）もriverpodパッケージ（正確にはflutter_riverpodパッケージ。以下、riverpod）も同じ作者（Remi Rousseletさん）による状態管理＆依存性注入のためのライブラリです。 両者で実現できる機能はほとんど変わりません。 できることは主に以下のとおりです
【入門編】Reduxによる状態管理の仕組みを理解する
まず結論から Reduxを理解する上では、この図解(引用元：Redux Application Data Flow)を理解できれば90%はOK。 ユーザーの入力から、(ActionCreatorが)Action(アクション)を作成する Store(状態を管理するところ)へActionをDispatch（送信）する DispatchされたActionをReducer（状態を変更するところ）へ渡す Reducerが作成した新しいStateをStoreが保存する Storeからデータを参照してView（画面）に描画する 「ここが間違ってる！」や「もっとこんな仕組みが使われてるよ！」等のツッコミがあれば、どしどし貰えると助かります！(そのために書いてるみたいなところも多いので！) Reduxとは Reduxは、Reactが扱うUIのstate(状態)を管理をするためのフレームワークです。 Reac
本文書ではできるだけシンプルな例を通してVuexの説明を行っていきます。Vuexを使った経験がないという入門者の人また下記の図がわからないという人を対象にしています。Vuexが難しいなと感じている人がいるとすれば用語がこれまでのvue.jsよりも増えていることまた記述方法が長かったり短縮形によって複数の書き方があることが原因だと思います。一度理解してしまえば決して難しいものではないので安心して読み進めてください。 vuex diagram Vue3では新たに状態管理のライブラリとしてpiniaが登場しました。Vue3で新しいプロジェクトを作成する場合にはpiniaを利用することが推奨されています。
この記事はフューチャー Advent Calendar 2021の11日目の記事目です。 弊社のブログでもFlutter連載が行われているので、興味のある方はご一読ください。 https://future-architect.github.io/articles/20210510a/ はじめに Flutterにおける状態管理の方法は様々なパターンが存在してますが、いい意味で非常に変化が激しく、確固たる状態管理のパターンというのはまだ確立されていません。 Flutterの状態管理に関する記事は調べれば多く出てきますが、1年前の記事ですら古い内容を含んでいる場合が多いので、自らのキャッチアップの意味も込めて、本記事では2021年12月時点での状態管理のパターンを整理したいと思います。 文章や図だけだと状態管理手法の違いについてイメージが湧きづらい方もいると思いますので、この記事ではソースコード
はじめに 現在携わっているプロジェクトの技術選定で GraphQL を使うことになり、 GraphQL クライアントとして Apollo Client を採用することになりました。 最初は GraphQL をクライアントサイドで便利に使えるようにしてくれるものくらいの認識で、クライアント側の状態管理には別途 Redux とか入れるのかなと思っていたのですが、調査の過程でたまたま Apollo Client は Redux を置き換えるとの記事を見かけたので Apollo Client のキャッシュの仕組みと状態管理について少し調べてみました。 この記事では下記のことについて解説します。 Apollo Client とは Apollo Client のキャッシュの仕組み Reactive variables を利用したローカルの状態管理について かなり内容がもりもりになってしまったのですが、
React 用状態管理ライブラリ「Jotai」に入門
こんにちは．株式会社ゆめみの Keeth こと桑原です． 今回は Jotai という React 用の超軽量な状態管理ライブラリを触ってみたので勉強ログとしてまとめました．軽く使ってみた感触としては非常にシンプルで分かりやすく，導入も簡単でしたのでしたね． ただ，既に Jotai リリース後ある程度時間が経っており，Google で検索していただくとわかるかと思いますが，Jotai に関する記事もいくつかありますので，二番煎じな内容もありますことをご了承頂ければと思います． ※一応自分が手を動かしたコードのリポジトリも載せておきます 👇 https://github.com/kkeeth/my-jotai-demo TL;DR とにかく軽量で簡単 Redux が冗長に感じ，もっとライトなものを探している人にオススメ 軽量な分ルールが少ないのでカオスにならないように注意 Jotai の概要
コンパウンドスタートアップのためのスケーラブルでセキュアなInfrastructure as Codeパイプラインを考える / Scalable and Secure Infrastructure as Code Pipeline for a Compound Startup
hooks APIで整理することでReduxが不要に。asoview.comにおけるReact状態管理の変遷 - asoview! Tech Blog
こんにちはアソビューのフロントエンドエンジニアの井上です。 ヌルゲーマーなので満月の女王レオナを昨晩ようやく倒せてガッツポーズです。#エルデンリング はじめに Reactベースのフロントエンドの状態管理、よそはどうやってるんだろう。。 気になりますよね？私も気になります。 今回はアソビューにおける状態管理の変遷と今どのように扱っているか、について紹介したいと思います。 結論から言うとReactとその周辺のライブラリの変遷に振り回されましたが、hooks APIの登場でしがらみから開放されて（Reduxを使わずに）スッキリしました。 なので最初に言っておくと、Reduxやその他状態管理ライブラリの話はあまりしないです。。それらは誰にとっても必要なものではないのでは？というスタンスです。 共感できる方は「あるある」とか「それな」とか言いながら読んでいただけると幸いです。 これまでのアソビューの
SwiftUIの状態管理の基礎
概要 2019年のWWDCにおいてSwiftUIが発表されてから約3年が経過し、プロダクトにSwiftUIを導入する方も増えてきたのではないでしょうか。そしてSwiftUIベースのアプリケーション実装において、状態管理をどうするか、という問題があると思います。本稿では私が開発しているアプリケーションにおいて状態管理についてどのように考えているかについて紹介していきます。 状態・状態管理とは SwiftUIのような宣言的シンタックスを採用しているフレームワークにおいて、大きな関心ごとの一つに状態管理があります。そこでまずは状態・状態管理についての定義を確認し、重要な概念であるSingle source of truthについても触れていきます。 状態 状態とは、UIを(再)構築するために必要なデータのことを指しています。 SwiftUIの場合、Textの引数にString型のデータを渡すこと
React 状態管理ライブラリReduxとは【仕組みと使い方】入門 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
当ブログの記事でReact学習されている読者様やそうでない初心者様もReactを学び始めて、Reduxという用語を何度も聞いたことがあるかもしれません。 特にWeb開発の世界に不慣れな方は、名前を聞いたことがあるかもしれませんが、ほとんどの方々は『 Reduxとは何ですか? 』と疑問に思っている方も多くいらっしゃるかと思います。 それを解決し、仕組みと使い方を学んでいきましょう。 この記事では、Reduxとは何かを説明し、その主な機能について説明します。 Reduxとは？ Reduxの仕組み Reduxのアクション Reduxのディスパッチ Reduxのreducer ReduxのStore Reduxはまだ正しい選択なのか？ 最後に Reduxとは？ Reduxは、Reactアプリケーションの状態管理ライブラリであり、アプリケーション内の状態をより効率的に管理するために使用されます。 毎
Vue Fes Japan 2023のLT登壇用の資料。
React 新しい状態管理ライブラリ Recoil の紹介 | Ria
2020/05 Facebook から新しい状態管理ライブラリ Recoil がリリースされました。 まだ実験的な実装のようですが、これまでの状態管理のアプローチにない魅力があったので試していきます。 Recoil の何が嬉しい？ React で一番有名な状態管理ライブラリといえば Redux ですが、 Redux は root コンポーネントなど上位のコンポーネントで Provider を設定し、 1 アプリケーションに巨大な state ツリーを 1 つ持ちます。 これではコンポーネントからでも Redux が持つすべての state にアクセス出来ます。 グローバルな変数が使いやすいのは当たり前で、それが複雑化してくると急に影響範囲がわからなくなったり意図しない副作用に悩まされます。 そんな背景もありコンポーネント内に状態を持つ分割統治がトレンドになってきていて Recoil はこの
aptpodフロントエンドエンジニアの黒川です！ aptpod Advent Calender2020の19日目を担当します。 2020年は新型コロナウイルスの世界的流行により全てが一変した年でした。 オリンピックも延期になりましたし、私達の生活様式や働き方、価値観まで変わりました。 そんな2020年にReactの状態管理を大きく変えるライブラリがリリースされました。それがRecoilです。 Recoilについては、私の以前書いた記事でも名前だけ触れました。 2020年の5月に行われたReact Europe2020で発表され、瞬く間に注目を浴びまして、2020年12月現在GitHubスター数1万を超えるなかなかの人気ライブラリとなっております。 とはいえ、npm trendsなどを見ても、同じく状態管理ライブラリであるReduxやMobXには大きく水をあけられており、まだまだ実際に使われ
2022年11月16日 Nuxt 3.0.0 (stable) がリリースされました（日本時間11/17） Announcing 3.0 • Nuxt この記事はベータリリース時に初稿を公開しましたが、本リリース版に対応するため加筆修正しています。 Nuxt 3 の useState を使った State 管理（状態管理）の記事です。 Nuxt 3 では Vuex がサポートされていません。 Vue 3 に対応した Vuex 5.x がリリースされるのを待たずとも Nuxt 3 にもいち早く対応した Pinia を使って State 管理をすることは可能です。 しかし、それほど大規模なアプリケーションでなければ useState と Composables (Composition Function) を組み合わせることで非常に簡単に State 管理をすることが可能になります。 Pini
若干強めのタイトルです。あらゆるケースでReduxが不要と主張するつもりはありません。 しかし、Reduxが不要と思われるケースでもReduxが使われることを避けるため、「Reduxは必ず採用しなければならないものではない」ということを意識していただきたく、刺激的なタイトルで始めました。 （個人的にはむしろ、積極的に採用すべき理由がなければ採用しない方が良いくらいに思っています） （MobXとか他のライブラリについては一旦置いておきます） Reduxのメリット Redux's motivation 曰く、SPAに於けるstate管理とDOM操作の複雑性のうち、Reactがviewレイヤの問題を整理しようとしている。Reduxはstate管理の部分を担当し、stateの変更を予測可能なものにする（to make state mutations predictable）ことを目指しているとのこ
【Web】バックエンドから受け取ったデータってどう扱うの？React Query を使ったイマドキな状態管理｜F Lab｜Fixel株式会社
特に、React に React Hooks が導入されたり、async/await 記法が普及してきたりしたことなどを背景に、コンポーネントから直接 API を呼び出すことも簡単にできるようになってきました。 ちなみに、React Query などライブラリの話に入る前に注記しますが、この「Redux を剥がしてコンポーネントから直接 API データを取得する」ということは React だけの機能で（=他のライブラリ不要で）実現することもできます。具体的には以下のようなコードになります： さて、上記のような議論から、最近ではグローバルステートから「サーバーステート」（API から取得したデータに基づくステート）を切り出す流れも見られるようになりました。サーバーステートが切り出された後のグローバルステートは「クライアントステート」として扱うこともでき、以下のように整理することができます:
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【React】フォームは状態管理せずに実装できるよ - Qiita
Vue Composition API時代のUI状態管理と設計で気をつけたいこと
(Next13 /app) React Server Components 時代の状態管理術【前編】
Redux Toolkit で React.js の状態管理をもっと簡単にする方法[TypeScript版]
Cloudflare Workersと状態管理
Mac ノートブックのバッテリーの状態管理について - Apple サポート
Angularアプリケーションの状態管理パターン | Marginalia
Vuexを用いたVue.jsアプリケーションのシンプルな状態管理とデータフロー
React状態管理ライブラリ Zustandのミドルウェアを使ってみた | DevelopersIO
Vue.js 3でコンテクストを用いて状態管理する
React Queryはデータフェッチライブラリではない。非同期の状態管理ライブラリだ。
macOS Catalina 10.15.5がリリース「バッテリー状態管理」機能を搭載など - こぼねみ
Vue.js Piniaを使って状態管理(データの共有)を行ってみよう | アールエフェクト
[JavaScript] Reactの状態管理にはZustandが決定解になるような気がする
入門者必読、vue.jsの状態管理Vuexがわかる | アールエフェクト
【2021年版】Flutterの状態管理パターン総まとめ - Qiita
Apollo Clientのキャッシュの仕組みとローカルの状態管理について
実例と歴史から学ぶ_Flutterの状態管理方法の選定_.pdf
Composition API時代の Pub/Subパターンでの状態管理
2021年に活用していきたいReactの状態管理ライブラリRecoil - aptpod Tech Blog
Nuxt 3 + TypeScript で状態管理（useState編）
Redux不要論と、グローバル状態管理ライブラリReactNの紹介 - Qiita