Minimizing re-renders with useQuery

[benbankes]

Ideally, when fetching async data, a component would only have two renders

1. When the component initially loads, given an initial loading state (eg. a spinner), before a response is received
2. After the response is received and the component is populated with data from the response.

I have previously detailed how useQuery causes 4 renders in #685

Is there a way to accomplish this with useQuery without using Suspense? I would like to avoid using using any experimental features.

[tannerlinsley]

What is your use case or reasoning? Perhaps if I can understand that, I could offer better advice.

[benbankes]

Well, I don't really have any weird use case. I am starting by using/evaluating React Query in a line-of-business type of application. Depending on how that goes, it might prove useful on an informational website, and a globally accessible app in my company. Thinking about this a little further - maybe this is more of a question of whether React can be used in such a fashion, rather than React Query. Not sure. I am still learning! Any information would be helpful.

[boschni]

Performance wise it would definitely be nice if the number of renders could be reduced. When looking at the state between the renders, the second and third render do not seem to be relevant for a consumer. Would it be possible to avoid these intermediate renders?

First render state:

{
  data: undefined
  error: null
  failureCount: 0
  isError: false
  isFetching: true
  isIdle: false
  isLoading: true
  isStale: true
  isSuccess: false
  markedForGarbageCollection: false
  status: "loading"
  updatedAt: 0

}

Second render state:

{
  data: undefined
  error: null
  failureCount: 0
  isError: false
  isFetching: true
  isIdle: false
  isLoading: true
  isStale: true
  isSuccess: false
  markedForGarbageCollection: false
  status: "loading"
  updatedAt: 0

}

Third render state:


{
  data: undefined
  error: null
  failureCount: 1
  isError: false
  isFetching: true
  isIdle: false
  isLoading: true
  isStale: true
  isSuccess: false
  markedForGarbageCollection: false
  status: "loading"
  updatedAt: 0
}

Fourth render state:

{
  data: undefined
  error: “Some Error”
  failureCount: 1
  isError: true
  isFetching: false
  isIdle: false
  isLoading: false
  isStale: true
  isSuccess: false
  markedForGarbageCollection: false
  status: "error"
  throwInErrorBoundary: true
  updatedAt: 0
}

[tannerlinsley]

Renders only happen when actual state changes inside of React Query. There are no more renders to optimize before you start getting out of sync from the actual state that is in React Query and your UI. Also, rerenders are good, and you should embrace them

[boschni]

The useQuery hook returns the values status, isIdle, isLoading, isSuccess, isError, data, error, isFetching and failureCount. I guess a component should only re-render when any of these properties change? The UI would probably not be affected if some other (internal) property changes. When looking at it from this perspective, there does not seem to be a difference between the first and second render. In the third render only the failureCount property is updated, but it would be nice if we could jump straight to the state of the fourth render instead of having this intermediate render.

[tannerlinsley]

Renders:

1. The component mounts, nothing has happened yet. The query could be in an idle state, but in this case defaults to loading and isFetching for convenience.
2. The internal side effect runs and the query starts fetching, the status is set to loading and isFetching is true
3. The query resolves and the data is set, status is changed to success
4. The query is marked as stale

Sure, if you aren't using dependent queries, the second render can appear unnecessary, but it's just standard movement within the state machine from the initial state to a fetching state.

Here's a better example: https://codesandbox.io/s/peaceful-forest-6sp2t?file=/src/index.js

[boschni]

Would it be an idea to separate the component state from the query state?

The component state would then only be updated when something changes that is actually affecting the UI.

Some pseudo code to illustrate:

const [state, setState] = useState({ isLoading: true, data: undefined });

query.subscribe(event => {
  const changed = false;
  const newState = { ...state };

  if (state.isLoading !== event.isLoading) {
    newState.isLoading = event.isLoading;
    changed = true;
  }

  if (state.data !== event.data) {
    newState.data = event.data;
    changed = true;
  }

  if (changed) {
    setState(newState);
  }
});

return state;

There are a few benefits to this:

• Components are only updated when an actual property returned from the hook has changed.
• If nothing has changed, the object reference returned by useQuery would always be the same. This could help with memoization.
• It would also make the hook a bit safer, because it would not expose any private properties anymore.

To minimize re-renders even more, the hook could even allow components to only subscribe to certain type of updates:

useQuery('todos', fetchTodoList, { subscribe: { data: true } });

Or the other way around, unsubscribe from certain updates:

useQuery('todos', fetchTodoList, { unsubscribe: { failureCount: true, isFetching: true } });

[nicvazquez]

React Query is attempting to automatically re-run the query in an attempt to recover from the error. To avoid unnecessary multiple renders, you can use the following approach:

useQuery('myData', fetchData, {
    retry: false,
});