ピン留めされたアイテム

参考文献

目標

Reactのperforance関連の記法の使いどきを理解した状態になる。

具体的には下記↓

React.memoはレンダリングをする際にレンダリング前のコンポーネントを比較して差がない場合レンダリングをスキップさせる記法。

コンポーネント単位でレンダリングを制御することができる。

キャッシュみたいな感じ。


const alertChildNum = (): void => {
    alert(childNum);
  };
<ChildOne num={childNum} alertChildNum={() => alertChildNum()} />

こんな感じで親のコンポーネントで定義した関数を子にPropsとして渡している場合はレンダリングをスキップできない。

なぜかというと、親がレンダリングされた段階で親で定義された関数は新しくなりReact.memoが同じものとして認識しないため。

ディープイコールで参照をチェックしているだろう。

React.memo はコンポーネントを対象にしていたが、useCallback は関数に対して再生成するかどうかを対象にする。

React.memo でメモ化したコンポーネントにコールバック関数を渡す際に、対象関数をuseCallbackしてあげると効果を発揮する。

const alertChildNum = useCallback(() => {
    alert("click");
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

useMemoは、値の計算結果を検証して再計算するか判断してくれる。

const doubledNum: number = useMemo(() => double(doubleCount), [doubleCount]);

上記のコードの場合、doubleCountが変化したらdoubleを実行する。
他のstateのみが変化した際は再計算は実行されない。

コンポーネントの再計算も行うことができる。

しかし、関数コンポーネントそのものをメモ化したい場合はreact.memoを使う必要がある。
あくまでも関数コンポーネント内でのコンポーネントをメモ化したい時につかう。