I've been working on react for quite some time. Feeling bad to say this. but I couldn't stop asking this question here.

I wrote a simple react component and trying to understand why the console log is printing twice.

function Comp1(props) {
  return (
    <div className="App">
      <button onClick={props.handleClick}>Hello CodeSandbox</button>
    </div>
  );
}

function Comp2(props) {
  console.log(new Date());
  return <>Comp2</>;
}

export default function App() {
  const [value, setValue] = useState();
  const handleClick = () => {
    setValue("clicked");
  };
  return (
    <div className="App">
      <Comp1 handleClick={handleClick}>Hello CodeSandbox</Comp1>
      <Comp2 value={value}></Comp2>
    </div>
  );
}

here is the codesandbox link.

https://codesandbox.io/s/multiple-renders-1l47cf?file=/src/App.js:148-159