React
外側から受け取ったrefとは別に、コンポーネント内部で定義したrefも一緒に子コンポーネントに渡したい場合を調べた 調べたところ、カスタムhookで作る必要があった useMergeRefという名でよくutilとして実装されている模様 実装例： import { useCallback }…
Reactのjsxで、ref属性に関数を渡すやり方を見かけたので調べた react.dev ref属性に関数を渡すやり方はref callback functionと呼ばれ、refを利用してDOM要素やコンポーネントへの参照を取得する際に使う 基本構文 ref属性に関数を渡すことで、その関数がDO…
useImperativeHandleという便利な hook を知ったので調べた ja.react.dev useImperativeHandleは、Reactのカスタムフックで、親コンポーネントが子コンポーネントの内部的なインスタンスを操作できるようにするために使われる 通常、Reactでは「データの流れ…
ReactのForwardRefExoticComponentというのを見かけたので調べた ForwardRefExoticComponent は、React.forwardRef を使用して作成されたコンポーネントの型を表す Reactコンポーネントでどのように使用されるか React では、ForwardRefExoticComponent は主…
MobXとReactの統合について mobx.js.org mobx-react-liteライブラリから提供されるobserverを使うことで、必要な変更があった場合にのみ再レンダリングされる 基本的な使い方は以下 import React from "react" import ReactDOM from "react-dom" import { ma…
react-dropzoneでpreviewすることができるのはわかったので、今度はそのpreview中の画像の横幅と縦幅を取得したい uga-box.hatenablog.com プレビュー画像の横幅と縦幅を取得するには、<img> 要素の naturalWidth と naturalHeight プロパティを使用する これらの…
react-dropzone でファイルのアップロード中にクライアントサイドだけで previewを表示する方法を調べた drop-zoneの機能として、previewがあるのでそれを利用すれば良さそう react-dropzone.js.org 上のドキュメントを読んでいて気になったのが、URL.create…
React Dnd-Kit というライブラリを知ったので調べた dndkit.com Dnd-Kit はReactでドラッグ＆ドロップ機能を実装するためライブラリ 特徴は以下 最小限の依存関係で動作するように設計されていて、軽量、高パフォーマンス フックベースのAPI カスタマイズす…
react-dropzoneというファイルアップロードに便利なライブラリを知ったので調べた react-dropzone.js.org react-dropzone は、ファイルのドラッグ＆ドロップインターフェースをReactアプリケーションに簡単に追加するためのライブラリ React Dropzoneの主な…
react-beautiful-dndのドキュメントをみていて、Droppableコンポーネントの最後の子要素にある{provided.placeholder}がよくわからなかったので調べた 目的 provided.placeholderの主な目的は、ドラッグ操作中にドラッグされているアイテムの元の位置を維持…
react-beautiful-dndのカスタマイズオプションについて調べた react-beautiful-dnd は様々なカスタマイズオプションを提供している 以下のコードを例に、カスタマイズオプションを説明する import React from 'react'; import { DragDropContext, Droppable,…
react-beautiful-dnd というドラッグ&ドロップのためのライブラリを知ったので調べた github.com react-beautiful-dndは、Atlassian社によって開発されているドラッグ&ドロップのためのライブラリで、使いやすいAPIを提供している 特徴 使いやすい 直感的なA…
React18で導入されたフック useDeferredValue で入力後の再レンダリングを遅延させる方法を知ったのでメモ useDeferredValueは UI の一部の更新を延期できるReact Hook react.dev useStateで管理する状態の変化を後回しにして、レンダリングを遅延させるもの…
React18からの2年ぶりの大型アップデートとなるReact19の新機能を確認した Actions（server actions） Next.jsですでに使っている機能のため割愛 【技術本まとめ】実践Next.jsを読んでのメモ - Server Action とパフォーマンス - UGA Boxxx useActionState u…
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と略されるみたい サーバーサ…
