react query select causing useEffect infinite loop

[ranshine]

I am using react query select to transform my data into required form. But it is causing infinite loop

TestComponent:
const ITEMS = []
const [totalItems, setTotalItems] = useState<ITEST[]>(ITEMS)
const { fetchTestData } = useFetchHook()

useEffect(() => {
if (fetchTestData.data != null) {
const dataItems = [...ITEMS]
dataItems[0].value = fetchTestData.data .x
dataItems[1].value =fetchTestData.data .y
dataItems[2].value =fetchTestData.data .z
setTotalItems([...dataItems])
}
}, [fetchTestData.data])

useFetchHook:

export const useFetchHook = () => {
const fetchTestData = useQuery('test', async () => await Api.getTestData(), {
select: data => {
const response: Object = data?.data?.data as object
const testData = plainToInstance(TestObject, response)
return testData
}
}
)
return { fetchTestData }
}

[TkDodo]

inline select functions run on every render. you can extract or memoize them if you want. see:

https://tkdodo.eu/blog/react-query-data-transformations#3-using-the-select-option

also, you don't need a useEffect to derive state - that is very likely an antipattern. see:

https://tkdodo.eu/blog/dont-over-use-state

[ranshine]

I tried like this but first time it is not providing data, am i missing anything
select: React.useCallback(
(data) => {
const response: Object = data?.data?.data as object
const testData = plainToInstance(TestObject, response)
return testData
}, []
)

[TkDodo]

please show your issue in a codesandbox reproduction

[ranshine]

yeah now it is working, thanks

[ranshine]

setTotalItems([...dataItems]) is not changing data, because of this it is not updating

[TkDodo]

like I said, totalItems is derived state, you don't need state + an effect for that, I think you totally missed that point:

function deriveTotalItems(data) {
  const dataItems = [...data]
  dataItems[0].value = data.x
  dataItems[1].value = data.y
  dataItems[2].value = data.z
  return [...dataItems]
}

const { fetchTestData } = useFetchHook()

const totalItems = fetchTestData.data == null ? [] : deriveTotalItems(fetchTestData.data)

if referential equality is important, use useMemo.