【React】useCallbackとset関数を同時に使う方法

useStateを定義する

ここではcountという名前の変数を例として定義しています。

//const [状態変数, 状態を変更するための関数] = useState(状態の初期値);
const [price, setPrice] = useState(initialState)

useCallback関数を定義する

doSomethingという例として関数を用意しています。

const sampleFunc = useCallback(
  () => {doSomething(a, b)}, [a, b]
);

set関数をコールバック関数に入れる

下記の例では本の金額をフォーム上などで変更したい時にuseCallbackとset関数を同時に使っています。

const onChangePrice = useCallback(
  (price: BookPriceInput) => {
    setPrice({
      ...book,
      price,
    });
  },
  [book]
);

Bookエンティティに依存しているpriceのstate関数と依存配列である[book]を記述して、useCallbackとして使っています。
...bookはスプレッド構文というものでbookの配列の要素を展開する構文になります。

この記述によりuseCallbackは値の変更がなければメモ化によって再計算することなく値を返してくれるので
onChangePriceにpriceを渡して、値が変更された場合（priceを変更した場合）にはset関数で状態を保持した上で再計算した値を返します。

次またonChangePriceにpriceを渡して同じ値だった場合は再計算することなく値を返却してくれます。