Insane amount of observers

[samchouse]

I'm creating a messaging app and I call query hooks inside the component that renders each message and once I have about 50 messages I have about 600 observers on my query. I think this is tanking performance but how do I have 600 observers even though I only have 50 messages?

[TkDodo]

yeah 600 observers sounds excessive. Every call to useQuery creates one observer, so unless you have 50 components where each component has 12 useQuery calls, I don't see how you can have that many observers. Did you get the number from the devtools? Can you maybe show a minimal codesandbox reproduction?

[samchouse]

I unfortunately can't create a useful CodeSandbox but I can provide a couple snippets of code and screenshots. I've reduced the issue for one query (the 600 one) but the rest aren't as obvious to me. I've also reduced the number of rendered messages to 50.

The queries:

// useQueries.ts

export const useUsers = () => {
  const isReady = useIsReady();

  return useQuery(queryKeys.users, async ({ signal }) => getUsers({ signal }), {
    enabled: isReady,
    select: (ctx) => (ctx.success ? ctx.users : []),
  });
};

export const useMe = () => {
  const isReady = useIsReady();

  const { data: users } = useUsers();

  return useQuery(queryKeys.me(), async ({ signal }) => getMe({ signal }), {
    enabled: isReady,
    select: (ctx) =>
      ctx.success ? users?.find((user) => user.id === ctx.userId) : undefined,
  });
};

export const useChannels = () => {
  const isReady = useIsReady();

  const { data: user } = useMe();
  const { data: users } = useUsers();

  return useQuery(
    queryKeys.channels,
    async ({ signal }) => getChannels({ signal }),
    {
      enabled: isReady && Boolean(user) && Boolean(users),
      select: (ctx) =>
        ctx.success
          ? ctx.channels?.map((channel) => {
              // some logic with users
            })
          : [],
    }
  );
};

• EditParticipants.tsx and NewChannel.tsx are both modals that are unopened
• ParticipantsAutocomplete.co... is part of the modals
• Message.controller.tsx is the message component
• useMessageExtras.ts is a hook that is used in Message.controller.tsx and a couple other places
  • For an unread count per channel: 1 channel is created so the component is only rendered once
  • For the message input: same as above
  • For the channel layout: same as above
• ChannelLayout.tsx is the component that renders the message components

Sorry I couldn't provide a sandbox, I hope this will be enough.

[TkDodo]

• useUsers creates one observer
• useMe creates two observers
• useChannels creates four observers, because it uses both other hooks

therefore, calling useChannels you'll get two observers for useUsers, one for useMe and one for the channels.

are both modals that are unopened

it could still be that those modals are rendered to the dom, thus creating query observers and just stay visually hidden?