onClickCaptureを使えば、イベント伝搬のうちのキャプチャリングフェーズで実行される関数を指定できることを知った ja.react.dev キャプチャリングフェーズとは、ルート要素からクリックされた要素に向かってイベントが伝播し、それぞれの要素にイベントリ…

useTransitionを調べる ja.react.dev 上のドキュメントにあるように用途としては以下が挙げられる state 更新をノンブロッキングのトランジションとしてマークする トランジションなしの場合、ボタンを押したときそれが遅い処理だとUI が反応しなくなるが、…

Reactアプリケーションでパフォーマンスを上げるためにとりあえずメモ化をしていたが、メモ化の前に見直すべきポイントがないか調べた この時、dan氏のブログにまとまっていたので要点だけ自分でもまとめておく overreacted.io 見直し項目 productionビルド…

ユーザーが入力したテキストで検索してサジェストするようなコンポーネントをつくりたい 以前、１文字ずつ入力するたびにリクエストを送ってしまうことの対処法はAbortControllerを使えばよいことがわかったので、あとは実際にどういう風にコンポーネントを…

Next.js 13で既存のアプリを動かしてみたらgoogle-map-reactで次のようなエラーが発生した Next.js: TypeError: Cannot read properties of undefined (reading 'getChildren') 以下のISSUEによるとNext.jsというより、React@18とのバージョン互換性の問題み…

CSSのtransitionとsetTimeoutを使って下図のような要素群を自動的に左に移動させるというアニメーションをつくりたい また、最終要素が出現したら、その次は１要素目がまた表示されるということをしたい いろいろ試したが、アニメーションが終わったタイミン…

ReactのuseRFCが話題になっていたので、 github.com uhyoさんの記事を読んで理解を深めた zenn.dev useとは useはSuspense機構を使う上で必要だった「Promiseをthrowする」という処理を、サードパーティからReact内部に隠蔽する仕組みで、Reactユーザーにと…

And Designの通知コンポーネントのような、クリックするたびに生み出される通知コンポーネントをつくりたい ant.design 大まかな方針としては、クリックするたびにbody要素に通知要素がappendされていき、時間が経つとその要素が消えるというような実装をし…

jQueryでやっていたようなbodyの最後に要素を追加するようなことをReactでやりたい 以下の記事を読むにPortalを使うのがよさそう chaika.hatenablog.com Portal Portalはまさにやりたかった、親コンポーネントの DOM 階層外にある DOM ノードに対して子コン…

forwardRefを使ったら以下のeslintの警告がでた Component definition is missing display name stackoverflow.com これを読むに、displayNameプロパティに値をセットしないとならないみたいだが、ちょっと毎回これを書かなければならないのは微妙 import Re…

JavaScriptとReactでつくるWebアプリのデザインパターンがまとめられたサイトを知ったのでみてみた javascriptpatterns.vercel.app まずは、よくきく以下のようなデザパタをJSでやる方法がめちゃめちゃわかりやすく載っている モジュールパターン シングルト…

onChangeハンドラーのないチェックボックスにcheckedpropsを設定すると、以下の警告が発生した Warning: Failed prop type: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field s…

StyledComponentでわざわざスタイルを定義するのが面倒だったので、ところどころインラインスタイルを使っていたが、Reactでインラインスタイルは使っていいのか？と疑問に思ったので調べた 公式にズバリな回答があった ja.reactjs.org インラインスタイルは…

2022/5/14に開催されたTechFeed Conference 2022を拝聴した TechFeed Conference 2022 このとき@koba04さんの発表で、提案段階のuseEventとという新しいHooksを知ったのでメモ github.com useCallbackでこのように書いていた処理では、中でnameを使っている…

@takepepeさんのスライドにあったReact Locationの話が気になったので、React Queryと合わせてどういうものか調べた より速い WEB を目指す Next.js / nextjs-make-the-web-faster - Speaker Deck React Query react-query.tanstack.com React Queryは、Reac…

