Reactの再レンダーの要因

Reactでコンポーネントの再レンダーが発生する要因は大きく2つに大別できる。

1. そのコンポーネントが参照しているstateが変更されたとき

2. そのコンポーネントの親が再レンダーされたとき

1の派生として、hookやcontextを通して参照しているstateが変更されたときも、再レンダーが発生する。

そのコンポーネントが参照しているcontext内のstateが変更されたとき

そのコンポーネントが使用しているhook内のstateが変更されたとき

など

⚠️propsが変更されたときに再レンダーが発生するわけではない。

子がpropsを通して親のstateを参照している場合に、親のstateが変更されたときに親子共々再レンダーされる挙動が、propsが変更されたときに再レンダーが発生しているように見える、という誤解である。

⚠️親コンポーネントが再レンダーされても、props.childrenに渡したコンポーネントは子コンポーネントではなく、再レンダーされない。

code:tsx

// 内部状態を持っていて、propsでchildrenを受け取るコンポーネント。

const ExampleComponent1: FC<{ readonly children: ReactNode }> = (props) => {

const count, setCount = useState<number>(0);

return (

<div>

<p>count: {count}</p>

<p>

<button onClick={() => {setCount(count + 1)}}>+1</button>

</p>

{props.children}

</div>

);

}

code:tsx

// 再レンダーされるとコンソールにメッセージを流すコンポーネント。

const ExampleComponent2: FC = () => {

console.log("ExampleComponent2 re-rendered.");

return <p>ExampleComponent2</p>;

}

code:tsx

const App: FC = () => {

return (

// Appコンポーネントが再レンダーされた時か、ExampleComponent1内部のstateが変更された時に再レンダーされる。

// これはAppの子コンポーネントであって、ExampleComponent1の子コンポーネントではないので、

// ExampleComponent1が再レンダーされた時は再レンダーされない。

// Appコンポーネントが再レンダーされた時のみ再レンダーされる。

</ExampleComponent1>

);

}

参考にした資料