Renders twice with latest nextjs

The default implementation renders twice using nextjs.

I used this example: https://github.com/unlayer/react-email-editor

and got this outcome

package.json

{
  "name": "polyma",
  "version": "2.0.0",
  "private": true,
  "license": "The Unlicense",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "fauna": "fgu"
  },
  "dependencies": {
    "@apollo/client": "^3.5.10",
    "@nivo/bar": "^0.79.1",
    "@nivo/core": "^0.79.0",
    "@nivo/line": "^0.79.1",
    "@tailwindcss/line-clamp": "^0.4.0",
    "framer-motion": "^6.3.0",
    "graphql": "^16.3.0",
    "next": "12.1.6",
    "react": "^18.0.0",
    "react-dnd": "^16.0.0",
    "react-dnd-html5-backend": "^16.0.0",
    "react-dom": "^18.0.0",
    "react-email-editor": "^1.6.0",
    "react-hook-form": "^7.30.0",
    "react-ranger": "^2.1.0",
    "react-use-copy-to-clipboard": "^1.0.1",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "autoprefixer": "^10.4.4",
    "eslint": "^8.12.0",
    "eslint-config-next": "12.1.6",
    "fauna-gql-upload": "^2.4.3",
    "faunadb": "^4.5.4",
    "postcss": "^8.4.12",
    "sharp": "^0.30.3",
    "tailwind-scrollbar": "^1.3.1",
    "tailwindcss": "^3.0.24",
    "vercel": "^24.1.0"
  }
}

Full code Email.js

import { useRef } from "react";
import dynamic from "next/dynamic";

const EmailEditor = dynamic(() => import("react-email-editor"), {
  ssr: false,
});

export default function Email() {
  const emailEditorRef = useRef(null);

  function saveDesign() {
    emailEditorRef.current.editor.saveDesign((design) => {
      console.log("saveDesign", design);
    });
  }

  function exportHtml() {
    emailEditorRef.current.editor.exportHtml((data) => {
      const { design, html } = data;
      console.log("exportHtml", html);
    });
  }

  function onLoad() {
    // editor instance is created
    // you can load your template here;
    // const templateJson = {};
    // emailEditorRef.current.editor.loadDesign(templateJson);
  }

  function onReady() {
    // editor is ready
    console.log("onReady");
  }

  return (
    <div className="">
      <div>
        <button onClick={saveDesign}>Save Design</button>
        <button onClick={exportHtml}>Export HTML</button>
      </div>

      <div className="h-screen overflow-hidden">
        <EmailEditor
          ref={emailEditorRef}
          onLoad={onLoad}
          onReady={onReady}
          // works for now, the second email builder gets hidden.
          // minHeight="100vh"
        />
      </div>
    </div>
  );
}

[furkanmeclis]

Hello, I was having the same problem in React V18. And I saw that the problem was caused by the fact that Strict Mode causes the element to be rendered twice in React. I solved the problem by removing the StricMode tag in index.js.

root.render(
    <> // Without StrictMode 
     <App />
    </>
);

[driaug]

Having the same issue today, I really feel like turning off StrictMode is not a good workaround though.

For anyone that does not mind this, turning it off does indeed fix the issue.

In case anyone is wondering why turning of StrictMode fixes the issue https://stackoverflow.com/a/61897567/12035491