Запрос данных с помощью React Query и React Table приводит к сбою страницы

Обновленная песочница

Проблемы с кодом

1. queryFn: внутренняя операция фильтра возврата queryFn была выполнена на основе successOrError. В идеале отфильтрованные данные должны возвращаться из серверной части.

2. Всякий раз, когда компонент выполняет повторную отрисовку (например, когда обновляется значение SuccessOrError, что происходит именно в момент сбоя страницы), если данные присутствуют, операция фильтра запускается снова, что, в свою очередь, обновляет значение таблицы, и компонент снова выполняет повторную отрисовку. Вот так мы и застреваем в бесконечном цикле повторных рендерингов.

  const table = useReactTable({
    columns,
    data: data
      ? data.filter((v) =>
          successOrError === "success" ? v.status < 400 : v.status >= 400
        )
      : [],
    getCoreRowModel: getCoreRowModel(),
  });

РЕШЕНИЕ:

Теперь memoizedData изменяется только при изменении зависимостей, а memoziedData передается в таблицу, а таблица обновляется только при обновлении memoizedData.

  // MEMOIZE DATA to avoid infinite rerenders.
  const memoizedData = useMemo(() => {
    if (!data) return [];

    return data.filter((v) =>
      successOrError === "success" ? v.status < 400 : v.status >= 400
    );
  }, [data, successOrError]);