Refecth data but persisting current state in application

[cubecleveland]

Hello,
I ahve a tble that is rendering the results recieved by usqQuery fetching.

Each TD in the table has a menu that is toggled between open and close to preform certain operation on the row.

Problem is that when the query refetces in the background and tehn update the entire table get redrawn and i loose the toggle state of the menu... so it jumps between on and off based on the uesry refetching...

Is there any trick i can use to ep the menu open even after the query has refetched in the background ?

[ghost]

I think one way would be to pause the query while the menu is open by passing the enabled option to useQuery. Make it false when the menu is open, otherwise true.

• https://react-query.tanstack.com/guides/disabling-queries
• https://react-query.tanstack.com/guides/dependent-queries

[TkDodo]

why are you losing the toggle state? Do you have it in local react state? Sounds more as if the component would unmount / remount here? Generally, a re-render shouldn't cause open menus to close :/

A codesandbox example would help in understanding the issue.

[cubecleveland]

HI, so im rendering a table from the data that is returned from useQuery.
I can definetly see that the table is getting rerndere when the new data is fetched....
each coloum in the table renders a button that renders a a popover menu on click.
Would nt it make sense that the menu will be toggled since the whole button iis being rerendered?

Am i missingh anything ?

[ghost]

Am i missingh anything ?

You should make a codesandbox to reproduce your problem or at least paste some code here.