query: too many re-renders when changing keys

Describe the bug

When changing the query key, react-query re-renders the component two times with the exact same states

Your minimal, reproducible example

v4: https://codesandbox.io/s/react-query-re-renders-t2z4u8, v3: https://codesandbox.io/s/react-query-re-renders-v3-cfo8y4

Steps to reproduce

• Open the sandbox and inspect the console
• on page load, you’ll see two renders (loading and success): 🆗
• click the next button
• you’ll see 3 additional renders
  • loading: 🆗
  • loading: 🚫
  • success: 🆗

The second “loading” render has the exact same state as the previous one and is unnecessary.

This happens on v17 and v18 of react, and in v3 and v4 of react-query. It also has nothing to do with extra renders in dev-mode and strict effects (the example doesn’t use strict mode), and it can also be reproduced when the logging is moved to an effect. The component really renders twice.

Expected behavior

we should see two renders instead of three:

• loading: 🆗
• success: 🆗

How often does this bug happen?

Every time

Screenshots or Videos

Platform

independent (I’m on macos & brave)

react-query version

v3 and v4

TypeScript version

No response

Additional context

first reported on stackoverflow: https://stackoverflow.com/questions/72834988/react-query-makes-component-to-rerender-multiple-times

my best guess is that setState triggers one render, and then useQuery re-renders again. But those should be deduped…

here’s a failing test-case to reproduce:

  it('should not render too often when query key changes', async () => {
    const key = queryKey()
    const states: UseQueryResult<{ count: number }>[] = []

    function Page() {
      const [count, setCount] = React.useState(0)
      const state = useQuery([key, count], async () => {
        await sleep(10)
        return { count }
      })
      states.push(state)

      return (
        <div>
          <h1>data: {state.data?.count}</h1>
          <button
            onClick={() => {
              setCount(prev => prev + 1);
            }}
          >
            Next
          </button>
        </div>
      );
    }

    const rendered = renderWithClient(queryClient, <Page />)

    await waitFor(() => rendered.getByText('data: 0'))

    // Initial
    expect(states[0]).toMatchObject({ status: 'loading', data: undefined })
    // loaded
    expect(states[1]).toMatchObject({ status: 'success', data: { count: 0 } })

    expect(states.length).toBe(2)

    fireEvent.click(rendered.getByRole('button', { name: /next/i }))

    await waitFor(() => rendered.getByText('data: 1'))

    // fetching with new key
    expect(states[2]).toMatchObject({ status: 'loading', data: undefined })
    // loaded
    expect(states[3]).toMatchObject({ status: 'success', data: { count: 0 } })

    expect(states.length).toBe(4)
  })