Using date from React query to filter existing state causing too many re-renders

Question

I'm using react query to call an api to retreive a list of schedule dates for users to use to update a list of selected dates from a calendar. However I'm not sure how to do this using react query. Currently the naked setDates is causing too many rerenders because it's not inside eg a useEffect() hook that I would normally use for an api call. Now I'm using react query I'm not sure where to put it?

const SomeDateComponent = ({  }) => {

  const [selectedDates, setSelectedDates] = React.useState<selectedDates>({});
  .....
  
  const { data: existingSchedules } = useExistingScheduleDates(
    startDate,
    endDate,
    userIds.map((agent) => agent.userId),
  );

  
  setDates((selectedDates) => ({ ...selectedDates, ...existingSchedules }))

  return (....)

custom Hook:

export function useExistingScheduleDates(
  startDate: Date,
  endDate: Date,
  userIds: number[],
): QueryObserverResult<ExistingScheduleDates> {
  return useQuery(
    ['existingSchedules', startDate, endDate],
    () => {
      return apiCall( {
        route: '/schedulesExist',
        query: {
          startDate: format(startDate, dateFormat),
          endDate: format(endDate, dateFormat),
          userId: userIds,
        },
      });
    },
    {
      refetchOnWindowFocus: false,
    },
  );
}

TkDodo TkDodo · Accepted Answer · 2021-02-05T22:37:21

You definitely cannot / should not call a setter function of useState during render, as this violates a core principle of React that render functions should be pure. What you can do is:

set it in a useEffect

const { data: existingSchedules } = useExistingScheduleDates(...)

useEffect(() => {
    setDates(...)
}, [existingSchedules])

set it in the onSuccess callback of useQuery

const { data: existingSchedules } = useQuery(
  'key',
  queryFn,
  {
    onSuccess: data => setDates(...)
  }
)

Both of these should work, but the question remains: Why would you need to do that? react-query is a state manager per se, so there is really no need to store that additionally in client state. The best way to use react-query is to keep the client state and the server state separated. I would suggest to store the user selection (selectedDates) in useState, have the server data handled completely by react-query (existingSchedules), and combine them in the render function if you need to:

const { data: existingSchedules } = useExistingScheduleDates(...)
const [selectedDates, setSelectedDates] = React.useState<selectedDates>({})

const someComputedThing = computeSomeThing(existingSchedules, selectedDates)

sorry for the bad naming, I have no idea how existingSchedules works together with selectedDates, but I hope you get the idea :)

Using date from React query to filter existing state causing too many re-renders

1 Answers