メモ化が不要かもしれない

引数:

• scope: 分析対象(デフォルト: 現在の変更部分)。例: "diff to main"、"PR #123"、"src/components/"、"whole codebase"
• fix: 修正を適用するかどうか(デフォルト: true)。false に設定すると変更の提案のみを行います。

ユーザー引数: $ARGUMENTS

参照資料

分析前に読んでください:

1. https://overreacted.io/before-you-memo/ — メモ化を完全に避けるための2つのテクニック

検出するアンチパターン

1. 状態を下に移動できる場合に React.memo でコンポーネントをラップしている: コンポーネントが使用していない状態のため再レンダリングされている場合、メモ化する代わりにその状態を小さい子コンポーネントに移動させてください。遅いコンポーネントはメモ化なしで再レンダリングされなくなります。
2. 子要素を上に持ち上げられるのに React.memo でラップしている: 親コンポーネントが頻繁に変更される状態を持つ場合、ステートフルな部分を抽出し、高コストなサブツリーを children として渡してください。プロップスとして渡された子要素は、親の状態が変更されても再レンダリングされません。
3. 低コストな計算に useMemo を使用している: 小さい配列のフィルタリングやマッピング、文字列の連結、単純な算術演算など、これらはメモ化を必要としません。パフォーマンスの問題を測定した場合にのみメモ化してください。
4. 依存配列が毎回変わる useMemo を使用している: 依存配列がレンダリングのたびに変わる場合、useMemo は何もしません — 毎回再計算されます。依存関係を修正するか、メモ化を削除してください。
5. プロップスとして渡すオブジェクト/配列を作成するために useMemo を使用している: 子の再レンダリングを防ぐためにメモ化する代わりに、子要素が参照の安定性を必要としているかどうかを検討してください。子要素が React.memo を使用していない、または依存配列に渡していない場合、メモ化は無駄です。
6. 常に新しいプロップスを受け取るコンポーネントに React.memo を使用している: 親が常に新しいオブジェクト、配列、またはコールバックを渡す場合、React.memo の浅い比較は常に失敗します。子をメモ化する代わりに親を修正してください。
7. 導出状態に useMemo を使用している: プロップスまたは状態から値を計算している場合、レンダリング中にインラインで計算してください。React のレンダリングは高速です。const fullName = first + ' ' + last は useMemo を必要としません。

手順

1. 上記の参考資料を読んで、2つのコア テクニック(状態を下に移動、コンテンツを上に持ち上げ)を理解します
2. 指定したスコープを分析し、上記のアンチパターンを検出します
3. fix=true の場合は修正を適用します。fix=false の場合は修正を適用せず提案のみです。