React re-render solve using react.memo,useMemo

re-render-solve.js

import React, { useState, useMemo } from "react";

const Number = React.memo(({ number }) => {
  console.log("number render");
  return (
    <div>
      <p>Number:{number}</p>
    </div>
  );
});

const Count = React.memo(({ count }) => {
  console.log("count render");
  return (
    <div>
      <p>Count:{count}</p>
    </div>
  );
});

const Options = React.memo(({ options }) => {
  console.log("options render");
  return <div>Options:{options}</div>;
});

const Home = () => {
  const [count, setCount] = useState(0);
  const [number, setNumber] = useState(0);
  const options = useMemo(() => [1, 2, 3], []);

  const handleCount = () => {
    setCount((prev) => prev + 1);
  };

  const handleNumber = () => {
    setNumber((prev) => prev + 1);
  };

  return (
    <div>
      <Count count={count} />
      <button onClick={handleCount}>Numbering</button>
      <p>-----</p>
      <Number number={number} />
      <button onClick={handleNumber}>Conting</button>
      <p>-----</p>
      <Options options={options} />
    </div>
  );
};

export default Home;