useMemoとuseEffect+useStateの違いって何?
はじまり
useMemoの使い方を眺めていたところ、「これってuseEffectとuseState使うのと何が違うん?」と思ったので自分が納得するまで調査する
useMemo
計算自体は重いけど、何回やっても結果は同じもの
第二引数で依存関係を指定できる
useEffect
依存関係の値が変更されたタイミングで発火する関数
第二引数で依存関係を指定できる
useMemoは変数、useEffectは関数として扱うからそもそも違う?
useMemoのユースケースがよくわかる
useMemoは変数、useEffectは関数として扱うからそもそも違う?
それはそうだけど useMemo と useEffect + useStateの違いははっきり分かってない
この記事を見るに状態の変わり方がこの2つでは違うっぽい
Lets suppose someNumber is initially 0:
The useMemo version immediately renders 1.
The useEffect version renders null, then after the component renders the effect runs, changes the state, and queues up a new render with 1.
Then if we change someNumber to 2:
The useMemo runs and 3 is rendered.
The useEffect version runs, and renders 1 again, then the effect triggers and the component reruns with the correct value of 3.
useEffectでは実行後すぐに引数を含まない値を返す
記事の例で言うと、0でnull, 2で1を返している
useMemoは値を代入し直す作業なので
0で1, 2で3を返している(正常)
納得したのでクローズ