kstack-react

React のコンポーネントを書くときの規約。理由を理解した上で適用すること。ルーターの beforeLoad・loader の書き方は kstack-tanstack-router、URL に載せる state は kstack-nuqs、live query は kstack-tanstack-db の SKILL を参照。

useEffect を使わない。目的ごとの仕組みに置き換える

useEffect・useLayoutEffect と、それらを包んだ自作 hook を書かない。Effect で書きたくなる処理には、目的ごとの置き換え先がある。

目的	置き換え先
データ取得	TanStack Query などのデータ取得ライブラリ（useQuery で読み、読み込み中は view の hook で判定する。次の規約）
props・state から計算できる値	render 中に計算する
ユーザー操作をきっかけにした処理	イベントハンドラ
外部ストア・ブラウザ API の購読	zustand などの状態管理ライブラリ（購読は store 側に書き、コンポーネントは selector で読む）
props が変わったときの state の初期化	親から `key` を渡す
DOM の操作、React 外のウィジェットの初期化	ref callback（React 19 から cleanup 関数を返せる）