T
TanStack•2y ago
like-gold

I am facing app crash, when i tried to take useReactRouter outside of table component

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}/>
    </>
  )
}
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);
        };
    }, []);
  }
  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
1 Reply
like-gold
like-goldOP•2y ago
#react

Did you find this page helpful?