Reactガイドを読んでいくその257

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

副作用を使う場合のヒント

ヒント:副作用のスキップによるパフォーマンス改善

毎回レンダーをするとパフォーマンスへの影響が懸念される。
クラスの場合はcomponentDidUpdate の内部で prevProps や prevState と比較するコードを加えることで解決できたが、useEffectにはすでに組み込まれており、明示的に加えることなく不要な場合はスキップするようにすることができる。

使用するためには第二引数として配列を渡す。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

例えば上の例ではcountを渡している。
countが5 == 5であればレンダーをスキップ、そうでない場合は通常通り機能する。
これはクリーンアップがあるタイプでも同様であり、今後は第二引数を使う側が定義しなくても自動で加えられるような変更があるかもしれない。

今日はここまで。