Reactの開発において、状態管理の方法は注意深く検討する必要があります。状態管理ライブラリ「Redux」が大きい勢力ではありますが（参照：npm trends）、記事『ベストな手法は？ Reactのステート管理方法まとめ』でも紹介した通りさまざまな状態管理の手法が現在でも編み出されています。本記事では状態管理ライブラリ「Recoil」についての概要と簡単な使い方、Reduxとの思想の違いについて解説します。 Reduxによる状態管理の懸念点 Reduxでは状態管理を一か所にまとめられるというメリットがあります。これはメリットのように思えますが、小さな単位の状態管理もReduxに委ねるのか迷いどころです。 また、Reduxは状態更新の作法的な書き方が複雑でした。Redux ToolkitというReduxのアドオンとしてのJSライブラリもありますが、基本的には作法的な書き方はあまり軽減しませ
マストドンのコード、特にフロントエンドをなんとかしたい、あるいはなんとかしている - このIP網の片隅で
はい。 このブログをわざわざ読んでいる方なら既にご存知かもしれませんが、マストドンをご存知でしょうか。 いわゆる分散型マイクロブログの一種で、2017年ごろのTwitter社による日本人イラストレーターの大規模凍結あたりで一時期話題になり、 最近またイーロンマスクによるTwitter社買収から始まった一連の混乱で再度少し話題にもなりました。 で、まあ僕としてもマストドンに小改造をしたうえで自分で運用しているんですが、マストドンのコードは今となってはだいぶ厳しい。 厳しい部分を挙げると割とキリがないんですが、ざっくり書くと フロントエンドがWebpackerにべったり、かつ独自configを書きまくっている デフォルトが隠蔽されているWebpackerと合わさり最終的にどういうconfigでwebpackerが動いてるのかたぶん誰も把握できてない Typescriptじゃない 動いてるからヨ
「経年劣化に耐えるコード」というのは、だれもが目指すものでしょう。「そもそもフロントエンドのコードは、今ある技術で最良のものを書き捨てるべき」という意見も理解できますが「備えあれば憂いなし」ということもありますので、ここにメモを残します。あくまで、私なりのベストプラクティスですのでご了承ください。 5層に別れた SFC 私はレイヤーによる技術の分離で、ReactComponent の経年劣化に備えています。ここでいうSFCとは「Stateless Functional Component」の略称ではありません。Vue.js の文脈にある「Single File Component」を指します。 // (1) import層 import React from 'react' import styled from 'styled-components' // (2) Types層 type
【Redux-Toolkit】Reactの状態管理ライブラリ基礎学習 ~第二部~ - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは！ラクス入社1年目のkoki_matsuraです。 本日は、Redux-Toolkitの基本的な状態管理や仕組みをTodoアプリ作成を通して、ご紹介させていただきます。 こちらの記事は「Reactの状態管理ライブラリ基礎学習」の2部目です。 前回の「Redux編」を読んでいない方は下記のリンクからお読みいただけると嬉しいです。 Reduxの仕組みを知ることでよりRedux-Toolkitの使いやすさが理解できると思います。 tech-blog.rakus.co.jp Reactの状態管理ライブラリを勉強している方、状態管理ライブラリについて簡単に知りたい方などのお役に立てればなと書かせていただきました。 アジェンダは以下の通りです。 Redux-Toolkitとは 概要 構成図 Todoアプリ作成 仕様説明 プロジェクト作成 初期設定 ディレクトリ構成 Todo型の定義 Slic
useState, useContext を使った状態共有 graphQL BFF + Codegen + Apollo Hooks で型安全なデータ取得 Redux の型定義、Loading 状態の運用、エラー処理、等々煩雑なコードがなくなる 1日一つ強くなる中西とは https://ja.reactjs.org/ React 日本語公式ドキュメントのトップページの翻訳を担当 Apollo Japan User Group 主宰 / 公式ドキュメントチュートリアルを翻訳しました Hasura Japan User Group 主宰 / チュートリアル公開しています JavaScript が中心となった生産性の高い Web App 開発チームの運用、及びその普及活動が今のテーマ => https://apollographql-jp.com/makeMoneyTS/ 毎月 JavaScri
React.kyoto v0.3.0 でのLT発表資料です。 https://react-kyoto.connpass.com/event/137847/
Full stack open
You can discuss the course and related topics in our dedicated group on Discord https://study.cs.helsinki.fi/discord/join/fullstack and on Telegram: https://t.me/fullstackcourse. Please join the conversation! See here how to ask questions in a proper way Parts 0-8 and 13 of the course material is written by Matti Luukkainen. The content of part 9 is written by developers from Terveystalo. Part 10
readyfor_redux_study#1 READYFOR株式会社 さんで開催した、Redux 勉強会第一回の資料です。
mutexの桝田です！ Reactのデータフェッチに、Vercel社が提供する「SWR」やTanStackコミュニティが提供する「React Query（TanStack Query）」が使われることが多くなってきています。 これらのライブラリは単なるフェッチだけでなく、キャッシュやデータの更新を担ってくれます。また、Reactが志向する「宣言的」な記述を体現できることも大きなメリットです。 本稿では、（我々が採用する）React Queryにフォーカスし、React Queryを使って実現している状態管理について説明します。SWRを普段お使いの方に関してもかなり共通する部分が多いのではないかと思います。 1. 対象読者 Reactのデータフェッチライブラリの使用を検討している方 普段SWRやReact Queryを使用している方 普段Reactを使用するすべての方
こんにちは。最近、Reactでのステート管理において「useStateの中にステートを置くのではなく、useRefで得たrefオブジェクトの中にステートを置いてuseState（またはuseReducer）をコンポーネントの再レンダリングを発生させるためだけに使う」というやり方を複数の記事で見かけました。このパターンは、今（React 17以前）は動くけどReact 18でアンチパターンに変貌するやり方なので、啓蒙するためにこの記事を用意しました。 ステート（コンポーネントのレンダリングに使用される値）は、useRefではなくuseState（またはuseReducer）をちゃんと使って管理するようにすれば、React 18以降も安泰です。 useRefをステート管理に使うパターンとは こういうやつです。 // 普通のやり方 const Counter1: React.VFC = () =
<script nonce="xxxxx" id="initial-data" type="text/plain" data-json="${preloadedState}" ></script> このpreloadedStateはエスケープ処理が必要なので注意してください。 クライアント側の読み込み方 const initialData = JSON.parse( document.getElementById("initial-data")!.getAttribute("data-json")!, ); const { store } = configureStore(initialData); https://github.com/hiroppy/ssr-sample/blob/master/src/client/index.tsx#L21-L22 useEffect SSR では、
TL;DR 本記事で紹介するのは、Redux や React Router を使った React アプリケーション構築時のベストプラクティスを Next.js に適用した考え方です。 Next.js を外部モジュールと考え、Container/Presentation の Container を Adapter 層と見なす考え方 next/router などの Next.js の組み込みモジュール、Store、SWR（React Query） は Container（Pages） 層で利用する Storybook でコンポーネントを表示する際、Next.js 等のモックをできるだけ作らない 但し、Template 層以下の next/link や next/image への依存は制御できない なお本記事では、Next.js の依存層、Pages 層とTemplate 層という言葉は以下のこ
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
React Context を用いた簡易 Store
課題 redux を引っ張り出すと大仰になる。Context 下に共有ステートを持ってそこに setState できるだけでよい。 なので、次の 2 つを用意する 現在の state を参照する const appState = useAppState() 現在の state を更新する関数を返す const setAppState = useSetAppState() React.useState() と違って分割している理由は、主にパフォーマンス上の理由 大域な参照なので、可能な限りステートを参照したくない setState() の API は (prevState: State) => State も取れるので、状態更新用途に限ってはそもそも useAppState() せずに済むことが多い でも毎回書いてるけどボイラープレート感強い上に忘れるのでここにメモする 毎回書いてるボイラー
Three ways to use AI on Android: The Good, the Bad and the Ugly
この記事はComplete Guide to React Rendering Behaviorの翻訳記事になっています。 ご本人(Markさん)にも許可を頂いて翻訳しております。 こちらの記事がReactのレンダリングを理解する上で今までで一番体系的で一番分かりやすかったので、ぜひ紹介したく翻訳させて頂きました。 翻訳ツールにもたくさん助けてもらいながら行い、意訳が出来ていない部分が多々あるかと思いますので修正依頼を出して頂けると幸いです！ Twitterでも、フロントエンドに関する事や、アメリカでのエンジニア経験に関してツイートしているので、よかったらフォローお願いします。 Twitter: @hellokenta_ja 下記から本文です。 Complete Guide to React Rendering Behavior この記事は、Reactレンダリングがどのように振る舞うか、Co
強い言い方だけど、Flux Architecture の失敗として Store に Store という名前をつけたことがあると思っている。 あるいは、黎明期の Flux は Store という名前で良かったんだけど、 #Redux はその名前を引き継がないほうが良かったんじゃないかと思っている。
React Hooksの正式リリース（2019年2月）からそろそろ一年が経とうとしています。Hooksの登場によってReactのコンポーネントは関数コンポーネントが一気に主流になり、クラスコンポーネントが新規に作られる機会は激減しました。 また、React 17.x系ではConcurrent Modeの導入とともにさらに2種類の新フックが追加される見込みであり、いよいよ関数コンポーネントの能力がクラスコンポーネントを真に上回る時代が来ることになります。 この記事では、フックの一種であるuseReducerに焦点を当てて、どのようなときにuseReducerが適しているのかを説明します。究極的には、useReducerによって達成できるパフォーマンス改善があり、ときにはそれがコンポーネント設計にまで影響を与えることを指摘します。 useStateの影に隠れたり、なぜかReduxと比較されたり
最近 React のパフォーマンスチューニング、特に再レンダリング抑制について調べたのでそのまとめです。 特に昔からおまじないとして書いていたことを、「なんであの書き方していたんだっけ」というのを調べてまとめました。 古いものを調べたのは、今あるチューニング方法とその当時の解決方法を比較したかったからです。 再レンダリングとはなにか 公式に説明があったのでそのまま引用します。（https://ja.reactjs.org/docs/optimizing-performance.html#avoid-reconciliation） React では、コンポーネントの props や state が変更された場合、React は新しく返された要素と以前にレンダーされたものとを比較することで、実際の DOM の更新が必要かを判断します。それらが等しくない場合、React は DOM を更新します
react-redux v7.1＋TypeScriptでconnect, mapStateToProps, mapDispatchToPropsを撲滅する - 文系プログラマによるTIPSブログ
ついに例の定型文3兄弟を除去する事ができるようになりました〜 github.com 先日react-reduxがv7.1にアップデートされ、そこでhooks対応の関数がいくつか追加されました。 今回紹介するものは「useSelector」「useDispatch」の2つです。 react-redux v7.1の新機能 useSelector useDispatch connect関数は不要になる v7.1とそれ以前のコードの比較 v7.1以前のTypeScript + react-reduxのコード v7.1以降のTypeScript + react-reduxのコード 全部入りのサンプルコード 万能ではない点に注意 雑感 react-redux v7.1の新機能 useSelector ざっくり説明すると、mapStateToPropsをhooks対応したものです。 useSelecto
React Hooksでテストをゴリゴリ書きたい - react-reduxやaxiosが使われているような場合もゴリゴリテストを書きたい
2023/12/25 続編が出ました🙆♂️ この記事は記述されてからある程度時間が経過してしまっており、自分の考え方も少し変化してきています。 その変化について新しく以下の記事を書いたので、ぜひ参照してみてください。 追記 以下の記事は@testing-library/react-hooksのv3系を使っていました。 v5系に上げるとHookResultではなくRenderResultになったようなので、v5を使われる場合はRenderResultの方をお使いください🙏 🦍 テストコードを書くことがプロダクトコードを書くことと、同じくらい重要であるという認識が浸透しつつある昨今、多くの関数にはおそらくテストがあることと思います😊 最近はReactの開発がメインです。 僕は毎回フロントエンドでテストを書く場合は以下のような方針をとっています。 コンポーネントのテスト storybo
Redux の記述量多すぎなので、 Redux の公式ツールでとことん楽をする。 ( Redux Toolkit) - Qiita
Redux の記述量多すぎなので、 Redux の公式ツールでとことん楽をする。 ( Redux Toolkit)JavaScriptReactreduxreact-hooksredux-toolkit 2019/11/20 追記 当記事でメインに取り扱っていたライブラリ名が変更されました。Redux Starter Kit -> Redux Toolkit それに合わせて、本記事もアップデートしています。 追記終わり はじめに Redux Hooks がリリースされたおかげで、Redux の store とコンポーネントのつなぎ込みが簡単になりました。 今回は Redux チームが公式にリリースしている Redux Toolkit を利用すると、Action、Reducer 部分もかなり簡潔に記述できるというお話です。 Redux Hooks については以下の記事を参照してください。 R
next.js の SSG は糞 - Diary
next.js の SSG は糞 ぼくは next.js 結構好きでこのブログとかも next.js で作ってるんですが、最近の next.js の方向性にはちょっと危うさを感じています。 next.js は最近は静的サイトジェネレータ+αみたいな感じになっていて、サーバーサイドジェネレーションなる機能のサポートが入っています。 でもこれどう考えてもゴミでしょ。いや記事が 500 件とかならいいけど、 50 万件あったらデプロイのたびにどんだけ時間かかる？という話で。それからサイトが生きているかぎり結局のところ記事はどんどん増えていく以上トップページは動的生成にならざるを得ないわけで。あまりはっきりと言われているわけではありませんが、 next.js を開発している人たちは WordPress のテーマを PHP で書きたくない人というペルソナをもとに開発していて、その人たちは CDN を
はじめまして！WEBチームの黒川と申します！昨年7月にaptpodに入りましてもうすぐaptpod歴1年になります！ aptpodでは主にフロントエンドエンジニアとしてReact/TypeScriptを用いて、お客様向けアプリケーションのUI部分を実装しております。 ご存じの方も多いように、Reactの状態管理にはいくつか方法があり、何を用いるべきかなどでしばしば議論が起こりがちです。代表的なものだけでも、標準APIを用いるuseStateとContextやデファクトスタンダードとなってきているRedux、そして新興のRecoilがあります。 弊社のWEBチームではReduxを採用するケースが多いです。私もReduxについては一通りの知識と経験は持っていたつもりだったのですが、先日担当させていただいたプロジェクトで初めてReduxの設計に取り組んだところ、自分がReduxの思想や勘所につい
Next.js + Vercel + swr + TypeScript (No Redux + No SSR) で短期間チーム開発した - またのきかいに
はじめに タイトルにある通り Next.js + Vercel + swr + TypeScript という構成で短期間チーム開発をした。 以下のように特殊な状況なので色々試してみた。 開発状況 約3週間の短期間開発。 世間にリリースしない。プロトタイプを作って終了。メンテナンスもしない。 フロントエンドを触るのは自分を含めて3人。 自分・フロントの経験もあるバックエンドエンジニア・フロントエンドの経験が浅いエンジニアの3人。 ログイン機能有りのSNS的なもの。既に世の中に存在するプロダクトと似てる。 それぞれ選定理由と使用感を雑に書いていく。 Next.js github.com 環境構築が楽 Node.js環境さえ整えてもらえればすぐ動く。 ライブラリが最小限で済む Create React Appも環境構築が楽だが使われているライブラリのドキュメントを探すのが初学者には少しハードルが
404This page could not be found.
前置き(私見含む) Recoil が面白い。 React でそれなりの規模のアプリケーションを作ったことのある方なら、状態管理の辛さをよく知っていると思う コンポーネントを跨いだ変数をひとつ作ろうと思っただけなのに「まずは Flux アーキテクチャのコンセプトとアンチパターンから学ぶ必要があります。大量の props バケツリレーから逃れるためには〜」とか言われても 現実的で複雑なアプリケーションの状態、つまり「非同期処理」や「状態同士の依存関係」……などを作っていくのは大変 そんな中 Facebook が新たな状態管理ライブラリをリリースした、それが Recoil これは Redux とも ReactN とも全く異なるアプローチのライブラリで、しかも圧倒的に分かりやすい teramotodaiki.icon 現在は experimental(実験段階) なので Redux のコードをごっ
はじめに このエントリは全5回を予定する19卒新人ブログリレーの第4回目です。 はじめまして、リクルートテクノロジーズ新卒2年目の高橋 勇人です。 現在は不動産検索サービスSUUMOのフロントエンドエンジニアとして働いています。新卒入社してからの1年間、SUUMOの新機能開発に携わり、物件を地図から探す機能の開発を進めてきました。 SUUMOではこれまでJavaScript+jQueryで開発されてきましたが、SPサイト上で地図による物件探し機能を実現するために、React+Reduxという技術スタックが採用されました。 （※SP＝スマートフォン） 長期的な開発がされてきたプロダクトで、これまで使ってきていなかった技術スタックでの開発を推し進めるにあたり、継続的な保守性を向上するための取り組みの一環としてテストの整備が進められました。 本記事では、React+Reduxでの地図機能の開発に
こんにちは、 tbaba です。元々 Rubyist として入社していますが、ここ2〜3年はフロントエンド力の向上にも力を注いでおります。 突然ですが、React で状態を管理する時に何を使っていますか？クラスコンポーネントにしてクラスに状態をもたせている、Redux を使って管理している、React Hooks で管理している、などなど色々な選択肢があるかと思います。 そんな中で自分たちのチームは、現在社内向けのアプリケーションにおいて、フロントエンド開発をする際に Recoil という状態管理ライブラリを使うことが多いです。そこで、今日は「なんでそれ使うの」「何が便利なの」みたいな話ができれば良いなと思います。 先に言っておくと、自分のスキルセットとしては「 TypeScript を利用した開発2年目」「React を利用した開発3年目」「基本は Ruby on Rails が得意なバ
スコープとライフタイムで考えるReact State再考
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の分類
JS 状態管理ライブラリ探索記 - Introduction
これから何回かに分けて、Redux に代表される JS の状態管理ライブラリをいくつか見ていきます。 早速本題に入りたいところですが、その前になぜいくつもライブラリを知っていた方がいいのか、当たり前のように思うことをあえて考えてみる必要があります。 なぜなら、状態管理ライブラリがたくさんあるために、次のような疑問が出てくるからです。 どれでも好きなものを使えば開発がうまくいくのか？ 今までうまくいっていたライブラリを使い続ければ今後もうまくいくのか？ 選ぶとしても、何を基準に選べば良いのか？ 今回は少し立ち止ってこういった疑問について考えてみます。 ではそもそも状態管理とは、一体何のために、何をすることなのでしょうか？ 状態管理が目指すもの – 読みやすさの基本定理 状態管理をする目的は様々ですが、最も大切なことはリーダブルコード（読まれて無い方は是非一読を！）の中で「読みやすさの基本定理
2021年お世話になったReact関連ライブラリ10選 #techtekt Advent Calendar 2021 - techtekt
この記事は techtekt アドベントカレンダー2021 の 12日目の記事です。 こんにちは！ テクノロジー本部 エンジニアリング統括部 サービス開発部でエンジニアをしている Yuto SAGAWA です。*1 皆様今年もReactライフを満喫できていますでしょうか？ 個人的にはたくさんReactに触れる機会があり、非常に満喫することができました！ そんな2021年の個人的にお世話になったReact関連のライブラリ、フレームワーク、ツールなどの紹介をしたいと思います。 next nextjs.org Next.jsはReactのフレームワークで、昨今では使用例も多く人気のフレームワークであることが伺えます。 SSR / SSG だけではなく、ISR（Incremental Static Regeneration）など、 Webアプリケーションのパフォーマンス改善の手助けとなることが期待
こんにちは、WEAR部の繁谷です。 普段はバックエンドのエンジニアとしてWEARの開発を行っています。 ZOZOテクノロジーズは4月7日に「髪型別コーデ検索」をリリースしました。 プレスリリースは是非こちらを御覧ください。 髪型別コーデ検索のフロントエンドはSPA(Single Page Application)でつくられており、こちらの開発を行った際に意識した設計について紹介します。 はじめに 髪型別コーデ検索は、ZOZO研究所の福岡チームが研究・開発したAIを活用し髪型からコーディネートを検索するAPIを利用して、SPAのWebサービスとして提供しています。 こちらは髪型別コーデ検索のアーキテクチャを簡単に示したものです。 今回私は研究所が提供するAPI以外のエンジニアリングに関する部分である、バックエンドのAPI開発、フロントエンドの開発、それらのインフラ構築を担当しました。 その中
iOSアプリではMVVMが多用されている。UIKitとFRPライブラリであるRxSwiftを組み合わせて実装されるのが一般的である。（私はReactiveSwiftの方が好きだけど…） MVVMはマイクロソフトのWPFで考案されたソフトウェアアーキテクチャパターンで、それがiOSに導入されて広まった。 しかししばしばiOSにおけるMVVMは批判の的となってきた。もっとも俎上に上がるのはVMの肥大化・複雑化である。最近では以下の記事があげられる。 なぜ MVVM は Elm Architecture に勝てないのか この記事を元になぜMVVMが批判されるのかを見ていこうと思う。 ViewModelは複雑化する論上記記事ではやはり「複雑化しすぎたViewModel」と主張している。 複雑化したコードが掲載されているので全文は転載しないが、主要な個所を見てみる。 まずViewModelの状態の管
React の状態管理ライブラリ9選
はじめに 次から次へと登場する状態管理ライブラリですが、それだけ React (に限った話ではないが) において状態管理というのは大きなテーマであり、最も実装難易度の高いトピックの一つでしょう。適切な設計ができないとアプリケーションの規模が大きくなるにつれ負債は増え続けます。 状態管理の難しさをよく表した文章が Redux の公式サイトにあるためお借りしたいと思います。(Redux の公式サイトは読み物としても面白いです) JavaScript のシングルページアプリケーションの要件がますます複雑になるにつれて、コードはこれまで以上に多くの状態を管理する必要があります。この状態には、サーバーのレスポンスやキャッシュされたデータ、まだサーバーに永続化されていないローカルに作成されたデータなどが含まれます。UI の状態も複雑化しており、アクティブなルート、選択されたタブ、スピナー、ページネーシ
コンポーネントの分類について考えたことをまとめた
どのようにコンポーネントを分類していくか 個々のコンポーネントがが単一の責任のみ負っている状態であれば、コードの見通しも良くなる上、後々のメンテナンスも容易です。 まずは「複数の関心ごとを１つにまとめない」という原則（単一責任の原則）から分類の指針を考えていきます。 フロントエンドにおける関心ごとですが、大別すると APIとの接続 View（表示とイベント実行） 状態管理 以上３つに集約されるのではないでしょうか。 では、これらの関心ごとをどの様に切り分けていけば良いのか考えていきます。 APIとの接続 まずはAPIとの通信ですが、こちらはコンポーネントの外で管理した方が良いと考えています。 各コンポーネントに通信に関わる処理がベタ書きされている状態だと、エンドポイントの変更等に弱くなり、通信処理の再利用も面倒です。 それに、「フロントの状態管理 / 表示」と「外部との接続」はそれぞれ別種
React Architecture: How to Structure and Organize a React Application
There is no consensus on the right way to organize a React application. React gives you a lot of freedom, but with that freedom comes the responsibility of deciding on your own architecture. Often the case is that whoever sets up the application in the beginning throws almost everything in a components folder, or maybe components and containers if they used Redux, but I propose there's a better wa
🏔背景 Reduxはしんどい、だるい、でかい、というイメージが定着して久しいですね 😭 僕も3年ほど前にどっぷり触ったときは「こいつぁなかなか」という感想でした。 しかしながら状態管理ライブラリやらFlux思想やらの流れとしてReduxが不可避の存在だったために、おつらい経験をされた方も多かったのかなとお察しします。 時代は巡り2019年末、令和元年のご時世ではすっかりTypescriptによる型安全、正式提供されたReact Hooksによる脱Class component・HOCフリーな省エネ設計などが定着してきており、この両者を前提とした構築がもはやスタンダードとなってきています。 諸兄の人柱的知見も相まって最近は敬遠されがちなReduxパイセンですが、この度久方ぶりにがっつりと向き合ってみると、上述した両者の恩恵を受けてなんだか垢抜けた感じになっていました。知ってましたか？
JSのプラグインシステムについて書くJavaScript Plugin Architecture 2.0をリリースしました JavaScriptのプラグインシステムについて書いた小さな電子書籍であるJavaScript Plugin Architecture 2.0をリリースしました。 1.0(初版)公開時の記事は次のページから参照できます。 JavaScript Plugin Architectureというプラグイン設計について学ぶ無料の電子書籍を書いた | Web Scratch 2.0の詳しい変更点についてはリリースノートを参照してください。 Release v2.0.0 · azu/JavaScript-Plugin-Architecture 2.0リリース時にGitBookからHonKitに移行しました。 そのため、公開するURLが次の場所に変更されています。 https://a
（※ この記事は API およびそこから導かれる設計のしやすさ観点での比較をしています。実際にキャッシュが有効に効いたか、などについてはまた別の機会に ）
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactの新しい状態管理ライブラリ「Recoil」とは？ Reduxとの違いを解説 - ICS MEDIA
経年劣化に耐える ReactComponent の書き方 - Qiita
「Redux よさようなら」最強の React 実装
unstated-next による Redux に頼らない状態管理の考察
Redux の利点を振り返る
【脱Redux】SWRやReact Queryを使った状態管理戦略
useRefでステートを管理するのはReact18でアンチパターンになるからやめよう - Qiita
SPA + SSR + PWA の作り方とセキュリティについて - hiroppy's site
Next.jsに「できるだけ」依存しないReactアプリケーションの構成
The new wave of React state management
Reactルーター選定術 2020年のファイナルアンサー
Reactのレンダリングに関する完全ガイド - Qiita
Flux の失敗は Store に Store という名前をつけたこと - fsubal
useReducerの本質：良いパフォーマンスのためのロジックとコンポーネント設計 - Qiita
Reactのパフォーマンスチューニングの歴史をまとめてみた
Reduxを用いる時にオススメしたい3つのTips - aptpod Tech Blog
404: This page could not be found
Recoil が面白いので Redux との違いを説明してみる - study-react
React+Reduxアプリケーション テスト戦略 | Recruit Tech Blog
Reactを使うならRecoilも学べば良いと思うって話 - Grooves開発ブログ
髪型別コーデ検索におけるSPAの開発 - ZOZO TECH BLOG
なぜiOSのMVVMはdisられるのか — Elm Architectureとの比較記事から考える
TypescriptとReact HooksでReduxはもうしんどくない - Qiita
JSのプラグインシステムについて書くJavaScript Plugin Architecture 2.0をリリースしました
SWR vs React Query - fsubal