useMemoとuseCallbackはどちらを使うべきか判断基準が知りたい

Answers (1)

• Yuki✓ Best answer6/21/2026

  実はこの2つ、内部的にやっていることはほぼ同じで、「何をメモ化したいか」が違うだけです。

  useMemoは「計算結果の値」をメモ化します。重い計算処理の結果や、オブジェクト・配列を新しく作り直したくない場合に使います。

  const sortedList = useMemo(() => list.sort(...), [list])

  useCallbackは「関数そのもの」をメモ化します。子コンポーネントにコールバック関数をpropsとして渡す際、親が再レンダリングされるたびに新しい関数が作られて子も不要に再レンダリングされてしまう、というのを防ぎたいときに使います。

  const handleClick = useCallback(() => doSomething(id), [id])

  実はuseCallback(fn, deps)は useMemo(() => fn, deps) とほぼ同じことをしているだけなので、「値が欲しいならuseMemo、関数が欲しいならuseCallback」というシンプルな基準で選べば大丈夫です。

  ただし、どちらもメモ化自体にコストがかかるので、明らかに重い処理でも子コンポーネントの再レンダリングが問題になっているわけでもない場合は、無理に使わない方がコードがシンプルになることが多いです。