[react] レンダリング時に毎回実行したい処理をどこに書くべきか?

概要

useEffectの第2引数を指定しないとレンダリングの度に処理が実行されるが、それは関数コンポーネント内に直接書いた処理と何が違うのか。

例えば、以下の処理ではinitializeとupdateは初回のレンダリング時やstateの更新時など同じタイミングでコンソールに出力される。

const Sample = () => {
  const [num, setNum] = useState(0);
  console.log("initialize");
  useEffect(() => {
    console.log("update");
  });
  return (
    <button onClick={()=>{setNum(num+1)}}>plus</button>
  )
}
export default Sample;

以上のことをQiitaに質問として投稿してみたところ、とてもわかりやすい答えをもらうことができた。

回答していただいた2人の方には感謝です、ありがとうございました。

結論

  1. クリーンアップが必要な場合はuseEffectを使う。
    unsubscribe, closeなど。
  2. 非同期処理(async, await)を使う場合はuseEffectを使う。
  3. 使わなくて良い場合はuseEffectを避ける。

コメント

タイトルとURLをコピーしました