<p dir="auto">React version: 18.2</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>download npx create-react-app my-app --template redux-typescript</li>
<li>npm start</li>
</ol>

<p dir="auto">Link to code example:</p>
<p dir="auto"><code class="notranslate">function Ddd() { return ( &lt;React.StrictMode&gt; &lt;Dd /&gt; &lt;/React.StrictMode&gt; ); }</code></p>
<p dir="auto"><code class="notranslate">function Dd() { console.log(12); return &lt;div&gt;12&lt;/div&gt;; }</code></p>
<p dir="auto"><code class="notranslate">root.render( &lt;Ddd /&gt; );</code></p>

<h2 dir="auto">The current behavior</h2>
<p dir="auto">Dd render 2 times</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">Dd render 1 times</p>
<p dir="auto">React version:18.0.0</p>
<p dir="auto">with 18</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import ReactDOM from &quot;react-dom/client&quot;;
const root = ReactDOM.createRoot(
	document.getElementById(&quot;root&quot;) as HTMLElement
);
root.render(
	&lt;React.StrictMode&gt;
		&lt;App /&gt;
	&lt;/React.StrictMode&gt;
);
"><pre class="notranslate"><code class="notranslate">import ReactDOM from "react-dom/client";
const root = ReactDOM.createRoot(
	document.getElementById("root") as HTMLElement
);
root.render(
	&lt;React.StrictMode&gt;
		&lt;App /&gt;
	&lt;/React.StrictMode&gt;
);

</code></pre></div>
<p dir="auto">with 17</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import ReactDOM from &quot;react-dom&quot;;
ReactDOM.render(
  &lt;React.StrictMode&gt;
		&lt;App /&gt;
	&lt;/React.StrictMode&gt;,
	document.getElementById(&quot;root&quot;) as HTMLElement
);"><pre class="notranslate"><code class="notranslate">import ReactDOM from "react-dom";
ReactDOM.render(
  &lt;React.StrictMode&gt;
		&lt;App /&gt;
	&lt;/React.StrictMode&gt;,
	document.getElementById("root") as HTMLElement
);
</code></pre></div>
<p dir="auto">and my app demo</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { useEffect } from &quot;react&quot;;
import &quot;./App.css&quot;;
import &quot;xterm/css/xterm.css&quot;;

import { Terminal } from &quot;xterm&quot;;
import { io } from &quot;socket.io-client&quot;;
import { FitAddon } from &quot;xterm-addon-fit&quot;;

const ids = {} as any;
function getTerminal(id: string) {
	if (!ids[id]) {
		ids[id] = new Terminal();
		return ids[id];
	} else {
		return ids[id];
	}
}

let chunk = &quot;&quot;;

function App() {
	console.log(&quot;here&quot;);
	useEffect(() =&gt; {
		console.log(&quot;run effect&quot;);
		const term = getTerminal(&quot;t1&quot;) as Terminal;
		const el = document.getElementById(&quot;xterm-container&quot;) as HTMLDivElement;
		const socket = io(&quot;ws://localhost:3000&quot;);
		const fitAddon = new FitAddon();
		term.loadAddon(fitAddon);
		term.open(el);
		fitAddon.fit();

		window.addEventListener(&quot;resize&quot;, (s) =&gt; {
			fitAddon.fit();
		});

		term.write(&quot;welcome\r\n&quot;);

		socket.on(&quot;to&quot;, function (msg: string) {
			console.log(&quot;receive&quot;, msg);
			term.write(msg + &quot;\r\n&quot;);
		});

		term.onData((arg1: string) =&gt; {
			console.log(&quot;data-&quot;, arg1, chunk);
			if (arg1.charCodeAt(0) === 13) {
				term.write(&quot;\r\n&quot;);
				console.log(&quot;data&quot;, arg1);
				if (!!chunk) {
					if (chunk === &quot;clear&quot;) {
						term.clear();
						chunk = &quot;&quot;;
					} else {
						socket.emit(&quot;chat message&quot;, chunk);
					}
				}
				chunk = &quot;&quot;;
			} else if (arg1.charCodeAt(0) === 127 || arg1.charCodeAt(0) === 8) {
				chunk = chunk.slice(0, chunk.length - 1);
				console.log(chunk);
				term.write(&quot;\b \b&quot;);
			} else {
				term.write(arg1);
				chunk += arg1;
			}
		});

		// return () =&gt; {
		// 	term.dispose()
		// }
	}, []);

	return (
		&lt;div className=&quot;App&quot;&gt;
			&lt;header className=&quot;App-header&quot;&gt;terminal test&lt;/header&gt;
			&lt;div id=&quot;xterm-container&quot;&gt;&lt;/div&gt;
		&lt;/div&gt;
	);
}

export default App;
"><pre class="notranslate"><code class="notranslate">import { useEffect } from "react";
import "./App.css";
import "xterm/css/xterm.css";

import { Terminal } from "xterm";
import { io } from "socket.io-client";
import { FitAddon } from "xterm-addon-fit";

const ids = {} as any;
function getTerminal(id: string) {
	if (!ids[id]) {
		ids[id] = new Terminal();
		return ids[id];
	} else {
		return ids[id];
	}
}

let chunk = "";

function App() {
	console.log("here");
	useEffect(() =&gt; {
		console.log("run effect");
		const term = getTerminal("t1") as Terminal;
		const el = document.getElementById("xterm-container") as HTMLDivElement;
		const socket = io("ws://localhost:3000");
		const fitAddon = new FitAddon();
		term.loadAddon(fitAddon);
		term.open(el);
		fitAddon.fit();

		window.addEventListener("resize", (s) =&gt; {
			fitAddon.fit();
		});

		term.write("welcome\r\n");

		socket.on("to", function (msg: string) {
			console.log("receive", msg);
			term.write(msg + "\r\n");
		});

		term.onData((arg1: string) =&gt; {
			console.log("data-", arg1, chunk);
			if (arg1.charCodeAt(0) === 13) {
				term.write("\r\n");
				console.log("data", arg1);
				if (!!chunk) {
					if (chunk === "clear") {
						term.clear();
						chunk = "";
					} else {
						socket.emit("chat message", chunk);
					}
				}
				chunk = "";
			} else if (arg1.charCodeAt(0) === 127 || arg1.charCodeAt(0) === 8) {
				chunk = chunk.slice(0, chunk.length - 1);
				console.log(chunk);
				term.write("\b \b");
			} else {
				term.write(arg1);
				chunk += arg1;
			}
		});

		// return () =&gt; {
		// 	term.dispose()
		// }
	}, []);

	return (
		&lt;div className="App"&gt;
			&lt;header className="App-header"&gt;terminal test&lt;/header&gt;
			&lt;div id="xterm-container"&gt;&lt;/div&gt;
		&lt;/div&gt;
	);
}

export default App;

</code></pre></div>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/17426397/164627876-14341d6e-b50d-424b-b410-653b89f3c0e6.png"><img src="https://user-images.githubusercontent.com/17426397/164627876-14341d6e-b50d-424b-b410-653b89f3c0e6.png" alt="image" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/17426397/164628050-b6723bf4-9109-4a0f-bbf6-0c31d4ca903d.png"><img src="https://user-images.githubusercontent.com/17426397/164628050-b6723bf4-9109-4a0f-bbf6-0c31d4ca903d.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">code is ok with react17</p>
<p dir="auto">I'm very confused, may I get your help?</p>