再描画の観点でコンポーネントを細かく切り出すモチベーションはあるのか

コンポーネントを細かく切り出すモチベーションはあるのか？

めっちゃ極端な話、Reactアプリケーション全体を一つのFCの中で書いてしまったら、どんな弊害がある？

もうちょっと小さく、1ページ全体を一つのFCで書いてしまったら、でもいい

思いつくもの

JSXもロジック部分もごちゃごちゃするので見づらい

パフォーマンス的にはどう？

ここを見ていく

結論

ある

画面の一部のstateが変更されたら、どこが再描画される？

ページ全体

以下のようなクソデカコンポーネントを考える

「1ページ全体を一つのFC」とは言わないまでも、でかいコンポーネント

code:クソデカコンポーネント.tsx

const VeryBig: React.FC = () => {

console.log("with state rendering");

const method1 = () => "method 1";

const method2 = () => "method 2"; // 重い処理

const method3 = () => "method 3";

// ..

const method100 = () => "method 100";

return (

<div>

<p>{isOpen ? "open" : "close"}</p>

<div>{method1()}</div>

<div>{method2()}</div>

<div>{method3()}</div>

{/* .. */}

<div>{method100()}</div>

<button onClick={() => set(!isOpen)}>button</button> // ←ここをクリックすると、VeryBigの全てが再計算＆再描画される

{/* ↓親であるVeryBigが再描画されたのでこの子らも全て再描画 */}

<Child1 />

<Child2 />

<Child3 />

</div>

);

};

切り出すとどうなるか？

切り出し方にもいくつかある

①propsを親で作って子に流すもの

memoしていなければ、親の再描画で、再描画される

つまりコンポーネントに切り出していないときと同じ

memoに加えて、useMemoやuseCallbackも必要

②propsを流さない切り出し

memoしていなければ、親の再描画で、再描画される

memoしていれば、子は無駄に再描画しない

つまり、切り出すモチベーションが生まれる

できるだけ②でやったほうが、useCallbackを書かなくて良いので楽

つまり切り出すならmemoは必須？？？

でかい親から、細かい兄弟の子供にすると、

依然として親が再描画すれば、子供は全員再描画だが、

親ではなく、細かい兄弟の一人だけが更新されたときは、他の兄弟に影響しない

なので、memoやuseCallbackなどをしなくても、コンポーネントを分割することでパフォーマンスの一助にはなる、こともある

code:tsx

const P = () => {

return (

<div>

<Child1 /> // ←この中のstateが変化したときは

<Child2 /> // ←ここらには、

<Child3 /> // 影響はない

</div>

)

}