[B! react] rryuのブックマーク

Reactの文脈での「副作用」は2種類あるのではという話

皆さんこんにちは。Reactの話をする際に、副作用という言葉はよく出てきます。しかし、実は、我々は2つの異なる意味で「副作用」という言葉を使っており、そのせいで混乱が生じているのではないかと思います。例えば、筆者が最近書いた以下の記事では、基本的にuseEffectの中でfetchするべきではないと説明しました。このような話題に対しては、「useEffectの中でfetchして何が悪い」のような批判が寄せられることがあります[1]。つまり、useEffectは副作用を記述するフックで、fetchはネットワークリクエストという副作用を起こすのだから、useEffectの中でfetchするのは適切だろう、という意見です。筆者の意見では、これは2種類の「副作用」を混同したことによる誤解です。要するに、以下の2つの文で言われている「副作用」は、（まったく無関係ではないにせよ）実は少し異なる

rryu 2025/05/03

種類で言えばReact内への作用とReact外への作用の二つではないだろうか。useEffectはReact外への作用に使うものであり、その結果をReact内に持ち込むならuseEffectじゃないだろうという感じ。

react

リンク

React界隈で話題になっている「React Server Components」についてまとめました！ | DevelopersIO

rryu 2020/12/24

Railsのremote render partialに戻ってきた感じ。その部分用の専用のAPIとフェッチ処理を作るくらいならサーバサイドで全部やったほうが楽というのは分かるがなんだかなあという感じ。

react

リンク

Promiseをthrowするのはなぜ天才的デザインなのか - Qiita

ReactのConcurrent Modeが最初に発表されたのはもう1年近くも前のことです（記事執筆時点1）。Concurrent Modeはたいへん奥深い機能で正式版がたいへん待ち遠しいですが、Concurrent Modeの代名詞として多くのReactユーザーに知られているのはPromiseをthrowするというAPIデザインです。Concurrent Modeでは、コンポーネントがレンダリング時にPromiseをthrowすることで、レンダリングをサスペンドした（Promiseが解決されるまでレンダリングできない）ことを表します。 Concurrent Modeに関しては筆者の既存記事Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理などをご参照いただきたいのですが、ここではPromiseをthrowするということ自体に焦点

rryu 2020/09/02

Promiseをthrowこと自体ではなく、ビューのレンダラに待ちが発生しているのでそれを待ってリトライしてほしいことを伝える手段があるというのが本質的なところだと思う。

リンク

さよならSketch、こんにちはFramer X｜KANTA YAMAGATA｜note

Jorn van Dijk（@jornvandijk）のリツイートから2ヶ月近く経った先日、ようやくFramer X βの招待が届きました。Trailerが格好良すぎてReactとシームレスになるのかという期待で一杯だったので嬉しかったです。実際、AirbnbやFacebookのデザイナーもこんな感じでした。とりあえず動画を観ていただけたら。タイトルはUSノリですが、正直Sketchはある1プロジェクトで使ったことがあるだけです。Figmaなどの他のデザインツールは使ったことがないです。なのでここでは比較を行いません。以前からあるFramerとの差分の紹介を中心にしていきます。Framerはなぜか日本では使われていない印象がありますが、これがデザイン環境の向上に少しでも参考になれば幸いです。 Linking複数画面の遷移をつくるには、FramerではFlowComponentを利用したコ

rryu 2018/08/20

コンポーネント関連のツールはReact関連が多いイメージがある。

リンク

新QiitaでReactをやめてhyperappを採用した背景 - Qiita

12/1 に Qiita のトップページをリニューアルしました。これまで React を使っていましたが、それをやめて hyperapp を採用しました。まわりを見てもあまり採用事例が見当たらないので、この記事では一体なんで今をときめく React ではなく hyperapp を選択したのか、どういうところが魅力的なのかについてプレゼンテーション層を実装するためのツールとして学習コストの観点から書きたいと思います。なおこの記事に書かれていることは全て個人の感想であり、はっきりいって個人の日記レベルです。それと hyperapp の開発者が社内にいるという事情もあるので、そこら辺さっぴいて読んでください。 TL;DR プレゼンテーション層を実装するためのツールとして React は機能過多だし、機能不足 hyperapp は過不足ない学習コスト仮想 DOM は学ぶ価値のある知識

rryu 2017/12/29

Reactもつらみが綴られる時代になったのか。Angulerとかの人はどこへいったのだろうか。

リンク

たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita

【追記】もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソ API と， Redux-Saga とかいう宗教がありましたという考古学です — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro To React - React Example: Todo List · Redux 「チュートリアルそれぞれ一周した！Reactは何とか理解できたが，Reduxがさっぱりわかんねぇ！」ぐらいの人向け。自分