I have this Codesandbox (press CMD+S to save it to see the alert):
<code>import { createRoot } from "react-dom/client";
import React from "react";
import { flushSync } from "react-dom";
function App() {
const [text, setText] = React.useState("Hello world!");
React.useEffect(() => {
setText("Async world!");
}, []);
return text;
}
const div = document.getElementById("root");
const root = createRoot(div);
flushSync(() => root.render(<App />));
alert(div.innerHTML);
</code>
<code>import { createRoot } from "react-dom/client";
import React from "react";
import { flushSync } from "react-dom";
function App() {
const [text, setText] = React.useState("Hello world!");
React.useEffect(() => {
setText("Async world!");
}, []);
return text;
}
const div = document.getElementById("root");
const root = createRoot(div);
flushSync(() => root.render(<App />));
alert(div.innerHTML);
</code>
import { createRoot } from "react-dom/client";
import React from "react";
import { flushSync } from "react-dom";
function App() {
const [text, setText] = React.useState("Hello world!");
React.useEffect(() => {
setText("Async world!");
}, []);
return text;
}
const div = document.getElementById("root");
const root = createRoot(div);
flushSync(() => root.render(<App />));
alert(div.innerHTML);
It alerts Hello world!, when it should render Async world! in my opinion.
How do you get React to “render to string” a tree of nested elements which have many useEffect async calls, which themselves may wait a few seconds or do some clunky re-rendering before things finally settle down and are “fully finished rendering”?
Is there something like flush({ waitUntil: 'allUseEffectsAreRun' }, () => root.render(<App />), or generally how should I try and accomplish this?
I am trying to build an SVG editor, and the SVG parent component has a useEffect hook to calculate the viewBox properly. I then want to render the SVG and child SVG elements to a string, to copy/paste.