App.tsx

import { useLayoutEffect, useState } from "react";

let delta = 0;

function StaticElement() {
	return (
		<span>
			<span>
				<span>.</span>
			</span>
		</span>
	);
}

function StaticBlock(props: { count: number }) {
	const items = Array(props.count).fill(0);
	return (
		<div>
			{items.map((_, i) => {
				return <StaticElement key={i} />;
			})}
		</div>
	);
}

// const cached = <StaticBlock count={5000} />;
function StaticRenderer() {
	const [count, setCount] = useState(0);

	const onClickWithUpdate = () => {
		delta = performance.now();
		setCount((count) => count + 1);
	};

	useLayoutEffect(() => {
		if (delta === 0) {
			console.log("[init]", performance.now() - delta);
		}
		console.log("[re-render]", performance.now() - delta);
	});

	return (
		<>
			<button type="button" onClick={onClickWithUpdate}>
				render ({count})
			</button>
			<StaticBlock count={5000} />
			{/* {cached} */}
		</>
	);
}

export default function App() {
	return (
		<>
			<StaticRenderer />
		</>
	);
}

OptApp.tsx

import { useLayoutEffect, useState } from "react";
import { block, For } from "million/react";

let delta = 0;

function StaticElement(props: { idx: number }) {
	return (
		<span>
			<span>
				<span data-key={props.idx}>.</span>
			</span>
		</span>
	);
}

/**@optimized */
function StaticBlock(props: { count: number }) {
	const items = [...Array(props.count).keys()];
	return (
		<div>
			<For each={items}>
				{(_i) => {
					return <StaticElement idx={_i} />;
				}}
			</For>
		</div>
	);
}

const BlockedStaticBlock = block(StaticBlock);

function StaticRenderer() {
	const [count, setCount] = useState(0);

	const onClickWithUpdate = () => {
		delta = performance.now();
		setCount((count) => count + 1);
	};

	useLayoutEffect(() => {
		if (delta === 0) {
			console.log("[million:init]", performance.now() - delta);
		}
		console.log("[million:rerender]", performance.now() - delta);
	});

	return (
		<>
			<button type="button" onClick={onClickWithUpdate}>
				render million({count})
			</button>
			<BlockedStaticBlock count={5000} />
		</>
	);
}

export default function App() {
	return (
		<>
			<StaticRenderer />
		</>
	);
}

result.log

[init] 217.5
App.tsx:32 [re-render] 217.5
Optimized.tsx:44 [million:init] 217.69999992847443
Optimized.tsx:46 [million:rerender] 217.69999992847443
App.tsx:30 [init] 244.59999990463257
App.tsx:32 [re-render] 244.59999990463257
Optimized.tsx:44 [million:init] 244.69999992847443
Optimized.tsx:46 [million:rerender] 244.69999992847443

---

App.tsx:32 [re-render] 71.19999992847443
Optimized.tsx:46 [million:rerender] 1.5