TanStackT
TanStack•8mo ago•
2 replies
dead-brown

Understanding context selector performance impact

Hi! I'm debugging some performance issues and I'd like to understand why A performs worse than B?
// A. use selector
  const { queryOptions } = Route.useRouteContext({
    select: (context) => ({
      queryOptions: context.trpc.organizations.projects.getData.queryOptions({
        organizationId: context.organization.id,
        projectId: context.project.id,
      }),
    }),
  });
  const query = useQuery(queryOptions)

// B. no selector
  const context = Route.useRouteContext();
  const query = useQuery(
    context.trpc.organizations.projects.getData.queryOptions({
      organizationId: context.organization.id,
      projectId: context.project.id,
    })
  );

For the record:
- "A" causes a lot of rerenders
- I created my router with defaultStructuralSharing: true (because I thought that would cover this exact case)

Is that because the shape of the object changes all the time (maybe because of functions returned by queryOptions)? Thanks for your help

Please ping me!
Was this page helpful?