Hi I am wondering how I can re render my table component when rowsPerPage is changed, and then I can re initialise the useTable hook.

const Table = <T, K extends keyof T>(props : TableProps<T, K>): JSX.Element => {
  const [page, setPage] = useState(1);
  const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageInitial);
  const { slice, range } = useTable(data, page, rowsPerPage ?? 10);

  return (
    <>
       <TableBody data={slice} columns={columns} />
       <TableFooter
          range={range}
          slice={slice}
          setPage={setPage}
          page={page}
          setRowsPerPage={(state: number) => setRowsPerPage(state)}
        />
    </>
  );
};

Edit: useTable hook

const useTable = <T, K extends keyof T>(
  data: T[],
  page: number,
  rowsPerPage: number
) => {
  const [tableRange, setTableRange] = useState<number[]>([]);
  const [slice, setSlice] = useState<T[]>([]);
  console.log(rowsPerPage);
  useEffect(() => {
    const range = calculateRange(data, rowsPerPage);
    setTableRange([...range]);

    const slice = sliceData(data, page, rowsPerPage);
    setSlice([...slice]);
  }, [data, setTableRange, page, setSlice]);
  console.log(slice);
  return { slice, range: tableRange };
};

export default useTable;

I have tried some console.logs and it looks like rowsPerPage is being correctly set inside the hook but slice is not being updated