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
I'm using this hook in my Table component that way..
For some reason, my
here is the other hook..
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
ColaboradoresTableColaboradoresTable component is infinity rendering, not sure whyhere is the other hook..
useColaboradoresQueryuseColaboradoresQueryfunction 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
});
}
