useEffect / React Hooks – React入門

CRANK

連載目次 : React入門前回の記事 : useState / React Hooks前回のuseStateの解説につづきReat Hooksで最も重要な機能であるuseEffectについて解説を行います。useEffectはClassコンポーネントに指定できるライフサイクルイベントの代替手法として紹介されることが多いのですが、その理解ですと上手に使いこなすことは難しいです。useEffectを正しく取り扱うにはfunctionコンポーネントの再描画(リレンダリング)の仕組みを知る必要があるのでまずは再描画の解説から行います。functionコンポーネントの再描画functionコンポーネントはJSXとして読み込まれた際に最初の描画が行われます。そして、アプリケーション内で以下の変化が発生した際に再描画されます。親コンポーネントが再描画された場合親コンポーネントから引き渡されたpropsが変化した場合コンポーネント内でuseStateで定義している値が変化した場合カスタムフックより受け取っている値が変化した場合再描画の際にコンポーネントは初回と同じ処理が実行されるのではなく一部の処理は前回のコンポーネントの状態を引き継ぎます。たとえばuseStateで値が変化されている状態で再描画が発生すると、コンポーネントはus…