fascinating-indigo

Maximum update depth exceeded after ugrading to a certain version

This code works fine when in 5.29.0, but not in 5.37.1. The useWaitForTransactionReceipt is a wrapper of useQuery from the wagmi library. Any idea why? Am I doing right if I want to invoke some logic after useQuery is success?

14 Replies

fascinating-indigoOP•16mo ago

Could it be somehow the showNotification function re-rendered the whole component and invokes the useEffect method again and again?

plain-purple•16mo ago

only if waitForTransaction.isSuccess changes in between

fascinating-indigoOP•16mo ago

you meant the only possible reason why this would happen is that "waitForTransaction.isSuccess changes in between"?

plain-purple•16mo ago

yes because the effect will only re-run if the dependency array changes, and even if you have a million re-renders where waitForTransaction.isSuccess is true, it will not re-run the effect

plain-purple•16mo ago

check your queryClient creation for stability: https://tkdodo.eu/blog/react-query-fa-qs#2-the-queryclient-is-not-stable

React Query FAQs

Answering the most frequently asked React Query questions

fascinating-indigoOP•16mo ago

that's werid. let me print out this variable to see if it's changed thank you for this faq. i think mine is stable:

export function QueryProvider({ children }: { children: React.ReactNode }) {
    const [queryClient] = useState(() => new QueryClient(config))

    return (
        <QueryClientProvider client={queryClient}>
            {children}
            <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
    )
}

export function QueryProvider({ children }: { children: React.ReactNode }) {
    const [queryClient] = useState(() => new QueryClient(config))

    return (
        <QueryClientProvider client={queryClient}>
            {children}
            <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
    )
}

ah sorry i just realized that i was looking at a wrong piece of code. the code should be:

useEffect(() => {
        if (waitForTransaction.isSuccess) {
            showNotification({
                color: "teal",
                title: "Deposit successful",
                message: "Your $RSS3 tokens have been deposited",
            })
            queryClient.invalidateQueries({ queryKey: ["historyDeposit"] })
            queryClient.invalidateQueries({ queryKey: rss3Balance.queryKey })
            queryClient.invalidateQueries({ queryKey: depositedRss3Balance.queryKey })
        }
    }, [
        depositedRss3Balance.queryKey,
        queryClient,
        rss3Balance.queryKey,
        waitForTransaction.isSuccess,
    ])

useEffect(() => {
        if (waitForTransaction.isSuccess) {
            showNotification({
                color: "teal",
                title: "Deposit successful",
                message: "Your $RSS3 tokens have been deposited",
            })
            queryClient.invalidateQueries({ queryKey: ["historyDeposit"] })
            queryClient.invalidateQueries({ queryKey: rss3Balance.queryKey })
            queryClient.invalidateQueries({ queryKey: depositedRss3Balance.queryKey })
        }
    }, [
        depositedRss3Balance.queryKey,
        queryClient,
        rss3Balance.queryKey,
        waitForTransaction.isSuccess,
    ])

i think it's the queryClient keeps changing? question: how do i know if it's changed or not? any way to avoid this?

plain-purple•16mo ago

it goes to error if there is an error, and it goes to pending if the data was removed from the cache

fascinating-indigoOP•16mo ago

in my case, i printed

[
        depositedRss3Balance.queryKey,
        queryClient,
        rss3Balance.queryKey,
        waitForTransaction.isSuccess,
]

[
        depositedRss3Balance.queryKey,
        queryClient,
        rss3Balance.queryKey,
        waitForTransaction.isSuccess,
]

these four deps. but they never changed. i'm not sure about the second one though. cuz i don't know how to identify if the reference has changed

fascinating-indigoOP•16mo ago

it works after i commented out these

fascinating-indigoOP•16mo ago

so the queryKey is also array, could it also be that the array changes references after invalidations?

plain-purple•16mo ago

depends how it is defined. if it's from a function that returns a new array then sure

fascinating-indigoOP•16mo ago

it is a function returns useQuery, so it's just useQuery().queryKey. is it going to change everytime the queries get invalidated? any solution to avoid this?

plain-purple•16mo ago

useQuery doesn't return a queryKey. sorry you best share a reproduction, otherwise it's a bit of a waste of time with partial information and screenshots only

fascinating-indigoOP•16mo ago

you are right. sorry about this. let me see if i can do a reproduciton 🙂

Gaming

Programming

Maximum update depth exceeded after ugrading to a certain version

Did you find this page helpful?