lomeat/task.jsx

## task.jsx
import React, { useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom/client";

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);

function RerenderCounter() {
  const rerenders = useRef(0);
  useEffect(() => {
    rerenders.current += 1;
  });

  return <div>Rerender: {rerenders.current}</div>;
}

function Counter(props) {
  return <button onClick={props.onInc}>{props.value}</button>;
}

function Sidebar() {
  const [value, setValue] = useState(0);

  return (
    <div style={{ border: "1px solid black", padding: 5 }}>
      <strong>Sidebar</strong>
      <RerenderCounter />
      <Counter value={value} onInc={() => setValue(value + 1)} />
    </div>
  );
}

function Body() {
  const [value, setValue] = useState(0);

  return (
    <div style={{ border: "1px solid black", padding: 5 }}>
      <strong>Body</strong>
      <RerenderCounter />
      <Counter value={value} onInc={() => setValue(value + 1)} />
    </div>
  );
}

function App() {
  return (
    <div style={{ display: "flex", gap: 10 }}>
      <Sidebar />
      <Body />
    </div>
  );
}

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
	import React, { useEffect, useRef, useState } from "react";
	import ReactDOM from "react-dom/client";

	const rootElement = document.getElementById("root");
	const root = ReactDOM.createRoot(rootElement);

	function RerenderCounter() {
	const rerenders = useRef(0);
	useEffect(() => {
	rerenders.current += 1;
	});

	return <div>Rerender: {rerenders.current}</div>;
	}

	function Counter(props) {
	return <button onClick={props.onInc}>{props.value}</button>;
	}

	function Sidebar() {
	const [value, setValue] = useState(0);

	return (
	<div style={{ border: "1px solid black", padding: 5 }}>
	<strong>Sidebar</strong>
	<RerenderCounter />
	<Counter value={value} onInc={() => setValue(value + 1)} />
	</div>
	);
	}

	function Body() {
	const [value, setValue] = useState(0);

	return (
	<div style={{ border: "1px solid black", padding: 5 }}>
	<strong>Body</strong>
	<RerenderCounter />
	<Counter value={value} onInc={() => setValue(value + 1)} />
	</div>
	);
	}

	function App() {
	return (
	<div style={{ display: "flex", gap: 10 }}>
	<Sidebar />
	<Body />
	</div>
	);
	}

	root.render(
	<React.StrictMode>
	<App />
	</React.StrictMode>
	);