UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

React

【React】useEventという提案段階のhooksを知ったのでざっくりメモ

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

【React】React QueryとReact Location

@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.js】Next.js 12のReact Server Components

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

【Next.js】Next.js 12のNew Streaming SSR

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

【Google Map】SPAでのページ遷移でマップを更新する

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

【Next.js】Next 12のReact18対応のふんわり理解

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

【React】Formライブラリの話

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

【Remix】Remixとは?

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

【React】新しくなったMUI

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

【StyledComponent】asの型

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

【React】Error Boundry

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

【React】ざっくりReact18の新機能

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

【React】useCallbackの落とし穴

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

【React】useCallbackの無駄遣い

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

【React】v17.0は新機能なし

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

【React】制御コンポーネントvs非制御コンポーネント

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

【React】react-hook-form

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

【React】ref のフォワーディングについて

ReactのhooksベースでUIの機能を提供するモジュールを作る・使う機会が増えてくると考えられるので、input系の要素を含むコンポーネントはforwardRef()でラップしておくのが良さそうという話を聞いた forwardRefについて理解できていなかったので調べた ja.r…

【React】VercelのSWRライブラリ

Vercel製のSWRライブラリ「SWR」を調査してみる github.com SWRは、リモートデータフェッチ用のReactHooksライブラリ 「SWR」という名前はHTTPのstale-while-revalidateに由来していて、このキャッシュ戦略に影響を受けている stale-while-revalidateについ…

【React】loadable-componentsとは

loadable-componentsというワードを聞いて知らなかったので調査した loadable-components.com 何かというと Reactコード分割ライブラリ React.lazyに代わるものではありません Reactチームが推奨するソリューション どんな特徴があるかというと Library Spli…

【Redux】React + Redux のテストを考える

React + Redux アプリケーションのテストを考えているときに、reduxのテストの書き方のドキュメントと、丁度以下の記事を目にしたので、自身のプロジェクトに当てはめてみる recruit-tech.co.jp 上の記事で挙げられているテストの対象は以下 Action Creator …

【React】useEffectとは

React 16.8で追加されたフック (hook) 機能の一つuseEffectについて調べた ja.reactjs.org useEffect useEffect(didUpdate); DOM の書き換え、データの購読、タイマー、ロギング、あるいはその他の副作用をReact.renderでやるとバグや非整合性を引き起すので…

【React】Suspenseを使ったデータ取得

React Concurrent Mode のSuspense機能についてのお話を聞く機会がありそうなので、事前準備として下のドキュメントを読んでまとめる ja.reactjs.org React 16.6 で、レンダー可能になる前のロード中状態(スピナーのようなもの)を宣言的に指定することがで…

【React】Concurrent Modeについて

まだ安定版には入っていないReactのConcurrent Mode についてお話を聞く機会がありそうなので、事前準備として下のドキュメントを読んだまとめ ja.reactjs.org Concurrent Modeとは? React アプリケーションをレスポンシブに保ち、デバイスの能力やネットワ…

【Google Map API】ReactプロジェクトでGoogle Mapを表示したい

react.jsプロジェクトでGoogle Map APIを使用してMAPを表示し、さらに以下の操作をしたかったので調査した オリジナルのマーカーの作成 ズームインアウトボタンの場所変更 マーカーをクリックして吹き出しを表示する 最初に Google Map API を利用するために…