React re-render.

re-render.jsx

import React, { useState } from "react";

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

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

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

const Home = () => {
  const [count, setCount] = useState(0);
  const [number, setNumber] = useState(0);
  const options = [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;