Fix hooks render reason detection

Author: marvinhagemeister

src/adapter/10/options.ts

@@ -85,13 +85,6 @@ export function setupOptionsV10(
 		prevHookName = options._addHookName || options.__a;
 
 		o._hook = o.__h = (c: Component, index: number, type: number) => {
-			const vnode = (c as any)._vnode || (c as any).__v;
-			const s = getStatefulHooks(vnode);
-			if (s && Array.isArray(s) && s.length > 0 && getComponent(s[0])) {
-				s[0]._oldValue = getStatefulHookValue(s);
-				s[0]._index = index;
-			}
-
 			if (type) {
 				addHookStack(type);
 			}
@@ -132,6 +125,19 @@ export function setupOptionsV10(
 		if (typeof vnode.type === "function") {
 			const name = getDisplayName(vnode, config);
 			recordMark(`${name}_diff`);
+
+			const c = getComponent(vnode);
+			const s = getStatefulHooks(vnode);
+			if (s !== null && c !== null) {
+				if (!(c as any)._oldHookValues) {
+					(c as any)._oldHookValues = new Array(s.length).fill(undefined);
+				}
+
+				for (let i = 0; i < s.length; i++) {
+					const value = getStatefulHookValue(s[i]);
+					(c as any)._oldHookValues[i] = value;
+				}
+			}
 		}
 
 		if (vnode.type !== null) {

src/adapter/10/renderReason.ts

@@ -30,12 +30,12 @@ export function getRenderReasonPost<T extends SharedVNode>(
 			// Check hooks
 			const hooks = bindings.getStatefulHooks(next);
 
-			if (hooks !== null) {
+			if (hooks !== null && Array.isArray(c._oldHookValues)) {
 				const hooksChanged: string[] = [];
 				for (let i = 0; i < hooks.length; i++) {
 					if (
 						bindings.isUseReducerOrState(hooks[i]) &&
-						hooks[i]._oldValue !== bindings.getStatefulHookValue(hooks[i])
+						c._oldHookValues[i] !== bindings.getStatefulHookValue(hooks[i])
 					) {
 						hooksChanged.push(String(i));
 					}

src/adapter/protocol/events.ts

@@ -150,7 +150,8 @@ export function applyOperationsV2(store: Store, data: number[]) {
 			rendered,
 			commitRootId,
 		);
-		const map = store.profiler.renderReasons.value.set(commitRootId, reasons);
+		const commitIdx = store.profiler.commits.peek().length - 1;
+		const map = store.profiler.renderReasons.value.set(commitIdx, reasons);
 		store.profiler.renderReasons.value = new Map(map);
 	}
 

src/view/components/profiler/components/RenderReasons.tsx

@@ -54,18 +54,17 @@ export function RenderReasons() {
 						</dt>
 						<dd class="render-reason-value">
 							{hasReasons &&
-								(reason.type === RenderReason.HOOKS_CHANGED
-									? // <>
-									  // 	{reason!.items!.map(item => (
-									  // 		<span class="hook-number va-middle" key={item}>
-									  // 			{+item + 1}
-									  // 		</span>
-									  // 	))}
-									  // </>
-									  //
-									  // TODO: Improve hooks detection
-									  null
-									: reason!.items!.join(", "))}
+								(reason.type === RenderReason.HOOKS_CHANGED ? (
+									<>
+										{reason!.items!.map(item => (
+											<span class="hook-number va-middle" key={item}>
+												{+item + 1}
+											</span>
+										))}
+									</>
+								) : (
+									reason!.items!.join(", ")
+								))}
 						</dd>
 					</dl>
 				) : (

src/view/components/profiler/data/commits.ts

@@ -136,12 +136,9 @@ export function createProfiler(): ProfilerState {
 
 	// Render reasons
 	const activeReason = computed(() => {
-		if (activeCommit.value !== null) {
-			const commitId = activeCommit.value.commitRootId;
-			const reason = renderReasons.value.get(commitId);
-			if (reason) {
-				return reason.get(selectedNodeId.value) || null;
-			}
+		const reason = renderReasons.value.get(activeCommitIdx.value);
+		if (reason) {
+			return reason.get(selectedNodeId.value) || null;
 		}
 
 		return null;

test-e2e/tests/profiler/render-reasons.test.ts

@@ -56,7 +56,7 @@ test("Captures render reasons", async ({ page }) => {
 	reasons = await devtools
 		.locator('[data-testid="render-reasons"]')
 		.textContent();
-	expect(reasons).toEqual("Hooks changed:");
+	expect(reasons).toEqual("Hooks changed:1");
 
 	// Force update
 	await devtools.click('[data-testid="next-commit"]');
@@ -68,3 +68,46 @@ test("Captures render reasons", async ({ page }) => {
 		.textContent();
 	expect(reasons).toEqual("Force update");
 });
+
+test("Captures hook render reasons", async ({ page }) => {
+	const { devtools } = await gotoTest(page, "hooks-multiple");
+
+	await devtools.locator(locateTab("SETTINGS")).click();
+	await devtools.click('[data-testid="toggle-render-reason"]');
+
+	// Start profiling
+	await devtools.locator(locateTab("PROFILER")).click();
+	await clickRecordButton(devtools);
+	await page.click('button:has-text("S1++")');
+	await page.click('button:has-text("S2++")');
+	await page.click('button:has-text("S3++")');
+	await page.click('button:has-text("S1++")');
+
+	await wait(1000);
+	await clickRecordButton(devtools);
+
+	await devtools.locator(locateFlame("App")).click();
+
+	let reasons = await devtools
+		.locator('[data-testid="render-reasons"]')
+		.textContent();
+	expect(reasons).toEqual("Hooks changed:1");
+
+	await devtools.click('[data-testid="next-commit"]');
+	reasons = await devtools
+		.locator('[data-testid="render-reasons"]')
+		.textContent();
+	expect(reasons).toEqual("Hooks changed:2");
+
+	await devtools.click('[data-testid="next-commit"]');
+	reasons = await devtools
+		.locator('[data-testid="render-reasons"]')
+		.textContent();
+	expect(reasons).toEqual("Hooks changed:3");
+
+	await devtools.click('[data-testid="next-commit"]');
+	reasons = await devtools
+		.locator('[data-testid="render-reasons"]')
+		.textContent();
+	expect(reasons).toEqual("Hooks changed:1");
+});