初回renderを無視するuseEffect

はじめに

useEffectは特定の変数が更新された時だけ、中身を実行してくれる良いやつです。
ただ、初回のレンダー時はどんなことがあっても処理が走ってしまいます。
これを回避するのはなかなか面倒で、useRefを使ったりといろいろあるんですが、めっちゃ便利なライブラリ見つけたので紹介します。

react-use

react-useは様々な便利系hooksが実装されていて、スター数も多くおすすめです。
https://github.com/streamich/react-use
この中で実装されているuseUpdateEffectが今回の目的のhooksです！

使い方

使い方は猛烈に簡単!
useEffectと全く同じです。hooks名をuseUpdateEffectに変えればおしまい。
これだけで、初回のレンダー時に中身は実行されません。

useUpdateEffect.ts

useUpdateEffect(() => {
  console.log(hoge) //初回は実行されない
}, [hoge]);

めっちゃ便利なのでぜひ使ってみてください〜。