diff --git a/hooks/test/browser/useId.test.js b/hooks/test/browser/useId.test.js
index 53f3b893af..d19567b81e 100644
--- a/hooks/test/browser/useId.test.js
+++ b/hooks/test/browser/useId.test.js
@@ -1,6 +1,7 @@
-import { createElement, render } from 'preact';
-import { useId, useState } from 'preact/hooks';
+import { createElement, Fragment, hydrate, render } from 'preact';
+import { useId, useReducer, useState } from 'preact/hooks';
 import { setupRerender } from 'preact/test-utils';
+import { render as rts } from 'preact-render-to-string';
 import { setupScratch, teardown } from '../../../test/_util/helpers';
 
 /** @jsx createElement */
@@ -129,4 +130,148 @@ describe('useId', () => {
 			'<div id="P481"><div><span id="P476641">h</span><span id="P486251">h</span></div></div>'
 		);
 	});
+
+	it('matches with rts', () => {
+		const ChildFragmentReturn = ({ children }) => {
+			return <Fragment>{children}</Fragment>;
+		};
+
+		const ChildReturn = ({ children }) => {
+			return children;
+		};
+
+		const SomeMessage = ({ msg }) => {
+			const id = useId();
+			return (
+				<p>
+					{msg} {id}
+				</p>
+			);
+		};
+
+		const Stateful = () => {
+			const [count, add] = useReducer(c => c + 1, 0);
+			const id = useId();
+			return (
+				<div>
+					id: {id}, count: {count}
+					<button onClick={add}>+1</button>
+				</div>
+			);
+		};
+
+		const Component = ({ showStateful = false }) => {
+			const rootId = useId();
+			const paragraphId = useId();
+
+			return (
+				<main>
+					ID: {rootId}
+					<p>Hello world id: {paragraphId}</p>
+					{showStateful ? (
+						<Stateful />
+					) : (
+						<ChildReturn>
+							<SomeMessage msg="child-return" />
+							<ChildReturn>
+								<SomeMessage msg="child-return" />
+								<ChildReturn>
+									<SomeMessage msg="child-return" />
+								</ChildReturn>
+							</ChildReturn>
+						</ChildReturn>
+					)}
+					<ChildFragmentReturn>
+						<SomeMessage msg="child-fragment-return" />
+						<SomeMessage msg="child-fragment-return-2" />
+						<SomeMessage msg="child-fragment-return-3" />
+						<SomeMessage msg="child-fragment-return-4" />
+						<ChildReturn>
+							<SomeMessage msg="child-return" />
+							<ChildFragmentReturn>
+								<SomeMessage msg="child-fragment-return" />
+							</ChildFragmentReturn>
+						</ChildReturn>
+					</ChildFragmentReturn>
+				</main>
+			);
+		};
+
+		const rtsOutput = rts(<Component />);
+		render(<Component />, scratch);
+		expect(rtsOutput === scratch.innerHTML).to.equal(true);
+	});
+
+	it('matches with rts after hydration', () => {
+		const ChildFragmentReturn = ({ children }) => {
+			return <Fragment>{children}</Fragment>;
+		};
+
+		const ChildReturn = ({ children }) => {
+			return children;
+		};
+
+		const SomeMessage = ({ msg }) => {
+			const id = useId();
+			return (
+				<p>
+					{msg} {id}
+				</p>
+			);
+		};
+
+		const Stateful = () => {
+			const [count, add] = useReducer(c => c + 1, 0);
+			const id = useId();
+			return (
+				<div>
+					id: {id}, count: {count}
+					<button onClick={add}>+1</button>
+				</div>
+			);
+		};
+
+		const Component = ({ showStateful = false }) => {
+			const rootId = useId();
+			const paragraphId = useId();
+
+			return (
+				<main>
+					ID: {rootId}
+					<p>Hello world id: {paragraphId}</p>
+					{showStateful ? (
+						<Stateful />
+					) : (
+						<ChildReturn>
+							<SomeMessage msg="child-return" />
+							<ChildReturn>
+								<SomeMessage msg="child-return" />
+								<ChildReturn>
+									<SomeMessage msg="child-return" />
+								</ChildReturn>
+							</ChildReturn>
+						</ChildReturn>
+					)}
+					<ChildFragmentReturn>
+						<SomeMessage msg="child-fragment-return" />
+						<SomeMessage msg="child-fragment-return-2" />
+						<SomeMessage msg="child-fragment-return-3" />
+						<SomeMessage msg="child-fragment-return-4" />
+						<ChildReturn>
+							<SomeMessage msg="child-return" />
+							<ChildFragmentReturn>
+								<SomeMessage msg="child-fragment-return" />
+							</ChildFragmentReturn>
+						</ChildReturn>
+					</ChildFragmentReturn>
+				</main>
+			);
+		};
+
+		const rtsOutput = rts(<Component />);
+
+		scratch.innerHTML = rtsOutput;
+		hydrate(<Component />, scratch);
+		expect(rtsOutput === scratch.innerHTML).to.equal(true);
+	});
 });
