不要なレンダリングを防ぐ

反応する.メモは役に立ちません.
以下のスニペットでは、私は反応を使用しています.このコンポーネントは、コンポーネントがマウントされたときにのみレンダリングされます.
しかし、カートコンポーネント自体がいくつかの状態を持っているかususontextを使うならば、usereducerそれは確かにレンダリングされます.

//Cart.js
const Cart = ({ quantity }) => {
  console.log("Rendered Cart!");
  return <>Number of item is {quantity}</>;
};
export default React.memo(Cart);

以下のスニペットでは、カートのコンポーネントがレンダリングされていると我々は、プロップとして量を渡しているので、数量ボタンをクリックすると、カートのコンポーネントが再レンダリングされますが、検索テキストボックスに何かを入力するときに再描画されません.

//App.js
import Cart from "./Cart";

import { useState } from "react";
export default function App() {
  const [quantity, setQuantity] = useState(0);
  const [search, setSearch] = useState();
  return (
    <div className="App">
      <Cart quantity={quantity} />
      <hr />
      <label>Quantity </label>
      <button
        onClick={() => {
          setQuantity(quantity + 1);
        }}
      >
        {quantity}
      </button>
      <hr />
      <label>Search </label>
      <input
        onChange={(event) => {
          setSearch(event.target.value);
        }}
      ></input>
    </div>
  );
}