Request an eslint rule for selectors

[shijistar]

select is a great feature that allows us to customize the transformed data, I love it and use it a lot in our projects. But one problem is that we usually pass an anonymous function, and few people use useCallback for performance optimization, which results in select being executed many times without any effect on each render, which is an unnecessary performance loss.

So I would like to provide an eslint rule that checks the usage of select to ensure that best practices are met, https://tkdodo.eu/blog/react-query-data-transformations#3-using-the-select-option. Also provide An auto-fixer that automatically wraps a useCallback function.

[TkDodo]

Because a large number of select usages are now anonymous arrow functions, resulting in repeated execution of select at each render, the default behavior has too much unnecessary performance loss.

I disagree that it is a performance loss. Consider:

const useTodoById = (id) =>
 useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodoObject,
    select: data => data[id]
  })

this select transformation is a simple object pick. It's fine to run on every render. So as always, "it depends". Adding useCallback here would likely make things slower, because you would need to memoize and cache a trivial object lookup.

Comparing to other state managers that have selectors like zustand or redux, there is also no rule that wants you to cache selectors per default:

useSelector(state => state.todos[id])

this is totally fine, and also runs on every state update and render.

[shijistar]

Yes, in most cases select is just some simple picking operations, and in only a few cases it could be much heavier operations, so perhaps we'd better do performance optimization case by case.