Why does calling setState inside my component cause infinite re-render but calling setState inside useQuery onSuccess callback work just fine❓

[cliffordfajardo]

Hi all,
Why does:

1. calling setState outside of useQuery's onSuccess callback inside my component cause my component to get stuck in an infinite re-render loop?
2. Versus calling setState inside of useQuery's onSuccess callback work just fine?

Checking myself 😅

1. Based on how react's useState works, number 1 made sense to me: update a component's state, it will cause the component it to re-render

2. However, I was bit confused that case 2: "calling 'setState' inside of useQuery's 'onSuccess' callback", didn't cause an infinite re-render, why is that?

   • inside the onSuccess I am calling my components setItems, which causes the component to re-render, which in turn calls my useGetData hook to get called & then call my setState function again 🔄

Codesandbox: https://codesandbox.io/s/condescending-butterfly-71o4r

const defaultItem = { name: "default" }
export default function App() {
  const [items, setItems] = React.useState<Item[]>([ defaultItem ]);
  const [itemToFetch, setItemToFetch] = React.useState<string>("apple");
  const handleButtonClick = React.useCallback((event: any) => {
    const buttonValue = event?.target?.value;
    setItemToFetch(event?.target?.value);
  }, []);

   // Approach 1: calling setItems outside of `onSuccess` callback 
   // Imagine when calling this that "Approach 2" is commented out...
   const dataInfo = useGetData(itemToFetch);
   const newItem = dataInfo.data || defaultItem;
   setItems([...items, newItem]); // ❌ calling `setItems` here causes component to infinitely re-render

   // Approach 2: calling setState inside `onSuccess`
   const dataInfo = useGetData(itemToFetch, (onSuccessData) => {
     const newItem = onSuccessData;
     setItems([...items, newItem]); //✅ calling `setItems` here doesn't cause component to re-render infinitely
   });


   return (
      <button onClick={handleButtonClick} value="..some value">..some value</button>
   	  <ul>
           {items.map((item, i) => {
             return <li key={i}>{item.name}</li>;
           })}
      </ul>
   )
}

00example.mp4

[TkDodo]

inside the onSuccess I am calling my components setItems, which causes the component to re-render, which in turn calls my useGetData hook to get called & then call my setState function again 🔄

because just re-rendering your component will not trigger onSuccess again. onSuccess is tied to data fetching, so it will only be called when a request is successfully made. Conceptually, onSuccess is Promise.then, onError is Promise.catch and onSettled is Promise.finally.

So the flow is:

• mount triggers a fetch
• calls onSuccess
• calls setState
• re-renders component
• the end :)

---

You have also identified correctly why it doesn't work during render - that also violates the rule of react that render functions have to be pure. You can call setState in onSuccess because there, we are in an effect.

However, you usually don't need to call setState there. The data returned from react-query contains the up-to-date data, and copying that to local state is often unnecessary.
It will start to get complicated when you use staleTime and the key changes, because then onSuccess might not be called and your state syncing can get out of sync. That's why a useEffect that listens to data is slightly better than onSuccess, if you need it at all :)

[cliffordfajardo]

The data returned from react-query contains the up-to-date data, and copying that to local state is often unnecessary.

@TkDodo I agree 💯 . 99% of the time using the data from the hook is what I do & need.

Follow up question:
In a scenario, where I am incrementally building my results array (but not using pagination since its not relevant), does this copying of data (using setState to build an array) seem alright ? 🤔 Or is there an alternative approach (manipulating queryCache by creating a new entry as opposed to local state array)?

example002.mp4

Scenario:

• Imagine a security guard is shown a "site" when they load a particular page. (there could be dozens of boxes/sites but I kept it as 1 for the codesanbox)
• When the security guard clicks the site, it fetches data (lets call it environment data) for that particular site & appends that new view below the previous one
• The security guard could drill down further and click the environment box and see more information

In this scenario, what I'm doing is appending the results to an array.
😅 When I have to do things like this is feels wierd, since most of the time, you can use the .data from your hook directly for rendering

For example

• Code sandbox: https://codesandbox.io/s/objective-silence-836z0?file=/src/App.tsx