Re-rendering Issue with Select function When Using TanStack Query and Formik

[Rutvik-Sanathra]

Hey @TkDodo, thank you for creating such an amazing library, your efforts are truly appreciated!

I am encountering an issue where the select function is invoked every time the setValues function from Formik is called after fetching data via TanStack Query. This results in unnecessary re-renders and causes an infinite loop. Interestingly, this issue does not occur when using useState instead of Formik.

Additionally, the select function is triggered when the form fields are updated, causing the values to be stored in Formik again. I am trying to understand why this happens and if there’s a better solution to prevent this behaviour.

Code Example

const { data } = useQuery({
queryKey: ["getInvoice"],
queryFn: () => getInvoice(),
select: (updatedData) => {
InoviceForm.setValues(updatedData);
return updatedData;
},
});

[TkDodo]

the select function is invoked every time

select run on every render, unless you memoize it: https://tanstack.com/query/v5/docs/framework/react/guides/render-optimizations#memoization

Interestingly, this issue does not occur when using useState

likely because setState will bail out of updates if it receives the same value: https://tkdodo.eu/blog/things-to-know-about-use-state#3-the-update-bailout

if there’s a better solution to prevent this behaviour

see: https://tkdodo.eu/blog/react-query-and-forms

select: (updatedData) => {
InoviceForm.setValues(updatedData);
return updatedData;
},

generally, select is supposed to be a side-effect free function that transforms values. You’re absolutely abusing it here 😅

[Rutvik-Sanathra]

Hey @TkDodo

Thanks for pointing this out! You're absolutely right that the select function is being misused in this context. It’s meant to be a pure, side-effect-free function for transforming query data and calling InvoiceForm.setValues(updatedData) inside it is definitely an anti-pattern. 😅

I do want to avoid using useEffect here, as in a large project, it can sometimes lead to unexpected bugs, especially with complex dependency arrays or unintended re-runs.

[TkDodo]

Please read the article about forms. you likely only want to initialize once, in which case splitting up into two components is a good idea.

[Rutvik-Sanathra]

Sure Thank you for the prompt response