[Bug] Double codex editor in Reactjs

I’am trying to setup editor.js in my React app. But there is a weird situation in my project. Let me demonstrate:

There is second codex-editor which is I don’t need it. Also the second codex-editor is also main(?) editor. When I console output, it shows the second editor’s values: My React app code:

import EditorJS from "@editorjs/editorjs";
import Header from "@editorjs/header";
import List from "@editorjs/list";
import "./App.scss";

function App() {
  const editor = new EditorJS({
    /**
     * Id of Element that should contain the Editor
     */
    holder: "editorjs",

    /**
     * Available Tools list.
     * Pass Tool's class or Settings object for each Tool you want to use
     */
    tools: {
      header: {
        class: Header,
        inlineToolbar: ["link"],
      },
      list: {
        class: List,
        inlineToolbar: true,
      },
    },
  });
  const onClickHandler = () => {
    editor
      .save()
      .then((outputData) => {
        console.log("Article data: ", outputData.blocks);
      })
      .catch((error) => {
        console.log("Saving failed: ", error);
      });
  };

  return (
    <div className="App">
      <div id="editorjs"></div>
      <button onClick={onClickHandler}>Add</button>
    </div>
  );
}

export default App;

[tomohirohiratsuka]

Only using useEffect doesn’t prevent from rendering twice. Using state to check editorjs instance exist was working for me though I’m not sure this is correct way. d

  const id = useId();
  const [editor, setEditor] = useState<EditorJS | null>(null);
  useEffect(() => {
    setEditor((prevEditor) => {
      if (!prevEditor) {
        return new EditorJS({
          holder: id,
        });
      }
      return null;
    });
    return () => {
      if (editor) {
        editor.destroy();
      }
    };
  }, []);
  return <div id={id} />;

[thisiskianoush]

Hi, It is because of rendering component twice, to solve this problem, when you initilize the editor in useEffect, use empty braces [] as useEffect’s dependency, so anything in useEffect will render once per each component call. And in the useEffect, return a cleanup function which destroy the editor when component detaches from the dom.

useEffect(() => {
  const editor = new EditorJs();

  return () => {
    editor.destroy();
  }
}, []);