equal-aqua•2y ago

useTable from refine-react-table is killing my IDE

Hi! I'm using refine with the new mantineUI integration. I'm trying to get a list working for some easy entities, but as soon as I import useTable from the @pankod/refine-react-table (copying an example from the official repo https://github.com/pankod/refine/blob/next/examples/authentication/mantine/src/pages/posts/list.tsx) my IDE (jetBrains WebStorm) takes at least 30 seconds to complete each post-save action (only import optimization and reformat with prettier). If i remove the useTable import, it goes back to instant post-save actions as always.. Any guess?

36 Replies

Omer•2y ago

Hey @kino90 👋 , Welcome, we are glad to see you! Very interesting. So, are you experiencing the same issue in this example? https://github.com/pankod/refine/blob/next/examples/table/reactTable/basic/src/pages/posts/list.tsx

equal-aqua•2y ago

let me try 🙂

equal-aqua•2y ago

I don't know how to reproduce this on your monorepo. I'm getting this error even if i installed deps both in the main repo folder and in the example :/

Omer•2y ago

just copy/paste the page into your project. So you can easily try

equal-aqua•2y ago

ah ok in my project 🙂

Omer•2y ago

We just want to be sure if it's about the "@pankod/refine-mantine" package or the "@pankod/refine-react-table" package 👀

equal-aqua•2y ago

Done, it's definetely the useTable from "@pankod/refine-react-table"

Omer•2y ago

so great, can you try this example? https://tanstack.com/table/v8/docs/examples/react/basic

equal-aqua•2y ago

if i save with import { useTable, ColumnDef, flexRender } from "@pankod/refine-react-table"; it freezes everything for 30sec more or less, if I save with import { ColumnDef, flexRender } from "@pankod/refine-react-table"; (without useTable) it's instant `

Omer•2y ago

Could you try this?

import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from '@tanstack/react-table'

import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from '@tanstack/react-table'

equal-aqua•2y ago

using this (and using useReactTable instead of useTable) saves quickly

Omer•2y ago

Thanks. Let's see what we can do 🎁

equal-aqua•2y ago

Thanks a lot 👏

Omer•2y ago

I guess I couldn't reproduce the issue 😦

equal-aqua•2y ago

you can see from the gif that: 1- it takes a lot for the import 2- after the save, it takes a lot for the optimizations

Omer•2y ago

@aliemirs Have you any idea? Could it be related to types? @kino90 could you try version @pankod/refine-react-table@4.5.0? npm i @pankod/refine-react-table@4.5.0

equal-aqua•2y ago

I'll try it as soon as I'll be back to my desk 😉

wise-white•2y ago

Hey! Sorry I had trouble with my discord connection. Interesting issue @kino90, can you also try using useTable from @pankod/refine-core? Let's see if we have the issue is coming from the core or the react-table itself 🤔 Also trying to repro the issue 😅

equal-aqua•2y ago

useTable from refine-core looks ok (but does not return the correct values, as typescript is marking everything as error 😂 )

equal-aqua•2y ago

but the import and save are quick now I'll try updating to 4.5.0 after installing 4.5.0 still have problems importing useTable

equal-aqua•2y ago

My project settings are pretty basic, too.. I just added prettier 🫤

package.json

tsconfig.json

npmrc

prettierignore

prettierrc

equal-aqua•2y ago

@pankod/refine-antd is there because I'm actually trying to porting a POC from antd to our preferred UI Kit (Mantine UI) I also tried to run prettier --write ./path/to/file.tsx on the file which includes useTable to see if it was a prettier problem, but it runs smoothly from CLI (also, it won't give problems IMPORTING the hook, but only when SAVING 😉 ) so it's clearly not prettier I disabled "optimize imports" functionality from "Actions on save" panel, and it's OK now, so it's something related to imports Maybe that helps you to reproduce the issue 🙂

Omer•2y ago

I think this PR will fix the issue, https://github.com/pankod/refine/pull/2645

GitHub

fix: react-table export type by omeraplak · Pull Request #2645 · pa...

Please provide enough information so that others can review your pull request: UseTableProps and UseTableReturnType are exported as type. Closing issues Could potentially solve this problem -> h...

Omer•2y ago

Hey @kino90 , Could you try version @pankod/refine-react-table@4.7.3?

equal-aqua•2y ago

installing 😉 still very slow while importing and during imports optimizations 😢

Omer•2y ago

frankly, I was hopeful hehe

equal-aqua•2y ago

I was, too ahaha I solved the main issue disabling the "optimize imports" feature at every save, so I can keep working on the app.. but the problem is still there, just not as blocking..

Omer•2y ago

So can you do the same test for @pankod/refine-react-hook-form? https://github.com/pankod/refine/blob/master/examples/form/reactHookForm/useForm/src/pages/posts/create.tsx I have a guess

Omer•2y ago

I think this might work 👀 https://github.com/pankod/refine/pull/2648

GitHub

refactor: update@tanstack/react-table exports by omeraplak · Pull...

Please provide enough information so that others can review your pull request: We've updated @tanstack/react-table exports Closing issues Could potentially solve this issue -> https://discor...

Omer•2y ago

Hey @kino90 , Could you try version @pankod/refine-react-table@4.7.4 ? Thank you ⚡️

equal-aqua•2y ago

installing

Omer•2y ago

https://tenor.com/view/nervous-sweating-wet-gif-7398449

Tenor

nervous sweating

equal-aqua•2y ago

same 😢

Omer•2y ago

I will look into this issue 👀