![株式会社デジナーレ[designare]](https://designare.jp/wp-content/themes/designare_new/img/logo.svg){kind=logo}
Writer： tokuyasu 更新日：2023/12/04
こんにちは、デジナーレ福岡オフィスの徳安です。
この記事では、useCallbackについて説明します。
useCallbackとは
|
1 |
const cashedFn = useCallback(fn, dependencies) |
構文
|
1 |
useCallback(fn, dependencies) |
コンポーネントのトップレベルでuseCallbackを呼び出し、
再レンダー間で関数定義をキャッシュする。
引数
fn: キャッシュしたい関数の値を設定する
dependencies: 依存配列を設定する。
依存配列を[]（空）で設定すると、Reactは再び同じ関数を返却する。
＜注意＞
■useCallbackはフックなのでコンポーネントのトップレベル、
または独自のフックでのみ呼び出すことができる。
ループや条件式の中で呼び出すことはできない。
■React は、特定の理由がない限り、
キャッシュされた関数を破棄しない。
useMemoとuseCallbackについての違い
useMemoとuseCallbackの違いはキャッシュできる内容
useMemoは関数の呼び出し結果をキャッシュする。
対するuseCallbackは関数自体をキャッシュする。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
export const Counter = () => { const [countStateA, setCountStateA] = useState(0); const [countStateB, setCountStateB] = useState(0); //useCallbackは関数をメモ化するフック useMemoは関数の結果をメモ化するフック memo はコンポーネントの結果をメモ化するフック const countIncrementA = useCallback(() => setCountStateA(countStateA + 1), [countStateA]); const countIncrementB = useCallback(() => setCountStateB(countStateB + 1), [countStateB]); return ( <> useCallbackのコード <p>Aボタン{countStateA}</p> <p>Bボタン{countStateB}</p> <CountResult text="Aボタン" countState={countIncrementA}> Aボタン </CountResult> <CountResult text="Bボタン" countState={countIncrementB}> Bボタン </CountResult> </> ); } |
|
1 2 3 4 5 6 7 8 9 10 |
import { memo } from "react"; export const CountResult = memo(({ text, countState }) => { console.log(`${text}がクリックされました。`); return ( <> <button onClick={countState}>{text}</button> </> ); }); |
初回レンダリング時
*Aボタン押下時 *Bボタン押下時
このようにuseMemoとuseCallbackを併用してメモ化することで、
不要なレンダリングが行われないようになり、
パフォーマンスの最適化が可能となる。
まとめ
useCallbackとは...？
＊関数をメモ化することができる
＊メモ化することで不要なレンダリングを防ぐことができる
＊パフォーマンスを向上させることができる
useCallbackの使い方のまとめ
第一引数にはコールバック関数を記述する
第二引数には依存配列を記載する
依存配列は[]でもOK
ただし関数が定義されるのは初回実行時のみ
依存配列に値を格納することができる
格納された値が更新される度に関数が再定義される
ここまで読み進めていただきありがとうございます。
