React
React アプリの layer
Juntao Qiu の React モジュール化の記事に沿って、決済画面を view、model、data に分ける。サンプルリポジトリを実際に動かして見つけた useMemo の無効化と fetch の繰り返し、そしてこの構造をいつ使うかの判断もまとめた。
overlay-kit
モーダルの開閉をグローバル状態で持っていたコードをawait一行に置き換えて得たものと失ったもの。overlay-kitのイベントとreducer、openAsyncのコアロジックをソースで追い、再オープンの挙動をテストしてドキュメントとのズレまで確認する。
Kalyx
React headless DatePicker「Kalyx」を作った理由と、Ark UI、React Aria、react-day-pickerとの違いを整理した。ISO 8601 UTCの値モデル、IntlによるDST処理、全IANAタイムゾーンのプロパティテストをコードと実測で説明する。
状態管理
フロントエンドの状態管理をローカル・グローバル・サーバー・フォーム・URL・外部・ガードの7分類に分け、分類ごとに合うツールと境界を整理する。最後に、状態を作る前に投げかける4つの問いにまとめる。
Toss Frontend Fundamentals 模擬試験 第2回のリファクタリングを終えて
Toss Frontend Fundamentals 模擬試験 第2回の会議室予約アプリをリファクタリングした経験を共有する。モノリシックなコンポーネントの分割、ドメインロジックの抽出、テストを基盤としたリファクタリングの過程をまとめた。
queryKey
TanStack Query の queryKey の管理方法が、インライン配列、定数オブジェクト、クエリキーファクトリーを経て v5 の queryOptions までどう進化したかを整理する。記述規則、DataTag による型推論、無効化のパターンを実務の観点で扱う。
queryKey比較の仕組み
TanStack Query がレンダリングのたびに新しく作られる queryKey 配列を同じキーと判定する仕組みを整理する。hashKey のシリアライズがキー順、undefined、Map などの値をどう変えるか、フィルターがキーの構造をどう比較するかまで扱う。
ErrorBoundary の配置
React Router と TanStack Query を使う画面で、ErrorBoundary をいくつ、どこに置くかを決める基準をインストール済みのソースで確かめる。ルート、画面、領域ごとに受けるエラーと戻し方、fallback をひとつにそろえる方法、再試行の条件まで扱う。
再試行ボタンが効かない理由
react-error-boundary の再試行ボタンを押しても同じ fallback がまた出る三つの場合をソースで確かめる。クエリのエラーは QueryErrorResetBoundary、レンダーエラーは queryFn の検査、React.lazy のチャンク失敗は再読み込みで解く。
エラーの伝播
同じエラーを七か所から投げてみると、ErrorBoundary に届くのは四つだけだ。コンパイル時、レンダーとライフサイクル、サーバーデータ、ページ遷移、外部ライブラリ、イベントと非同期がそれぞれどこへ伝播するのかを、公式ドキュメントとインストール済みのソースで確認する。
React Fiber完全攻略
React Fiberアーキテクチャを、Stack ReconcilerからFiberノードの構造、ダブルバッファリング、Lane優先度、Work Loop、レンダーフェーズとコミットフェーズ、Concurrent Featuresまで、Reactのソースコードを基に深く分析する。
ReactがMessageChannelを使う理由
React SchedulerがrequestIdleCallback、requestAnimationFrame、setTimeoutではなくMessageChannelで作業を予約する理由を、ReactのPR記録とsetTimeoutの4ms遅延のChrome実測から整理する。
Zustand、お前は何者で、なぜProviderLessなんだ？
ZustandがProviderなしで状態管理を実現する仕組みを、ソースコードを読み解きながら掘り下げる。React Context APIとの違い、モジュールスコープに基づくストア設計、useSyncExternalStoreによる購読までを順に追いかける。