前回のNext.js12のReact18対応のNew Streaming SSRの続き uga-box.hatenablog.com 次は、React Server Componentsに関して、もう少し詳しいお話を聞く機会があったのでメモ React Server Components React Flightとも呼ばれ、RSCと略されるみたい サーバーサ…

先週、ふんわり理解したNext.js12のReact18対応の続き uga-box.hatenablog.com New Streaming SSRに関して、もう少し詳しいお話を聞く機会があったのでメモ New Streaming SSR React FizzともNew Suspense SSRとも呼ばれるみたい React DOM Serverの新しいレ…

以前、google-map-reactを使ってReactプロジェクトにGoogle Map を表示することを行った uga-box.hatenablog.com ただ、初回レンダリング後にSPAでページをかえた場合にマップが更新されない問題が発生したので更新する方法を調べた 下のstackoverflowが参考…

前回Next12のブログを簡単にみたが、React 18のサポートまわりがまとめられなかった uga-box.hatenablog.com そんな中最近、共有会でNext.jsのReact18対応についてお話しを聞いたのと、以下のポッドキャストを聞いたので、メモしておく uit-inside.linecorp.…

FE共有会でReactのFormライブラリの話を聞いた 制御コンポーネントvs非制御コンポーネントやreact-hook-formなどは以前調べていたので事前知識があった uga-box.hatenablog.com uga-box.hatenablog.com Formライブラリの進化の方向性としては パフォーマンス…

RemixというReact Routerを作った人たちが作っているフレームワークが資金調達をしてOSSになるということで話題になっていたので調べた t.co remix.run Remixとは？ 上の作者本人の記事にあるRemixについて Remixは、ReactRouterの作者であるMichael Jackson…

Material UIが新しくなってv5になったという話を聞いたので調べてみた mui.com こちらの記事が参考になった zenn.dev 普段は使ってないので詳しく調べてなかったのだが、そもそも勘違いしていたのはMaterial UIはGoogleのMaterial Designを元に React 実装さ…

ReactとTypeScriptにStyledComponentを使って見出し用のコンポーネントをつくりasにh1〜h6までの要素を渡せるようにしたい <Title as={props.sectionLevel || "h2"}>{props.title}</Title> このとき、sectionLevelをstringにしていたら、型チェックエラーがでた TS2769: No overload matches this call. Over…

UI の一部に JavaScript エラーがあってもアプリ全体が壊れてしまわないようにしたい Reactではどうなっているのか調べたら、React 16 から“error boundary”というのが導入されていた ja.reactjs.org どういうものか調べてみた error boundary error boundar…

React18の新機能について知る機会があり、それを参考に自分でもまとめてみた reactjs.org 新機能は以下 Automatic Batching Transitions Suspense and SSR Automatic Batching 要約 React18からはBatching対象が広がる 詳細 Batchingは複数のstateを更新した…

2秒ごとにカウンタをインクリメントするカウンターアプリを例にuseCallbackの落とし穴について教えてもらった 例とするカウンターアプリの機能 ・2秒ごとにカウンタをインクリメントする ・リセットボタンが押されたら ・カウンタを0にする ・インターバルを…

以前、useCallbackについて調べた uga-box.hatenablog.com ただ、このとき メモ化されたコンポーネント（不必要なレンダーを避けるために参照の同一性を見るよう最適化されたコンポーネント）にコールバックを渡す場合に便利 という部分がよく理解できていな…

10/20にReact v17がリリースされたが新機能なしという特殊なバージョンアップ ja.reactjs.org 安全に段階的にReactのアップグレードができるようにするためのバージョンアップらしく、「踏み台」となるリリースみたい 一気にバージョンアップが難しいことが…

react-hook-formを調べていて、react-hook-formの特徴として非制御コンポーネントによってregister関数をrefで実行していることがわかった uga-box.hatenablog.com ただ、Reatが公式には制御コンポーネントを使うとことを推奨しているため、どっちがどういい…

react-hook-formというのを知ったので調査してみる hooksベースでUIの機能を提供するライブラリ react-hook-form.com 特徴としては他のライブラリよりハイパフォーマンスとのこと https://github.com/react-hook-form/performance-compare ハイパフォーマン…