再レンダリングと副作用（useEffect）

// useEffectをインポートする
import React, { useEffect, useState } from "react";
import { ColorfulMessage } from "./components/ColorfulMessage";

const App = () => {
  const [num, setNum] = useState(0);
  const [faceShowFlag, setFaceShowFlag] = useState(false);

  const onClickCountUp = () => {
    setNum(num + 1);
  };
  const onClickSwitchShowFlag = () => {
    setFaceShowFlag(!faceShowFlag);
  };

  // 
  /** useEffectは第一引数に関数、第二引数に依存配列を取る
   *  第二引数に空配列を渡すと、そのコンポーネントで最初の1回だけ通したいような処理を実行することができる。
   *  例：画面初回表示時にデータを取得したり、処理を実行する時
   *  第二引数の配列に変数を渡すと、その変数だけに関心を持つuseEffectになる
   *  例：numの更新が走る度に以下のuseEffect内の関数が実行される
   */ 
  useEffect(() => {
    if (num > 0) {
      if (num % 3 === 0) {
        faceShowFlag || setFaceShowFlag(true);
      } else {
        faceShowFlag && setFaceShowFlag(false);
      }
    }
    // es-lintを使用して静的解析を行っている場合、依存配列には関数内で使用している変数をすべて入れないと警告が出る。特定の変数のみに関心を持ちたい場合は、下記のように「コメント」で設定を無視する記述を書くことで次の行の警告が出なくなる
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [num]); 

  return (
    <> 
      <h1>こんにちは！</h1>

      <ColorfulMessage color="blue">お元気ですか？</ColorfulMessage>
      <ColorfulMessage color="pink">元気です！</ColorfulMessage>

      <button onClick={onClickCountUp}>カウントアップ！</button>
      <br />
      <!-- on/offボタンが押される度にonClickSwitchShowFlagを切り替える -->
      <button onClick={onClickSwitchShowFlag}>on/off</button> 
      <p>{num}</p>
      {faceShowFlag && <p>(´・ω・`)</p>}
    </>
  );
};

export default App;

まとめ

Reactの再レンダリング条件は「Stateを変更した時」「Propsを受け取っている場合、そのPropsの中身に変更があった時」「親のコンポーネントが再レンダリングされる時、子コンポーネントも追従して再レンダリング」の3つとなる。
再レンダリングを最適化してパフォーマンスを上げる必要がある。
「Too many re-renders」のエラーが出た場合は、Stateの更新周りを疑う。
扱う変数やStateの数が増えてくると、それぞれの処理が邪魔しあってうまく動かなくなる場合がある。
そのような場合はuseEffectを使用して関心の分離を行う。
ある変数の状態に応じてや、初回レンダリング時のみに処理をしていきたい時にuseEffectは非常に使える。