Closed9

useMemoとuseEffect+useStateの違いって何?

mu-sukemu-suke

はじまり

useMemoの使い方を眺めていたところ、「これってuseEffectとuseState使うのと何が違うん?」と思ったので自分が納得するまで調査する

mu-sukemu-suke

useMemo

計算自体は重いけど、何回やっても結果は同じもの
第二引数で依存関係を指定できる

useEffect

依存関係の値が変更されたタイミングで発火する関数
第二引数で依存関係を指定できる

mu-sukemu-suke

useMemoは変数、useEffectは関数として扱うからそもそも違う?

mu-sukemu-suke

useMemoは変数、useEffectは関数として扱うからそもそも違う?

それはそうだけど useMemo と useEffect + useStateの違いははっきり分かってない

mu-sukemu-suke

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.

mu-sukemu-suke

useEffectでは実行後すぐに引数を含まない値を返す
記事の例で言うと、0でnull, 2で1を返している

useMemoは値を代入し直す作業なので
0で1, 2で3を返している(正常)

このスクラップは2021/11/10にクローズされました