Benchmark: useMemo effect - MeasureThat.net

HTML Preparation code:

<script crossorigin src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
<div id="root"></div>

Script Preparation code:

const Factoid = ({ variant = "default", width = "auto", height = "auto" }) => {
	const widthStr = typeof width === "number" ? `${width}px` : width;
	const heightStr = typeof height === "number" ? `${height}px` : height;
	const variantAttr = variant === "default" ? "regular" : "bold";

	return (
		<div>
			<div>{widthStr}</div>
			<div>{heightStr}</div>
			<div>{variantAttr}</div>
		</div>
	);
};

const FactoidMemo = ({
	variant = "default",
	width = "auto",
	height = "auto",
}) => {
	const widthStr = React.useMemo(
		() => (typeof width === "number" ? `${width}px` : width),
		[width],
	);
	const heightStr = React.useMemo(
		() => (typeof height === "number" ? `${height}px` : height),
		[height],
	);
	const variantAttr = React.useMemo(
		() => (variant === "default" ? "regular" : "bold"),
		[variant],
	);

	return (
		<div>
			<div>{widthStr}</div>
			<div>{heightStr}</div>
			<div>{variantAttr}</div>
		</div>
	);
};

const Wrapper = ({ children }) => {
	const [count, setCount] = React.useState(0);

	React.useEffect(() => {
		if (count < 10000) {
			setCount((c) => c + 1);
		}
	}, [count]);

	return <div>{children}</div>;
};

const App = () => {
	return <Wrapper>
		<Factoid />
	</Wrapper>
}

const MemoizedApp = () => {
	return <Wrapper>
		<FactoidMemo />
	</Wrapper>
}

Tests:

Memoized App
ReactDOM.render(<MemoizedApp />, document.getElementById('root'))
Default App
ReactDOM.render(<App />, document.getElementById('root'))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Memoized App
Default App

useMemo effect (version: 0)

Comparing performance of: Memoized App vs Default App

Created: one year ago by: Guest

Jump to the latest result

Memoized App

Default App

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results