blocks and other tools duplicating automatically when integrate with react js

[geethwish]

[ahmafi]

It's probably because you are using React Strict Mode which causes useEffect function to run twice in development mode.

Strict mode can't automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions: Class component constructor , render , and shouldComponentUpdate methods.

You can disable strict mode or destroy the GrapesJS editor in useEffect like this:

useEffect(() => {
  const editor = grapesjs.init(...);
  return () => {
    editor.destroy();
  };
}

[jcenlo]

Hi i solve this with jquery, is not the best solution in react but works
you have to import jquery import $ from "jquery";
i clean the html trough a class .clean_panel

but i am create a "external panels" to change the UI

Each time i reload the panels reset the HTML , Is not a great solution but works