diff --git a/package-lock.json b/package-lock.json
index f7256e8114..2412cfdd74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,6 +53,7 @@
 				"mocha": "^8.2.1",
 				"npm-merge-driver-install": "^1.1.1",
 				"npm-run-all": "^4.0.0",
+				"preact-render-to-string": "^5.2.4",
 				"prettier": "^1.18.2",
 				"prop-types": "^15.7.2",
 				"sade": "^1.7.4",
@@ -12507,6 +12508,29 @@
 				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
 			}
 		},
+		"node_modules/preact": {
+			"version": "10.10.6",
+			"resolved": "https://registry.npmjs.org/preact/-/preact-10.10.6.tgz",
+			"integrity": "sha512-w0mCL5vICUAZrh1DuHEdOWBjxdO62lvcO++jbzr8UhhYcTbFkpegLH9XX+7MadjTl/y0feoqwQ/zAnzkc/EGog==",
+			"dev": true,
+			"peer": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/preact"
+			}
+		},
+		"node_modules/preact-render-to-string": {
+			"version": "5.2.4",
+			"resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.2.4.tgz",
+			"integrity": "sha512-iIPHb3BXUQ3Za6KNhkjN/waq11Oh+QWWtAgN3id3LrL+cszH3DYh8TxJPNQ6Aogsbu4JsqdJLBZltwPFpG6N6w==",
+			"dev": true,
+			"dependencies": {
+				"pretty-format": "^3.8.0"
+			},
+			"peerDependencies": {
+				"preact": ">=10"
+			}
+		},
 		"node_modules/prelude-ls": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -12549,6 +12573,12 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/pretty-format": {
+			"version": "3.8.0",
+			"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
+			"integrity": "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==",
+			"dev": true
+		},
 		"node_modules/printj": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
@@ -24811,6 +24841,22 @@
 			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
 			"dev": true
 		},
+		"preact": {
+			"version": "10.10.6",
+			"resolved": "https://registry.npmjs.org/preact/-/preact-10.10.6.tgz",
+			"integrity": "sha512-w0mCL5vICUAZrh1DuHEdOWBjxdO62lvcO++jbzr8UhhYcTbFkpegLH9XX+7MadjTl/y0feoqwQ/zAnzkc/EGog==",
+			"dev": true,
+			"peer": true
+		},
+		"preact-render-to-string": {
+			"version": "5.2.4",
+			"resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.2.4.tgz",
+			"integrity": "sha512-iIPHb3BXUQ3Za6KNhkjN/waq11Oh+QWWtAgN3id3LrL+cszH3DYh8TxJPNQ6Aogsbu4JsqdJLBZltwPFpG6N6w==",
+			"dev": true,
+			"requires": {
+				"pretty-format": "^3.8.0"
+			}
+		},
 		"prelude-ls": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -24835,6 +24881,12 @@
 			"integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
 			"dev": true
 		},
+		"pretty-format": {
+			"version": "3.8.0",
+			"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
+			"integrity": "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==",
+			"dev": true
+		},
 		"printj": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
diff --git a/package.json b/package.json
index 4e4b940db4..58f9ea2178 100644
--- a/package.json
+++ b/package.json
@@ -293,6 +293,7 @@
 		"mocha": "^8.2.1",
 		"npm-merge-driver-install": "^1.1.1",
 		"npm-run-all": "^4.0.0",
+		"preact-render-to-string": "^5.2.4",
 		"prettier": "^1.18.2",
 		"prop-types": "^15.7.2",
 		"sade": "^1.7.4",