useCallback, useMemoを使ってみよう

useCallback: https://qiita.com/seira/items/8a170cc950241a8fdb23

useMemo: https://qiita.com/seira/items/42576765aecc9fa6b2f8

リアクトコンポーネントとかカスタムフックは、レンダリングのたびに再実行されます。それは、関数定義とかも一緒。流石に毎回やってたらうざい（≒重たくなる）ので、useCallbackで囲むと実行頻度が抑えられます。とはいえ、関数の中でstateとか使ってたりすると、その値が更新されないのは困ったりします。そういう時、そのstateだけuseEffectみたいに第二引数の配列に書いてあげることで、その変化時だけ再実行するコードになります。 useMemoはその値版。どっちも基本的には関与してる値全部配列に書いちゃって問題ない（というかそうすべき）です。 useEffectの時は無視していたWarningもここではちゃんと自動埋めして解消しましょう。書き方はこんな感じ

const [integer, setInteger] = useState(0);
const addItem = useCalback((item) => {
    setInteger(integer + item)
}, [integer]);

MinamiInoue2323 / osoji_kun

useCallback, useMemoを使ってみよう #56