React.memo

 import { useState, memo } from "react";
 
 function areEqual(prevProps, nextProps) {
   return prevProps.x === nextProps.x;
 }
 
 const Foo = memo(({ x, y }) => {
   console.log("Foo", x, y);
   return <div>Foo</div>;
 });
 
 const Boo = memo(({ x, y }) => {
   console.log("Boo", x, y);
   return <div>Boo</div>;
 }, areEqual);
 
 function App() {
   console.log("App");
   const [count, setCount] = useState(0);
 
   return (
     <div className="App">
         <p>
           <button type="button" onClick={() => setCount((count) => count + 1)}>
             count is: {count}
           </button>
         </p>
         <Foo />
         <Foo x={count} />
         <Foo x={new Date()} />
         <Foo x={999} y={new Date()} />
         <Boo x={count} />
         <Boo x={new Date()} />
         <Boo x={999} y={new Date()} />
     </div>
   );
 }
 
 export default App;

対象のコンポーネント

• Fooコンポーネントのmemo化（第2引数なし）
• Booコンポーネントのmemo化（第2引数あり）

renderされるタイミング

初回表示（Appコンポーネントのマウント時）

• すべてのFooとBooはrenderされる

ボタン押下してcountが更新、Appコンポーネントがre-renderされた時

• <Foo /> re-renderされない（xもyもundefinedのままだから）
• <Foo x={count} /> re-renderされる
• <Foo x={new Date()} /> re-renderされる
• <Foo x={999} y={new Date()} /> re-renderされる
• <Boo x={count} /> re-renderされる
• <Boo x={new Date()} /> re-renderされる
• <Boo x={999} y={new Date()} /> re-renderされない（yは新しい日時になったが、第2引数でxだけ評価するように指定してるので）

console:

 App
 Foo undefined undefined
 Foo 0 undefined
 Foo Fri Sep 02 2022 07:02:56 GMT+0900 (日本標準時) undefined
 Foo 999 Fri Sep 02 2022 07:02:56 GMT+0900 (日本標準時)
 Boo 0 undefined
 Boo Fri Sep 02 2022 07:02:56 GMT+0900 (日本標準時) undefined
 Boo 999 Fri Sep 02 2022 07:02:56 GMT+0900 (日本標準時)
 App
 Foo 1 undefined
 Foo Fri Sep 02 2022 07:02:58 GMT+0900 (日本標準時) undefined
 Foo 999 Fri Sep 02 2022 07:02:58 GMT+0900 (日本標準時)
 Boo 1 undefined
 Boo Fri Sep 02 2022 07:02:58 GMT+0900 (日本標準時) undefined