こんにちはフロントエンドエンジニアの茶木です。 React コンポーネントのレンダーの基本を理解し、再レンダーの抑制の方法をまとめました。 先日、社内のテックシェアで React の hooks の基礎の勉強会をしたのですが、その中で useCallback を使った、再レンダーを防ぐ仕組みを説明したかったのですが、わかりやすい例を準備できなかったのでこちらのブログでリベンジします。 React コンポーネントの再レンダーの基本コンポーネントの再レンダーは、以下の場合に発生します。 state に変更があった場合props に変更があった場合親コンポーネントでレンダリングがあった場合再レンダーが起きる例実際の実装に近い形かつミニマムな例を考えてみました。 text input と reset を持ったフォームです。 これはちょっとありそうな例だと思います。 import React, {