re-render-callback-problem-sovle react

re-render-callback-problem-solve.jsx

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

function Number({ number, onClick }) {
  console.log("number render");
  return (
    <div>
      <p>Number:{number}</p>
      <button onClick={onClick}>Numbering</button>
    </div>
  );
}

function Count({ count, onClick }) {
  console.log("count render");
  return (
    <div>
      <p>Count:{count}</p>
      <button onClick={onClick}>Conting</button>
    </div>
  );
}

function Options({ options }) {
  console.log("options render");
  return <div>Options:{options}</div>;
}

function Home() {
  const [count, setCount] = useState(0);
  const [number, setNumber] = useState(0);

  const options = useMemo(() => [1, 2, 3], []);

  const handleCount = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  const handleNumber = useCallback(() => {
    setNumber((prev) => prev + 1);
  }, []);

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

export default Home;