Uncategorized
ボタン連打でP2002が出たので、debounceをやめてuseRefで二重送信を防ぐ新着!!
決済ボタンを連打すると/api/v1/checkoutにPOSTが2本飛んでしまって、DB側で が出てしまいました。Networkタブを見ると、ほぼ同じタイムスタンプで12ms差のPOSTが2本。片方は200 OKで、も […]
テキストとSVGアイコンの上下中央が揃わないのでvertical-alignのem/%を試す
テキストとSVGアイコンを横に並べたとき、vertical-align: middleを使っても「視覚的中心」が揃ってないことがあったりします。最初はflexを使っていて、結局em指定でベースラインを調整するにいたった検 […]
useEffectでStateを同期して無限ループ。filteredItemsをDerived Stateに直すまで
ProductListコンポーネントでフィルタとソートを実装してたんですけど、検索クエリとカテゴリ変更の同期で挙動がおかしくなったんです。最終的にはfilteredItemsをstateで持つのをやめて、レンダリングのた […]
Viteで本番だけログインできない。VITE_の付け忘れとimport.meta.envの誤解だった
Vercelにデプロイしたら、ビルドは成功したのに本番環境でログインボタンを押しても一切反応しなかった現象がありました。 コンソールを開いてみると次のようなエラーが出ていました。 undefinedのsplitメソッドを […]
画像のCLSが0.25超えてたのでaspect-ratioで押さえ込んだ記録
Lighthouseのスコアがずっと赤いままで、CLSが0.25を超えちゃっています。RenderingタブでLayout Shift Regionsを有効にしてリロードすると、画像コンポーネントの読み込みが完了したタイ […]
Server ComponentとTanStack Query、結局どっちでfetchするか
App RouterでデータフェッチをServer Componentに寄せる構成とTanStack Queryを併用しているんですけど、この境界線を曖昧にしたまま進めていたら、最近その影響がコードに出てきちゃいました。 […]
axiosでアクセストークン自動リフレッシュの無限ループを防ぐ
トークンベース認証のSPAで、アクセストークンの有効期限切れをaxiosのレスポンスインターセプターで検知して、自動でリフレッシュする処理を入れたんです。最初に書いたコードが想定通り動かず、むしろリクエストが無限に飛び続 […]
CIでたまに落ちるFlaky Test。isMountedをやめてAbortControllerで直した
これまで、ローカルでは再現しないのでマシンスペックのせいかと思って再実行で済ませてましたが、調べてみたらコード側に原因があったのでメモします。 修正が必要そうなのは、Reactコンポーネントのデータ取得後のレンダリング待 […]
addEventListener消し忘れでブラウザが落ちた？DevToolsでメモリリーク修正記録
ポートフォリオ用のSPAを触っていたところ、しばらく経ったところでファンが回り出して動作が重くなり、最終的にブラウザごと落ちました。 DOM要素がたかが数百程度のポートフォリオサイトなのに、何かがリソースを食いつぶしてい […]
Next.jsでブラウザAPI使おうとして「window is not defined」って怒られたら
Next.jsで開発してると必ず出くわすエラーです。 最初のうちはもちろん、もう知ってるはずなのに、ついwindow.localStorageと書いちゃってまたこのエラーが出ちゃうことも珍しくないです。 一応、モジュール […]