Mathias•9mo ago

How to prevent re-rendering using useMutation?

I'm using a Sheet component from Shadcn/ui in my Next.js project. Currently, the Sheet "closes" automatically whenever there are changes to statuses, assignees, etc. This behavior appears to be linked to the use of useMutation because if I disable the mutation, the Sheet remains open during these changes. I need the Sheet to stay open even while data changes via mutations. It appears that the issue is present either using useState from React or when using Zustand. Is there a method to prevent the Sheet from auto-closing when the mutation is executed?

9 Replies

Michal Srb•9mo ago

Hi @Mathias, can you simplify (make sure the issue still reproduces) and share your code?

MathiasOP•9mo ago

Hi @Michal Srb, thanks for showing the interest. I will start with the behaviour here

MathiasOP•9mo ago

Here are the files. Structure: 1. BoardIdPage (MainPage) - Column (Component) a: Card (Componet) - CardOptions (Component) 1: ColumnSelector (Isolated to this component) I tried moving ColumnSelector two steps above to Card component, and same behaviour happened. Everytime I use the Selector it re-renders the page. If I do comment out the moveTask (within ColumnSelector), the UI works as it should but then the data does not mutate (as expected).

code.zip

Michal Srb•9mo ago

What I expect is happening is that the component that renders the sheet gets unmounted. I see you do seem to have correct keys set on every parent. I can't tell what's wrong from the code, but you should be able to debug this: 1. You don't need to use the UI to trigger a change, do it from the Convex dashboard. This should still close the sheet. (try it out) 2. From the sheet, start replacing the components with a component like:

function Test() {
  const [x] = useState(() => Math.random());
  return x;
}

function Test() {
  const [x] = useState(() => Math.random());
  return x;
}

This component will render a new number when it gets remounted. If you replace the sheet with it, change the data in the Convex dashboard, then you should see it render a new number. You can then replace the parent component, retry, etc. Until you get to the point where the number doesn't change: The component you just replaced is causing its children to unmount. This is not really related to Convex. Hope you can figure it out!

MathiasOP•9mo ago

Thanks for taking a look, and for the troubleshooting steps. I can confirm that changing the data from Convex dashboard closed sheet / re-rendered page. I can also confirm that the value x of the Test function changed every time I changed the data. @Michal Srb Do you have any other suggestions? I can force it to open again after change, but it does not provide a good user experience.

Michal Srb•9mo ago

Hey, as I wrote:

You can then replace the parent component, retry, etc. Until you get to the point where the number doesn't change: The component you just replaced is causing its children to unmount.

You need to find the component that's actually causing the unmounting.

MathiasOP•9mo ago

Thanks. It is the ColumnSelector component that causes the unmount. Within the same sheet component I also update the editor, and that is no issue.

Michal Srb•9mo ago

I don't think the ColumnSelector can be the issue, it's not a parent of the Sheet. It's one one of the parents of the Sheet that's causing the unmounting. If you can get me a link to a GitHub repo where I just npm install and npm run dev to reproduce the issue, I'll have a look.

MathiasOP•9mo ago

Thanks but unfortunately I'm not allowed. I will try a different ways of selecting and see what happens, Thank you for the great help so far and the troubleshooting ideas.

How to prevent re-rendering using useMutation?

Did you find this page helpful?