renderについての理解のために記事にしました。
render()メソッドとは？
Reactのクラスコンポーネントを使うとき、必ずと言っていいほど定義されるのがrender()メソッドです。基本的には、以下のような形でJSXを返すことでUIを定義します。
class MyComponent extends React.Component {
render() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
}
このrender()メソッドが返すJSXが、実際にDOMツリーへと変換され、ブラウザに描画されます。一方、関数コンポーネント（function MyComponent() { ... }）では、render()メソッドを明示的に書く必要がありませんが、関数コンポーネントの戻り値も同様にJSXを返す点で本質は同じです。
ReactがUIを更新する仕組み
1. ステートやプロパティの変更
Reactコンポーネントが再レンダーされる最大のきっかけは、propsまたはstateに変更があったときです。たとえば、以下のように状態を更新すると、自動的にコンポーネントが再レンダーされ、新しい状態に基づいてUIが更新されます。
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>{this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
2. 仮想DOM（Virtual DOM）
Reactは更新が必要になると、まず**仮想DOM（Virtual DOM）**上で更新後の状態を反映したツリーを作成します。仮想DOMは、JavaScriptのオブジェクトとして軽量に扱われるため、ブラウザの実際のDOMを直接操作するよりもパフォーマンス面で効率的です。
3. 差分（diff）を比較して必要な部分だけ更新
Reactは、更新前の仮想DOMと更新後の仮想DOMを比較し、変化した部分だけをブラウザのDOMに反映します。これにより、ページ全体を再描画するのではなく、最小限の操作で画面を更新できるため、パフォーマンスが向上します。
再レンダーを制御する方法
Reactが勝手に再レンダーしてしまうのは便利な反面、パフォーマンスに影響が出る場合があります。そこで、特定の状況で再レンダーを防ぎたい場合は、以下のような方法を使います。
shouldComponentUpdate()メソッド (クラスコンポーネント)
親コンポーネントからのpropsや自身のstateに変化があっても、条件によっては再レンダーをスキップできます。
React.memo() (関数コンポーネント)
propsに変化がない場合、コンポーネントの再レンダーをスキップします。メモ化によって、前回のレンダー結果を再利用します。
PureComponent (クラスコンポーネント)
shouldComponentUpdate()で浅い比較（shallow compare）を自動的に行うクラス。特に処理を追加しなくても、propsやstateが変化していなければ再レンダーをスキップします。
これらの機能を使いこなすことで、必要なときだけrender()が呼ばれるようにし、高パフォーマンスを維持できます。
render()の注意点
副作用を入れないこと: render()メソッドは、あくまでUIを返すためのもの。データの取得やDOM操作などの副作用は、componentDidMountやuseEffectなどのライフサイクルメソッド・フックで行うのが基本です。
複数の要素を返す場合: ルート要素は1つでなければなりません。複数要素を返したい場合は、親要素でラップするか、Reactのを使用します。
ステートの直接変更は避ける: this.state.count = 10のように、直接ステートを書き換えても再レンダーはトリガーされません。必ずthis.setState()を使って更新しましょう。
まとめ
Reactにおけるrender()メソッドは、UIの描画を担当する中心的な存在です。再レンダーがいつ、どのように行われるのかを理解することで、コンポーネントの設計やパフォーマンス最適化をスムーズに進められます。
render()はJSXを返すメソッド（または関数コンポーネントの戻り値）で、仮想DOMと連動してUIを更新する
propsやstateが更新されると、自動的に再レンダーが行われる
shouldComponentUpdate()やReact.memo()などを使うことで、不要な再レンダーを防止できる