TanStackT
TanStack•2y ago
verbal-lime

App getting unresponsive when uplifting the useReactTable hook use

Context
My application/ page is laid out like this

function ComponentA {
  useRefresher();
  const table = useReactTable({
          data,
          columns,
          getCoreRowModel: getCoreRowModel(),
          getFilteredRowModel: getFilteredRowModel(),
          getSortedRowModel: getSortedRowModel(),
            });
  return (
    <>
      <SomesmallTextComponentETC/>
      <DataTable table={table}/>
    </>
  )
}

Now my data table has filter on title , and column hide/ visibility features

useRefresher() is a hook i am using to refresh the data every 1 sec
if u are interested in the code for it here it is

  import { useState, useEffect } from "react"
  export const useRefresher = (time: number = 1200) => {
    const [, setFake] = useState<boolean>(false);
    useEffect(() => {
        const interval = setInterval(() => {
            setFake((f:boolean) => !f);
        }, time);
        return () => {
            clearInterval(interval);
        };
    }, []);
  }


Now when the table was inside the dataTableComponent and i was passing data and columns from outside everything was working fine
but now when i extracted out the table and I am passing it.

on column hide and filter the app gets slow and unresponsive and even crashes.

The reason i wanted to extract usereacttable was because i wanted to add another functionality to dataTable, but DataTable should be a common component,
so i thought i would add that functionality in another component and pass the same table constant to both DataTable and the new to be create Component.

Please give some insights
Was this page helpful?