Next.js & React component render twice bug All In One

error ❌

solution ✅

// next.config.js
module.exports = {
-  reactStrictMode: true,
+  reactStrictMode: false,
}

demos

问题复现条件:

1. state function component 有状态函数组件
2. state class component 有状态函数组件
3. hooks compenent 钩子组件

import React, {
  useEffect,
  useRef,
} from "react";
import { createRoot } from 'react-dom/client';

// export default function Home() {
function Home() {
  const log = console.log;
  log(`v18 createRoot =\n`, createRoot);
  let root = useRef(null);
  useEffect(() => {
    // v18
    console.log(`root =`, root)
    console.log(`root.current =`, root.current)
    if(!root.current) {
      const App = document.getElementById('v18-app');
      root.current = createRoot(App);
      // JSX
      root.current.render(<h1>Develop. Preview. Ship. 

标签：react,render,current,component,js,React,twice,root	

From： https://www.cnblogs.com/xgqfrms/p/16894519.html