Prevent unnecessary renders (React.memo)

React.memo is helpful in, preventing unnecessary renders,
in the below snippet, I'm using React.memo this component will only be rendered when the component gets mounted and if the props quantity changes otherwise it'll keep displaying the previously rendered component.
But if the Cart component itself has some state or using useState, useContext, useReducer it will surely be rendered.

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

In the below snippet, the Cart component is being rendered and we are passing in quantity as props, so whenever one clicks on the quantity button, the Cart component will be re-rendered but won't get re-rendered when you type in something in the search text box.

//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>
  );
}