rerender issue

react-advanced-tag1/src/components/Footer.tsx

@@ -1,4 +1,5 @@
 function Footer() {
+    console.log("Footer rendered");
     return (
         <footer>
             <p>&copy; 2025 Your Company</p>

react-advanced-tag1/src/components/Header/index.tsx

@@ -1,6 +1,7 @@
 import Navigation from "./Navigation";
 
 const Header = () => {
+    console.log("Header rendered");
     return (
         <header>
             <h2>My Application</h2>

react-advanced-tag1/src/components/globals/Heading.tsx

@@ -1,4 +1,5 @@
 export default function Heading({title = "Hallo Teilnehmer"}: {title?: string}): React.ReactElement {
+    console.log("Heading rendered");
     return (
         <h1 >
             {title}

react-advanced-tag1/src/layouts/MainLayout.tsx

@@ -1,11 +1,25 @@
+import { useState } from "react";
 import Footer from "../components/Footer";
 import Header from "../components/Header";
 
 export default function MainLayout({children}: {children: React.ReactNode | React.ReactElement | React.ReactElement[]}): React.ReactElement {
+  
+
+  const [clicked, setClicked] = useState(false);
+
+  function handleClick() {
+    setClicked(!clicked);
+
+    console.log("clicked", clicked);
+  }
+
+  console.log("MainLayout rendered", clicked);
   return (
     <>
         <Header />
             {children}
+
+            <button onClick={handleClick}>Click</button>
         <Footer />
     </>
   );