Reactでｎ個のコールバックをどうメモ化する問題

導入 React でパフォーマンスを意識するとコールバック関数をメモ化することになります。 しかしコールバック関数を渡す対象がテーブルのセルなど動的に生成される要素の場合、途端にメモ化の方法が自明ではなくなります。 useCallback を覚えた後、自分はその次の一歩で困ったので、ここで知っている方法を紹介しようと思います。 まずは useCallback について軽くおさらいした後、本題に入ります。 useCallback ぐらい知っとるわという方は『問題』の節へジャンプしてください。 React のおさらい React でパフォーマンスを向上するには値を変化させないことが重要です。 そこで力を発揮するのがメモ化です。 例として、以下のように数値を入力するとその 2 倍を計算して隣に表示する行が 2 つ並んだコンポーネントを考えてみましょう。 import { useState } f