🎃
【React】再レンダリングとuseEffect
- Stateの値や、Propsの値、親のコンポーネントが更新された場合に再レンダリングされる
App.jsx
import ( useState ) from 'react';
import ( Message ) from './components/Message';
export const App = () => {
const [num, setNum] = useState(0);
const [isMultiple, setIsMultiple] = useState(false); // 状態を変えるのでuseStateを使う
const onClickCount = () => {
setNum((prev) => prev + 1);
};
const onClickToggle = () => {
setIsMultiple(!isMultiple); // セット関数を読んで実行。反対のフラグにする
};
useEffect(() => {
if (num > 0) {
if (num % 5 === 0) {
isMultiple || setIsMultiple(true);
} else {
isMultiple && setIsMultiple(false);
}
}
}, [num]); // useEffectの第2引数の配列に変更があった時のみ、再レンダリングされる。空の配列の場合、最初のマウント時だけ実行される。処理の関心を切り替えられる。
return (
<>
<Message color='orange'>How's it going?</ Message>
<Message color='green'>Pretty good!</ Message>
<button onClick={onClickCount}>カウント</button>
<p>{num}</p>
<button onClick={onClickToggle}>on/off</button>
{isMultiple && <p>5の倍数！！</p>} // 特定の条件で要素を表示する論理演算子
</>
);
};
Discussion
説明していると筆が乗ってしまったので長文で失礼します💦
React における「レンダー」という用語が指すものは「useEffect の実行」ではありません。
「レンダー」という言葉が指しているのは、App 関数を、関数として実行する（
App()のように）ことであって、useEffect 内のコードの実行は、レンダーと呼ばれていません。
加えて、
とありますが、これも誤りです。依存配列は、対象の処理の実行タイミングを恣意的にコントロールするために使うものではありません。
手前味噌になりますが、僕の記事も見てもらえば、どう考えるべきかわかりやすいと思います。
参考までに、コード例については、おそらく以下のように修正できると思います。
このほうが「いつ、どのようにステートが更新されるか」を正確に記述できているのでベターです。
コード例は以下のように書くほうがベターです。