fix(web): stable callbacks refresh before layout effects read them

apps/web/src/hooks/useStableCallback.browser.test.tsx

@@ -0,0 +1,28 @@
+import { useLayoutEffect } from "react";
+import { describe, expect, it } from "vite-plus/test";
+
+import { render } from "../../test/render";
+import { useStableCallback } from "./useStableCallback";
+
+function Child({ value, onLayout }: { value: string; onLayout: (childValue: string) => void }) {
+  useLayoutEffect(() => {
+    onLayout(value);
+  }, [value, onLayout]);
+  return null;
+}
+
+function Parent({ value, seen }: { value: string; seen: string[] }) {
+  const read = useStableCallback((childValue: string) => seen.push(`${childValue}->${value}`));
+  return <Child value={value} onLayout={read} />;
+}
+
+describe("useStableCallback", () => {
+  // Child layout effects run before the parent's, so a position restore in a
+  // child must still reach the handler of the render it commits with.
+  it("calls the committing render's function from a child layout effect", async () => {
+    const seen: string[] = [];
+    await using screen = await render(<Parent value="first" seen={seen} />, { router: false });
+    await screen.rerender(<Parent value="second" seen={seen} />);
+    expect(seen).toEqual(["first->first", "second->second"]);
+  });
+});

apps/web/src/hooks/useStableCallback.ts

@@ -1,11 +1,13 @@
-import { useLayoutEffect, useRef, useState } from "react";
+import { useInsertionEffect, useRef, useState } from "react";
 
 /** Call only from handlers and effects; render sees the previous commit's fn. */
 export function useStableCallback<Args extends ReadonlyArray<unknown>, Result>(
   fn: (...args: Args) => Result,
 ): (...args: Args) => Result {
   const latest = useRef(fn);
-  useLayoutEffect(() => {
+  // Insertion effects run before every layout effect in the commit, so a
+  // child's layout effect already calls this render's fn.
+  useInsertionEffect(() => {
     latest.current = fn;
   });
   const [stable] = useState(