javascript - メモ化された React コンポーネントがまだ再レンダリングされるのはなぜですか?

Question

React.memo を理解しようとしていますが、少し戸惑っています。ユースケースは、コンポーネントをメモ化することで再レンダリングを防いでいると思いましたか? 毎回再レンダリングされているメモ化された Child があります。

- アプリ

----ホーム [ボタンクリックで状態を更新]

------子 [再レンダリングを防ぐためにメモ化されていますが、毎回再レンダリングされます]

私の考えでは、フローは次のように機能するはずです。

• ユーザーがボタンをクリックする
• Home はローカルの状態を更新し、数値を +1 増やします
• これにより、コンポーネントとその子の再レンダリングがトリガーされます
• メモ化されたコンポーネントが返されると、そのコンポーネントの引数が変更されていないため、古いコンソール ログが表示されるか、何も表示されません。

実際に起こっていること：

• ユーザーがボタンをクリックする
• Home はローカルの状態を更新し、数値を +1 増やします
• これにより、コンポーネントとその子の再レンダリングがトリガーされます
• メモ化されたコンポーネントが返され、再度ログアウトします。

const MemoizedChild = React.memo(ShoppingBasket);

function Home() {

    const [ myNum, updateMyNum ] = useState(0);

  return (
    <div className="home__container">
        I am the home page
        <p>myNum {myNum}</p>
        <button onClick={() => updateMyNum(myNum + 1)}>Add Number</button>
        <MemoizedChild items={[1, 2, 3, 4]} total={900} />
    </div>
  );
}

ログは毎回新しく/新鮮に表示され、子は毎回再レンダリングされます...

function ShoppingBasket({ total, items }) {
    console.log("Re Rendered Shopping Basket" + Date.now());
    return (
        <div className="basket__container">
            <h4 className="basket__heading">Shopping Basket</h4>
            <p className="basket__info">Total: ${total}</p>
            <p className="basket__info">No. of Items: {items.length}</p>
        </div>
    )
}

私は何かを誤解していますか？