17.0.1前回は、useMemoフックを用いて、算出値の計算が無駄に繰り返されないようにメモ化しました。今回は関数の呼び出しです。関数コンポーネントに定められた関数も、再描画のたびにつくり直されます。関数の生成をメモ化するのがuseCallbackフックです。useCallbackフックを使うuseCallbackフックの構文は、useMemoとよく似ています。違いは第1引数の関数が呼び出すコールバックだということです。第2引数には、useMemoと同じ依存配列を渡します。コンテクストモジュールのハンドラ関数をメモ化するまず、コンテクストのモジュールsrc/components/GameContext.jsにuseCallbackフックを用いましょう。ひとつめは、盤面のマス目をクリックしたときに呼び出すハンドラ関数(handleClick())です。ハンドラをuseCallbackフックの第1引数、コールバックとして包みます。useMemoと同じく、第2引数の依存配列を正しく与えることが大切です。xIsNext]);};コンテクストモジュールsrc/components/GameContext.jsに定めるコールバック関数はもうひとつあります。ゲーム情報のコンポーネントのボタンリストをクリックしたときのハンドラ(jumpTo())です。つぎのように、useCallbackフックを加えましょう。呼び出す関数をフックでメモ化したモジュールの記述全体は、以下のコード001のとおりです。盤面のコンポーネントの関数をメモ化するつぎに、盤面のコンポーネントモジュールsrc/components/Board.jsに、useCallbackフックを用います。マス目(Square)のJSX要素をつくって返す関数(renderSquare())と、それを3つ並べて1行のJSX要素にする関数(renderRow())です。前者は盤面のモジュールが、はじめに一度つくれば済みます(印を書き替えるのはマス目のコンポーネントの役目です)。したがって、依存配列は空[]にしました。書き直したモジュールの記述全体は、以下のコード002のとおりです。以下のサンプル001をCodeSandboxに公開しましたので、動きや各モジュールの具体的なコードについてはこちらでお確かめください。