conscious-sapphire

Table cell which is Combobox causing re render

Need Help Issue - Table cell which is Combobox causing re render which is closing the popover and user is unable to use input field. As per doc- 1) We have Memoize column and data both, 2) All the components inside column are created seprate component outside table. Issue - -We have table cell which is combobox. Combobox has search input and options. -When we type anything in search input, using next js server action, we get options from backend. - So after typing every letter, options are changing, which cause table re-renders. Below is sandbox Link. We are stuck with the issue since last 3 days, we appreciate any help. Thanks in Advance. @KevinVandy can you please help code sandbox Url : https://codesandbox.io/p/github/rkandwal300/tanstack-table-issue/master

10 Replies

wee-brown•2y ago

I hope you realize that this does absolutely nothing to give your data a stable reference

conscious-sapphireOP•17mo ago

@KevinVandy i am taking data from props then how should i give stable. Refrence to data. Should i create a useState and update. Data state from useEffect Or something else? Currently data is comming from props so it has stable refrence currently i think ?

wee-brown•17mo ago

https://tanstack.com/table/latest/docs/faq#how-do-i-stop-infinite-rendering-loops

FAQ | TanStack Table Docs

How do I stop infinite rendering loops? If you are using React, there is a very common pitfall that can cause infinite rendering. If you fail to give your columns, data, or state a stable reference, React will enter an infinite loop of re-rendering upon any change to the table state.

conscious-sapphireOP•17mo ago

@KevinVandy In this faq there is a option in last how to stop rerender our table when data updates or changes?

wee-brown•17mo ago

how familiar are you with React? just need a point of reference for resources to point you towards

conscious-sapphireOP•17mo ago

Well i am junior dev still learning
Not have that much experience 😅

wee-brown•17mo ago

that's fine. Trying to find what your exact issue is in your original question re-rendering when data changes is a feature in react, not a bug

conscious-sapphireOP•17mo ago

I in this. Last example i want to skipPageResetRef from cloumnDef when my data. Changes in a particular cell. Because. I have a multiSelect on that table cell
And my table is form table i have. Multiple inputs. On each table cell and. Creating new table row. Dynamically. Using useForm hook's useField array

wee-brown•17mo ago

I can't get your sandbox to run but make sure your combo box is not unmounting

  React.useEffect(() =>{
    console.log("render combo")
    return () => console.log("unmount combo")
  } , [])

  React.useEffect(() =>{
    console.log("render combo")
    return () => console.log("unmount combo")
  } , [])

conscious-sapphireOP•17mo ago

Yeah can you run that sandbox in incognito mode . It runs fine in. Incognito mode but gives problem. In without incognito. I tried codesandbox first time. So 😅 Sorry for inconvenience My problem is. When i search inside my combobox my backend api calls and update options of combobox. At default my combobox is closed and when user click on combobox it expands and there is a input and combobox options when user search on searchbox (input) then options updates from backend. But. Inside table cell when. User types one word in combobox input then combobox closes in each type . It rerenders in each type of user on combobox input.

Gaming

Programming

Table cell which is Combobox causing re render

Did you find this page helpful?