Track component function instead of component name for rendered compo…

…nents

src/react/hooks/__tests__/useLoadableQuery.test.tsx

@@ -263,15 +263,15 @@ it("loads a query and suspends when the load query function is called", async ()
   {
     const { renderedComponents } = await Profiler.takeRender();
 
-    expect(renderedComponents).toStrictEqual(["App"]);
+    expect(renderedComponents).toStrictEqual([App]);
   }
 
   await act(() => user.click(screen.getByText("Load query")));
 
   {
     const { renderedComponents } = await Profiler.takeRender();
 
-    expect(renderedComponents).toStrictEqual(["App", "SuspenseFallback"]);
+    expect(renderedComponents).toStrictEqual([App, SuspenseFallback]);
   }
 
   {
@@ -283,7 +283,7 @@ it("loads a query and suspends when the load query function is called", async ()
       networkStatus: NetworkStatus.ready,
     });
 
-    expect(renderedComponents).toStrictEqual(["ReadQueryHook"]);
+    expect(renderedComponents).toStrictEqual([ReadQueryHook]);
   }
 });
 
@@ -322,20 +322,20 @@ it("loads a query with variables and suspends by passing variables to the loadQu
 
   {
     const { renderedComponents } = await Profiler.takeRender();
-    expect(renderedComponents).toStrictEqual(["App"]);
+    expect(renderedComponents).toStrictEqual([App]);
   }
 
   await act(() => user.click(screen.getByText("Load query")));
 
   {
     const { renderedComponents } = await Profiler.takeRender();
-    expect(renderedComponents).toStrictEqual(["App", "SuspenseFallback"]);
+    expect(renderedComponents).toStrictEqual([App, SuspenseFallback]);
   }
 
   {
     const { snapshot, renderedComponents } = await Profiler.takeRender();
 
-    expect(renderedComponents).toStrictEqual(["ReadQueryHook"]);
+    expect(renderedComponents).toStrictEqual([ReadQueryHook]);
     expect(snapshot.result).toEqual({
       data: { character: { id: "1", name: "Spider-Man" } },
       networkStatus: NetworkStatus.ready,

src/testing/internal/profile/Render.tsx

@@ -63,7 +63,7 @@ export interface Render<Snapshot> extends BaseRender {
    */
   withinDOM: () => SyncScreen;
 
-  renderedComponents: string[];
+  renderedComponents: React.ComponentType[];
 }
 
 /** @internal */
@@ -80,7 +80,7 @@ export class RenderInstance<Snapshot> implements Render<Snapshot> {
     baseRender: BaseRender,
     public snapshot: Snapshot,
     private stringifiedDOM: string | undefined,
-    public renderedComponents: string[]
+    public renderedComponents: React.ComponentType[]
   ) {
     this.id = baseRender.id;
     this.phase = baseRender.phase;

src/testing/internal/profile/profile.tsx

@@ -87,7 +87,7 @@ interface ProfiledComponentFields<Snapshot> {
 }
 
 interface ProfilerContextValue {
-  renderedComponents: string[];
+  renderedComponents: React.ComponentType[];
 }
 const ProfilerContext = React.createContext<ProfilerContextValue | undefined>(
   undefined
@@ -388,22 +388,17 @@ export function profileHook<ReturnValue extends ValidSnapshot, Props>(
   );
 }
 
-function getCurrentComponentName() {
+export function useTrackComponentRender() {
   const owner: React.ComponentType | undefined = (React as any)
     .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?.ReactCurrentOwner
     ?.current?.elementType;
-  if (owner) return owner?.displayName || owner?.name;
 
-  try {
-    throw new Error();
-  } catch (e) {
-    return (e as Error).stack?.split("\n")[1].split(":")[0] || "";
+  if (!owner) {
+    throw new Error("useTrackComponentRender: Unable to determine hook owner");
   }
-}
 
-export function useTrackComponentRender(name = getCurrentComponentName()) {
   const ctx = React.useContext(ProfilerContext);
   React.useLayoutEffect(() => {
-    ctx?.renderedComponents.unshift(name);
+    ctx?.renderedComponents.unshift(owner);
   });
 }