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

[navalex]

Hey, little update to say that I'm not getting the error anymore since couple of time. It doesn't seems to come from an update here, so it was maybe related to react-query itself ?

[LovesWorking]

Hey, little update to say that I'm not getting the error anymore since couple of time. It doesn't seems to come from an update here, so it was maybe related to react-query itself ?

Are you using this for React Native? I'm working with the Tanstack Query team to see how we can use the official Tanstack Query dev tools UI instead. We'll have an Expo plugin which just works with no effort.

[navalex]

Hey, little update to say that I'm not getting the error anymore since couple of time. It doesn't seems to come from an update here, so it was maybe related to react-query itself ?

Are you using this for React Native? I'm working with the Tanstack Query team to see how we can use the official Tanstack Query dev tools UI instead. We'll have an Expo plugin which just works with no effort.

I'm not actually. I'm on Ionic + Capacitor.js

[LovesWorking]

Hey, little update to say that I'm not getting the error anymore since couple of time. It doesn't seems to come from an update here, so it was maybe related to react-query itself ?

Are you using this for React Native? I'm working with the Tanstack Query team to see how we can use the official Tanstack Query dev tools UI instead. We'll have an Expo plugin which just works with no effort.

I'm not actually. I'm on Ionic + Capacitor.js

Awesome! This new external sync will be the official dev tools interface while allowing any type of communication between devices to sync the data. It should be released hopefully by Monday.

[navalex]

Ok, it seems really nice ! Does it means that we gonna have also the "mutation" tab working ? :)
I almost never used their official dev tools to be honest. Don't hesitate to ping me to update the docker image if needed !

[LovesWorking]

Ok, it seems really nice ! Does it means that we gonna have also the "mutation" tab working ? :) I almost never used their official dev tools to be honest. Don't hesitate to ping me to update the docker image if needed !

Yes.

[LovesWorking]

@navalex waiting on PR TanStack/query#8846 to update Tanstack query. It's pretty much done for Expo, then I'll be adding support for any other type of web socket / playform.

[LovesWorking]

@navalex can you please test it and let me know if it works for you.

https://github.com/LovesWorking/rn-better-dev-tools

Make sure to copy the react-query-external-sync folder and paste it into your app repo and then call this hook

  useSyncQueriesExternal({
    queryClient,
    socketURL: 'http://localhost:42831',
    deviceName: isIOS ? 'ios' : 'android',
    platform: isIOS ? 'ios' : 'android',
    deviceId: isIOS ? 'ios' : 'android',
    extraDeviceInfo: {
      'test-device-info': 'test',
    },
    enableLogs: true,
  });

After that, run the App, then start or re-start your native apps and they should connect. Make sure you also install the socket io client for the hook to work.