Add wp-log directive to test this

src/blocks/interactive-parent/view.js

@@ -29,7 +29,12 @@ const View = ({
 						fontWeight: bold ? 900 : fontWeight,
 					}}
 				>
-					<h2 className="title">{title}</h2>
+					<h2
+						data-wp-block-log="the header of interactive-parent was rendered"
+						className="title"
+					>
+						{title}
+					</h2>
 					<button onClick={() => setShow(!show)}>Show</button>
 					<button onClick={() => setBold(!bold)}>Bold</button>
 					<button onClick={() => setCounter(counter + 1)}>

src/blocks/non-interactive-parent/view.js

@@ -1,6 +1,11 @@
 const View = ({ attributes, blockProps, children }) => (
 	<div {...blockProps}>
-		<h4 className="title">{attributes.title}</h4>
+		<h4
+			data-wp-block-log="the header of non-interactive-parent was rendered"
+			className="title"
+		>
+			{attributes.title}
+		</h4>
 		{children}
 	</div>
 );

src/directives/wp-log.js

@@ -0,0 +1,8 @@
+import { useEffect } from 'preact/hooks';
+import { directive } from '../gutenberg-packages/directives';
+
+directive('log', ({ wpBlock: { log } }) => {
+	useEffect(() => {
+		console.log(log);
+	}, [log]);
+});

src/gutenberg-packages/hydration.js

@@ -3,6 +3,7 @@ import { hydrate } from 'preact/compat';
 import toVdom from './to-vdom';
 import '../directives/wp-block';
 import '../directives/wp-block-context';
+import '../directives/wp-log';
 
 const dom = document.querySelector('.wp-site-blocks');
 const vdom = toVdom(dom).props.children;