Next.js Discord

Discord Forum

@tanstack/react-query causing a useLayoutEffect warning?

Answered
Griffon Nivernais posted this in #help-forum
Open in Discord
Griffon NivernaisOP
For simplicity's sake, here is a simplified version of my _app.tsx:
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import "@/styles/globals.scss";

const QUERY_CLIENT = new QueryClient();

export default function App({ Component, pageProps }) {
    return (
        <QueryClientProvider client={QUERY_CLIENT}>
            <Component {...pageProps} />
        </QueryClientProvider>
    );
}

The error that's produced is as follows, how can I eliminate this?
https://mystb.in/ClicksSimilarlyGarlic
Answered by awareness481
The only case where this warning is useful, is if you re using useLayoutEffect on your own + ssr and it's causing you issues
View full answer

6 Replies

Griffon NivernaisOP
Bump.
Griffon NivernaisOP
Bump.
Griffon NivernaisOP
Bump.
Just ignore this warning, it has also been removed in newer versions of react because it was too often confusing.
The only case where this warning is useful, is if you re using useLayoutEffect on your own + ssr and it's causing you issues
Answer
Griffon NivernaisOP
Which I am not so that's nice, I'll bump React + React DOM and see if it causes any issues, if it does I'll just ignore it. Thank you so much! 💞