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}/>
    </>
  )
}

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

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}/>
    </>
  )
}

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);
        };
    }, []);
  }

App getting unresponsive when uplifting the useReactTable hook use

Similar Threads

App getting unresponsive when uplifting the useReactTable hook use

Similar Threads

Similar Threads

Similar Threads