Why notification modal always open twice after mutation success?

2 Replies

Hi @tingadev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue of the notification modal opening twice after a mutation success is likely due to the use of <React.StrictMode> in your application. According to the Refine documentation (https://refine.dev/docs/guides-concepts/faq/#why-are-api-calls-triggering-twice), this is the expected behavior when using <React.StrictMode>. In development mode, React will render components twice to identify unsafe life cycles, unexpected side effects, and legacy or deprecated APIs. This double rendering can cause side effects such as API calls or notifications to trigger twice. To resolve this issue, you can remove <React.StrictMode> from your application during development. Here is an example of how you might do this:

import React from "react";
import ReactDOM from "react-dom";
import { Refine } from "@pankod/refine-core";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <Refine>
      <App />
    </Refine>
  </React.StrictMode>,
  document.getElementById("root")
);

import React from "react";
import ReactDOM from "react-dom";
import { Refine } from "@pankod/refine-core";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <Refine>
      <App />
    </Refine>
  </React.StrictMode>,
  document.getElementById("root")
);

You can change it to:

import React from "react";
import ReactDOM from "react-dom";
import { Refine } from "@pankod/refine-core";
import App from "./App";

ReactDOM.render(
  <Refine>
    <App />
  </Refine>,
  document.getElementById("root")
);

import React from "react";
import ReactDOM from "react-dom";
import { Refine } from "@pankod/refine-core";
import App from "./App";

ReactDOM.render(
  <Refine>
    <App />
  </Refine>,
  document.getElementById("root")
);

By removing <React.StrictMode>, you should see that the notification modal only opens once after a mutation success. For more details, you can refer to the Refine FAQ (https://refine.dev/docs/guides-concepts/faq/#why-are-api-calls-triggering-twice). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@761921731505946634> kapa.ai is still learning and improving, please let us know how it did by reacting below

Why notification modal always open twice after mutation success?

Did you find this page helpful?