React Hooks ∋ useCallback

条件が同じ時に同じ関数を返すことができる関数です。1つ目の引数にある条件の時の関数、2つ目の引数に条件を渡します。戻り値もまた関数でその引数や戻り値は1つ目の引数に渡した関数と同じになります。

以下は例です。

const fn = useCallback(
  () => {
    console.log('called with: ', foo, bar, baz);
  },
  [foo, bar, baz]
);

まず前提として JavaScript では(() => {}) !== (() => {})です。これは参照先が違う為です。

上記コードのfnはfooとbarとbazに依存してます。例えば

の時、関数は'called with: 1 2 3'表示する関数を返します。さて、このような動作の関数は何個も必要なのか。やってることは同じなので1つ'called with: 1 2 3'表示する関数を作れば十分なはずです。それを1つにしちゃうのがuseCallbackです。

つまり、useCallbackがやっているのはfooとbar、bazがセットで同じ場合、前回作った関数があればそれを使うという事をするフックという事になります。

もし関数の内部が外部のどんな変数にも依存してない場合、明らかに生成が必要な関数は1つになります。明らかに1つの時は条件に空配列を置きます。

useCallback(
  () => { /* ... */ },
  []
);

これで常に最初に渡した() => { /* ... */ }が返ります。

依存無しなのにわざわざuseCallbackを使う必要があるのかとも思うかもしれません。これは必要あります。でなければ、子コンポーネントに渡すときに違う参照の関数を渡すことになり、子コンポーネントから見れば毎回違うセットのpropsが渡ってくるように見える為です。

純