Mi pila es: React (NextJs), Recoil, React Query

Estoy luchando para dar sentido a un error en mi código. El siguiente HOC usa React-Query para obtener algunos datos de la base de datos.

 const NotificationsWrapper: FC = () => { const [resData, resMeta] = useQuery(getTeamEvents, null, { refetchInterval: 180000, // 3min refetchIntervalInBackground: true, refetchOnWindowFocus: false, retry: 3, retryDelay: 1000 * 60 * 15, }); if (resMeta.isSuccess) { return <Notifications data={resData} />; } else { return <p>Failed to fetch notifications. Please try again later!</p>; } };

El componente Notificaciones usa useEffect para organizar los datos y llevarlos al estado de retroceso para notificaciones y algunos otros. Este componente es un poco complicado y largo, por lo que no se incluye aquí.

En otro lugar de mi aplicación, tengo un componente llamado TeamMsgs que, una vez abierto, usa useEffect para actualizar el estado de las notificaciones según un criterio específico.

Aquí es donde las cosas van mal. Cuando abro el componente TeamMsgs, la aplicación cae en un bucle infinito.

No entiendo por qué esto es así. Console.logs muestra el componente TeamMsgs actualizando el estado de retroceso de las notificaciones, sin embargo, luego el componente de Notificaciones se activa nuevamente y parece sobrescribir el estado de las notificaciones con (ahora) datos obsoletos (que recibió del HOC).

Solución de problemas: no podía entender por qué, así que utilicé algunos datos ficticios dentro de HOC NotificationsWrapper, simplemente como tal:

 const NotificationsWrapper: FC = () => { const [resData, resMeta] = useQuery(getTeamEvents, null, { refetchInterval: 180000, // 3min refetchIntervalInBackground: true, refetchOnWindowFocus: false, retry: 3, retryDelay: 1000 * 60 * 15, }); if (resMeta.isSuccess) { return <Notifications data={dummyData} />; // return <Notifications data={resData} />; // server data not used } else { return <p>Failed to fetch notifications. Please try again later!</p>; } };

Esto funciona bien.

Tengo dos preguntas:

1 - Cómo depurar esto aún más. Intenté usar useMemo y useCallback dentro del componente Notificaciones, sin ningún beneficio.

2 - ¿Qué está causando este bucle infinito en el que el componente de Notificaciones useEffect actualiza el estado después de que el componente TeamMsgs actualice el estado? Puedo confirmar que HOC no está llamando a la función de consulta dentro del ciclo infinito.