T
TanStack•2y ago
foreign-sapphire

Why is causing re-rendering on my Table component?

Basically this hook is causing re-render on my Table component.. and I don't know why 
function useColaboradoresTable(): [Table<TColaborador>, boolean, FirestoreError | null] {
  const [sorting, setSorting] = useState<SortingState>(DEFAULT_SORTING);
  const { data, isLoading, error } = useColaboradoresQuery(sorting);
  const table = useReactTable<TColaborador>({
    data: data || [],
    columns: columns,
    manualSorting: true,
    state: {
      sorting
    },
    onSortingChange: setSorting,
    getSortedRowModel: getSortedRowModel(),
    getCoreRowModel: getCoreRowModel()
  });

  return [table, isLoading, error];
}

export default useColaboradoresTable;
function useColaboradoresTable(): [Table<TColaborador>, boolean, FirestoreError | null] {
  const [sorting, setSorting] = useState<SortingState>(DEFAULT_SORTING);
  const { data, isLoading, error } = useColaboradoresQuery(sorting);
  const table = useReactTable<TColaborador>({
    data: data || [],
    columns: columns,
    manualSorting: true,
    state: {
      sorting
    },
    onSortingChange: setSorting,
    getSortedRowModel: getSortedRowModel(),
    getCoreRowModel: getCoreRowModel()
  });

  return [table, isLoading, error];
}

export default useColaboradoresTable;
I'm using this hook in my Table component that way.. 
const ColaboradoresTable = () => {
  const [table, isLoading, error] = useColaboradoresTable();
  ....
}
... 
const ColaboradoresTable = () => {
  const [table, isLoading, error] = useColaboradoresTable();
  ....
}
...
For some reason, my ColaboradoresTable component is infinity rendering, not sure why here is the other hook..useColaboradoresQuery 
function useColaboradoresQuery(sorting?: SortingState) {
  const currentUser = getCurrentUser();
  const uid = currentUser?.uid;
  const activeEmpresaId = useUserStore((state) => state.activeEmpresaId);
  return useQuery<GetColaboradoresResponse, FirestoreError, TColaborador[]>({
    queryKey: [QUERY_KEY, uid, activeEmpresaId, sorting],
    queryFn: () => {
      if (!uid) {
        throw new Error("Usuário não autenticado");
      }
      if (!activeEmpresaId) {
        throw new Error("Empresa não selecionada");
      }
      return getColaboradores(activeEmpresaId, sorting);
    },
    select: (data) => {
      if (data.empty) {
        return [];
      }
      const existingColaboradores = data.docs.filter((document_) => document_.exists());
      return existingColaboradores.map((document_) => document_.data());
    },
    enabled: !!currentUser
  });
}
function useColaboradoresQuery(sorting?: SortingState) {
  const currentUser = getCurrentUser();
  const uid = currentUser?.uid;
  const activeEmpresaId = useUserStore((state) => state.activeEmpresaId);
  return useQuery<GetColaboradoresResponse, FirestoreError, TColaborador[]>({
    queryKey: [QUERY_KEY, uid, activeEmpresaId, sorting],
    queryFn: () => {
      if (!uid) {
        throw new Error("Usuário não autenticado");
      }
      if (!activeEmpresaId) {
        throw new Error("Empresa não selecionada");
      }
      return getColaboradores(activeEmpresaId, sorting);
    },
    select: (data) => {
      if (data.empty) {
        return [];
      }
      const existingColaboradores = data.docs.filter((document_) => document_.exists());
      return existingColaboradores.map((document_) => document_.data());
    },
    enabled: !!currentUser
  });
}
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?