Is it intentional that useQuery variables are initially out of sync with the returning data?

Help
,
1

Say I have something like this:

  const [search, setSearch] = useState('');

  const { data } = useQuery(QueryDocument, { variables: { search } });

This is what happens when setSearch is called with a new value:

  • The component function is called, and search has the new value, but data is the same.
  • Browser paints.
  • The component function is immediately called again, this time data has a value that is cached for the new search (or undefined, if there isn’t any).
  • Browser paints.
  • After some time, when the network request is done, the component function is called once again, and this time data has the value from the network.

I wonder if this is intentional, because:

  • There is a seemingly unnecessary rerender. It feels like the first two rerenders should be merged.
  • The inconsistent state (where search is new, but data is still old) gets actually painted on the screen.

I think it’s not how it used to be, but at this point I’m not so sure anymore. I would really appreciate some clarification on whether it should be like this or not.

[EDIT] I’m using the latest apollo client (3.5.8).