useCallbackとuseMemoをざっくり理解

useCallbackとは何か

ざっくりいうと、useStateでの値が普通の関数で変更された場合、returnの下にあるものすべてが再度renderされてしまうが、値を更新する関数をcallbackで包み込んでおけば値が変わった箇所だけがrenderされ、ちょっと早くなる。

通常ケース

const [num, setNum] = useState(0)
const [num2, setNum2] = useState(0)

const callback = () => setNum(num + 1)
const callback = () => setNum2(num2 + 1)
return (
<p>number:{num}</p>
<p>number:{num2}</p>
<button onClick={callback}>click</button>
<button onClick={callback2}>click2</button>
) 

clickかclick2のどちらかを押した時点でnum, num2どちらも再renderされてしまう。

useCallbackのケース

useCallbackはuseEffectと同様、第二引数に変数をセットできる。その第二引数が変化したときのみ再renderされるようにできるから、わざわざどちらもrenderし直すことがなくなるのだ。

const [num, setNum] = useState(0)
const [num2, setNum2] = useState(0)

//numが変わった時だけrender
const callback = useCallback(() => setNum(num + 1), [num])
//num2が変わった時だけrender
const callback = useCallback(() => setNum2(num2 + 1), [num2])
return (
<p>number:{num}</p>
<p>number:{num2}</p>
<button onClick={callback}>click</button>
<button onClick={callback2}>click2</button>
) 

こうすることでnum, num2のアップデートが完全に切り離され早くなるよね。やったー！

useMemoとは何か

useMemoはusecallbackのようにrenderする時を絞ることと同時に、変数と計算結果を保存してくれるやつ。
つまり”機能的には”useCallbackの上位互換である。ただし計算結果を保存するのもコストがかかっているし計算が簡単なものに対してuseMemoを使ってもcacheを無駄にしてしまう。

上のコードのuseCallbackをuseMemoに置き換えればそのまま成り立つので今回は割愛。

まとめ

今回はreactを最適化するためのuseCallbackとuseMemoを漁ったが、正直、普段使っているようなただuseStateをtrueからfalseに変えるだけのようなものに、これらを使っても正直あんまり変わらないし、コードがほかのエンジニアにとって読みにくくなるだけである。
使う場所は非常に複雑な計算、処理の重い場所に限定すること。