App.jsx

import { useCallback, useState, useEffect } from "react";

const X = () => {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);
  return <button onClick={handleClick}>Button1 ({count})</button>;
};

const Y = ({ children }) => {
  useEffect(() => {
    console.log("children are updated");
  }, [children]);
  return <div>{children}</div>;
};

function App() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);
  return (
    <div>
      <button onClick={handleClick}>Button2 ({count})</button>
      <Y>
        <X />
      </Y>
    </div>
  );
}

export default App;