【初心者】Reactでレンダリング周りをコントロールしたい時用備忘録

前提：再レンダリングの発生タイミングは下記3つ

1. そのコンポーネントに渡されるpropsが更新された時
2. stateの更新が走った時
3. そのコンポーネントの親コンポーネントが再レンダリングされた時

再レンダリングタイミングを理解した上で、意図的にコントロールしたい場合を随時メモしていく

自身のコンポーネントに該当する部分が何も変わりない時に、例えば親コンポーネントが再レンダリングされたことが原因で、自身も再レンダリングされるということを防ぎたい時は自身の関数をmemoで囲う

上記の3を防ぎたい場合かな
※memoそのものは厳密には理解できてないけど、上記のことを防いでくれる役割を持つという理解程度に留め、とりあえず実装を繰り返してく。そのうち理解するっしょ。

import { VFC, memo } from "react";
import { Outlet } from "react-router-dom";
import { Header } from "../organisms/layout/Header";

export const HeaderLayout: VFC = memo(() => {
  return (
    <>
      <Header></Header>
      <main>
        <Outlet />
      </main>
    </>
  );
});

子コンポーネントをメモ化したのに何故か親コンポーネントの再レンダリングに合わせて再レンダリングされるときは、useCallbackを使うことを考える

これが起きる前提

• 親で関数を定義していて、子にPropsとして渡している
• その関数がアロー関数になっている

起きる理由

• アロー関数はそれを持つコンポーネントが再レンダリングされると新規に生成される（const funcA = () =>　的な書き方をしても、このfuncAは、コンポーネントが再レンダリングされる度に新しく生成される）
• このケースでは子へfuncAを渡しちゃっているので、冒頭のタイミング1に該当してしまう

解決方法は、useCallBack関数を利用する。
で、useCallbackは簡単に言うと、引数に入れた関数を、メモ化して返す＝つまり、それで囲った関数は更新がない限り同一のもの（不変のもの？という表現が正しい？）として扱われる。

なので、親コンポーネントでアロー関数を作って、子コンポーネントに関数をpropsで渡す時は、まず関数定義するタイミングで、callbackでくくってあげてみると良いかも。

export const Header: VFC = memo(() => {
  const onClickFunction = useCallback(() => navigate("/home"), []);

以下略！！！！