React Rendered By

0-App.jsx

function App() {
  console.log("App - start render");
  React.useEffect(() => console.log("App - rendered"));
  return (
    <Parent>
      <Child />
      <Child />
      <Child />
    </Parent>
  );
}

React.createElement(
    Parent,
    null,
    React.createElement(Child, null),
    React.createElement(Child, null),
    React.createElement(Child, null)
  );

1-Parent.jsx

function Parent({ children }) {
  console.log("Parent - start render");
  React.useEffect(() => console.log("Parent - rendered"));
  const [count, setCount] = React.useState(0);
  return (
    <div className="parent">
      <button onClick={() => setCount(count + 1)}>increase {count}</button>
      {children}
    </div>
  );
}

2-Child.jsx

function Child() {
  console.log("Child - start render");
  React.useEffect(() => console.log("Child - rendered"));
  return <div className="child">child</div>;
}