💡

React.memoの第二引数でキャッシュ条件つけれるんだよ

2024/03/15に公開

JavaScript

React

tech

GIST

import * as React from 'react';

export default function Demo() {
  const [title, setTitle] = React.useState('hoge');
  return (
    <>
      <button
        onClick={() => (title === 'hoge' ? setTitle('fuge') : setTitle('hoge'))}
      >
        memo
      </button>
      <MemoizedHeavyComponent title={title} />
    </>
  );
}

const MemoizedHeavyComponent = React.memo(
  function HeavyComponent({ title }: { title: string }) {
    return (
      <div>
        <h1> {title} </h1>
      </div>
    );
  },
  (oldProps, newProps) => {
    // いっっしょだったら、キャッシュするよ
    if (oldProps.title === newProps.title) {
      // キャッシュするよってこと
      return true;
    }
    return false;
  }
);

キャッシュ条件を逆にして、ボタン押してみると、タイトルは変わらないよ

 (oldProps, newProps) => {
    // !== 逆にする
    if (oldProps.title !== newProps.title) {
      return true;
    }
    return false

// title = "hoge"

React.memoの第二引数でキャッシュ条件つけれるんだよ

GIST

playground

Discussion