[BUG] setState in useList queryOptions select causes infinite loop

[trantam246]

Describe the bug

When using the select function in queryOptions of the useList hook, it causes an infinite re-rendering loop. The component continuously re-fetches data and never stabilizes, making the application unusable.

The issue occurs specifically when the select function is used to transform or filter the data returned from the API call within the useList hook's query options.

Steps To Reproduce

1. Create a component that uses useList hook
2. Add queryOptions with a select function
3. Call setState or any state setter inside the select function
4. Observe infinite re-rendering in browser dev tools
   const { data } = useList({
   resource: "users",
   queryOptions: {
   select: (data) => {
   // This causes infinite loop
   setSomeState(data.items);
   return data;
   }
   }
   });

Expected behavior

The select function should be able to handle side effects like setState calls without causing infinite re-renders. The query should execute once and allow state updates based on the transformed data without triggering additional query executions.

Packages

"@ant-design/icons": "^5.5.1",
"@refinedev/antd": "^6.0.1",
"@refinedev/cli": "^2.16.48",
"@refinedev/core": "^5.0.1",
"@refinedev/devtools": "^2.0.1",
"@refinedev/react-router": "^2.0.0",

Additional Context

This issue commonly occurs when developers need to update component state based on the transformed query data. The current behavior makes it impossible to perform side effects within the select function, limiting its usefulness for data transformation scenarios that require state updates.

[filiperni]

The issue is caused by the select function reference changing on every render.

useList uses useQuery from TanStack Query under the hood.
Every time the select function reference changes, the useQuery hook runs again.

This can create an infinite loop:

1. select function triggers a setState function.
2. setState triggers a re-render of the component.
3. The re-render creates a new select function.
4. select functions is triggered by useQuery→ loop continues.

---

✅ Solution: Memoize select with useCallback

Wrap your select function in useCallback to keep its reference stable:

const select = useCallback((data: TData) => {
  // transform or pick part of the data
  return data.someProperty;
}, []);

Then pass it to useList (or useQuery):

const { data } = useList({
  resource: "posts",
  queryOptions: {select},
});

---

📄 Documentation Notes

The select function will only run if data changed, or if the reference to the select function itself changes. To optimize, wrap the function in useCallback.

🔗 TanStack Query Docs – useQuery

[TanishValesha]

Can I work on this issue ?

[filiperni]

I wanted to start working on this issue, but you were the first to ask.

[trantam246]

Bug Report: Infinite re-rendering loop with select function in queryOptions when state contains objects/arrays

Description

When using the select function wrapped in useCallback within queryOptions of the useList/useTable hook, infinite re-rendering loops occur specifically when the state being updated contains objects or arrays (non-primitive values). However, when updating state with primitive values (string, number, boolean), the loop does not occur.

Minimal Reproducible Example

Case 1: Infinite Loop (Object/Array State)

import { useCallback, useState } from 'react';
import { DigilendTable } from '@src/components/digilend-table';

export default function ProductList() {
  // ❌ Object state - causes infinite loop
  const [statistic, setStatistic] = useState({
    total: 0,
    active: 0,
    pending: 0,
  });

  // ❌ Array state - causes infinite loop  
  const [dataArray, setDataArray] = useState([]);

  const handleSelect = useCallback(data => {
    // This causes infinite loop with object state
    setStatistic({
      total: data?.total || 0,
      ...data?.allData?.statistics,
    });
    
    // This also causes infinite loop with array state
    setDataArray([data?.allData?.statistics?.active]);
  }, []);

//Use Table of antd and useTable of refine
  return (
    <CustomTable
      useTableProps={{
        resource: 'products',
        queryOptions: {
          select: handleSelect, // Causes infinite loop
        },
      }}
      tableProps={{ columns: [] }}
    />
  );
}

[filiperni]

I'm currently working on this issue