【React】レンダリング制御について （React.memo / useCallback / useReducer） - Qiita

はじめに React のコンポーネントのレンダリングの条件とどのように不必要な再レンダリングを防ぐかについて、手元で動かして確認しながらまとめました。 誤り等ありましたらコメントでご指摘いただけますと幸いです レンダリングの条件 まず、再レンダリングとはどのようなことを指すのでしょうか。 コンポーネントは以下のような流れで画面上に表示、更新されます。 レンダリング -> マウント -> 【state の更新など何かしらのイベント】 -> 再レンダリング -> 仮想DOMの差分を検知 -> リアルDOMに差分を反映 -> ... -> アンマウント 一度 DOM にマウントされたコンポーネントに state の更新などが生じると、React はコンポーネントを再度レンダリングします。state の更新以外にも、親コンポーネントがレンダリングされた場合や渡される props が更新された場合な