Cannot update a component (ReactQueryDevtools) while rendering a different component

[CptFabulouso]

In React-Native I have this ReactQueryDevtools component:

import { useQueryClient } from '@tanstack/react-query';
import { ReactNode, memo, useEffect, useMemo } from 'react';
import { useAllQueries } from 'react-query-external-sync';

export type ReactQueryDevtoolsProps = {
  onDevtoolsConnected?: () => void;
  queryClient: ReturnType<typeof useQueryClient>;
  socketURL: string;
  children?: (data: { devtoolsConnected: boolean }) => ReactNode;
};

const ReactQueryDevtools = ({
  children,
  queryClient,
  onDevtoolsConnected,
  socketURL,
}: ReactQueryDevtoolsProps) => {
  const queryData = useMemo(
    () => ({
      queryClient,
      query: {
        username: 'App',
        userType: 'User',
        clientType: 'client' as const,
      },
      socketURL: socketURL,
    }),
    [queryClient, socketURL],
  );

  const { connect, disconnect, isConnected } = useAllQueries(queryData);

  useEffect(() => {
    connect();
    return () => {
      disconnect();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (!isConnected) {
      return;
    }
    onDevtoolsConnected?.();
    // eslint-disable-next-line no-console
    __DEV__ && console.log('React Query remote devtools connected');
  }, [isConnected, onDevtoolsConnected]);

  return useMemo(
    () => (children ? children({ devtoolsConnected: isConnected }) : null),
    [isConnected, children],
  );
};

const ReactQueryDevtoolsProduction = ({
  children,
}: ReactQueryDevtoolsProps) => {
  return useMemo(
    () => (children ? children({ devtoolsConnected: true }) : null),
    [children],
  );
};

export default memo(
  __DEV__ ? ReactQueryDevtools : ReactQueryDevtoolsProduction,
);

When there is a component with useQuery hook I receive and error:

Warning: Cannot update a component (ReactQueryDevtools) while rendering a different component (OtherComponent). To locate the bad setState() call inside OtherComponent, follow the stack trace as described in https://react.dev/link/setstate-in-render

Something I am doing wrong? Does this lib support React-Native?

[LovesWorking]

I'll try to re-produce this and see what's going on. Can you share the repo to where this is happening or is it private?

[CptFabulouso]

I've created simple repo for reproduction here

btw, while I have you on the line, I have troubles seeing values in Data explorer. I've tried Arc, Chrome and Safari. Is it because of dark mode?

[LovesWorking]

I've created simple repo for reproduction here

btw, while I have you on the line, I have troubles seeing values in Data explorer. I've tried Arc, Chrome and Safari. Is it because of dark mode?

Yea, I haven't added support for dark mode. I'm surprised it changes the colors though. I'll have a look at that thank you.

[navalex]

Same error here, didn't managed to locate the exact problem for the moment

[navalex]

I've created simple repo for reproduction here
btw, while I have you on the line, I have troubles seeing values in Data explorer. I've tried Arc, Chrome and Safari. Is it because of dark mode?

Yea, I haven't added support for dark mode. I'm surprised it changes the colors though. I'll have a look at that thank you.

And for this issue, I think you should define a color, to prevent the darkMode to put its own color

[LovesWorking]

Same error here, didn't managed to locate the exact problem for the moment

Yea, when I was building this I ran into it a few times but couldn't figure out what exactly the problem was.

[LovesWorking]

I've created simple repo for reproduction here
btw, while I have you on the line, I have troubles seeing values in Data explorer. I've tried Arc, Chrome and Safari. Is it because of dark mode?

Yea, I haven't added support for dark mode. I'm surprised it changes the colors though. I'll have a look at that thank you.

And for this issue, I think you should define a color, to prevent the darkMode to put its own color

If you want to make a PR for this that would be awesome. I've been so busy lately I haven't had time to do anything.

[gm90]

Anybody found a fix for this? As far as I can tell it appears as though the connect method is refreshing and causing the whole thing to re-render

[Exquise]

I am also experiencing this problem, if I can do anything to help please let me know. I am using the Docker image by the way.

[navalex]

I just took a small looks on the code, from what I see, there's several states that get updated, here is a summary of states:

• isConnected (useMySocket.ts): socket events connect & disconnect
• users (useMySocket.ts): socket event users-update
• queries (useAllQueries.ts): triggered once on useAllQueries call, then subscribed to the queryCache().subscribe()

I don't feel that there's any strange state behaviour, since there are all unsubscribed when needed, and are subscribes to basic events. I don't really have time to go deeper, I don't know if @LovesWorking is free to debug this