React
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 ハイパフォーマン…
ReactのhooksベースでUIの機能を提供するモジュールを作る・使う機会が増えてくると考えられるので、input系の要素を含むコンポーネントはforwardRef()でラップしておくのが良さそうという話を聞いた forwardRefについて理解できていなかったので調べた ja.r…
Vercel製のSWRライブラリ「SWR」を調査してみる github.com SWRは、リモートデータフェッチ用のReactHooksライブラリ 「SWR」という名前はHTTPのstale-while-revalidateに由来していて、このキャッシュ戦略に影響を受けている stale-while-revalidateについ…
loadable-componentsというワードを聞いて知らなかったので調査した loadable-components.com 何かというと Reactコード分割ライブラリ React.lazyに代わるものではありません Reactチームが推奨するソリューション どんな特徴があるかというと Library Spli…
React + Redux アプリケーションのテストを考えているときに、reduxのテストの書き方のドキュメントと、丁度以下の記事を目にしたので、自身のプロジェクトに当てはめてみる recruit-tech.co.jp 上の記事で挙げられているテストの対象は以下 Action Creator …
React 16.8で追加されたフック (hook) 機能の一つuseEffectについて調べた ja.reactjs.org useEffect useEffect(didUpdate); DOM の書き換え、データの購読、タイマー、ロギング、あるいはその他の副作用をReact.renderでやるとバグや非整合性を引き起すので…
React Concurrent Mode のSuspense機能についてのお話を聞く機会がありそうなので、事前準備として下のドキュメントを読んでまとめる ja.reactjs.org React 16.6 で、レンダー可能になる前のロード中状態（スピナーのようなもの）を宣言的に指定することがで…
まだ安定版には入っていないReactのConcurrent Mode についてお話を聞く機会がありそうなので、事前準備として下のドキュメントを読んだまとめ ja.reactjs.org Concurrent Modeとは？ React アプリケーションをレスポンシブに保ち、デバイスの能力やネットワ…
react.jsプロジェクトでGoogle Map APIを使用してMAPを表示し、さらに以下の操作をしたかったので調査した オリジナルのマーカーの作成 ズームインアウトボタンの場所変更 マーカーをクリックして吹き出しを表示する 最初に Google Map API を利用するために…
