lomeat/tak.tsx

## tak.tsx
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: { value: number; onInc(): void }) {
  return <button onClick={props.onInc}>{props.value}</button>;
}

function Sidebar(props: {}) {
  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(props: {}) {
  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: { value: number; onInc(): void }) {
	return <button onClick={props.onInc}>{props.value}</button>;
	}

	function Sidebar(props: {}) {
	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(props: {}) {
	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>
	);