ReactDOM.render() vs createRoot().render

Hej, zgodnie z warningami ReactDOM.render() bedzie usuniete i powinienem uzywac createRoot().render(). Niestety zauwazylem jedna duza roznice miedzy tymi metodami. Mianowicie ReactDOM.render() od razu renderuje komponent do elementu dom, natomiast createRoot().render() nie (w sensie jak debuguje to po przejsciu tej linii dom nie jest zupdateowany). Moj kod:

// Dziala, `dom` od razu jest updateowany
const dom = document.createElement('div');
const content = <Content editor={editorRef.current} />;
render(content, dom);

// Nie dziala, `domNew` jest taki sam po przejsciu linii `render()`
const domNew = document.createElement('div');
const root = createRoot(domNew);
root.render(content);

Musze wyrenderowac ten komponent od razu bo inna biblioteka sobie liczy z niego wymiary itp. (i dopiero ta biblioteka dodaje ten dom do document) Co moge zrobic?

Renderowanie Reacta nie jest synchroniczne, więc nie możemy odczytać wartości od razu.

Na stackoverflow proponują coś takiego (https://stackoverflow.com/a/77681948)

createRoot(rootElement).render(<App />);
setTimeout(callback, 0)

ale możemy opakować to także w promise i korzystać przez then lub async / await

const app = new Promise((resolve) => {
  const rootElement = document.createElement('div');
  createRoot(rootElement).render(<h1>hello</h1>);

  setTimeout(() => resolve(rootElement), 0);
});

app.then((element) => {
  console.dir(element.innerHTML);
});

Jezeli problemem jest liczenie wymiarow, ostyluj ten nowo utworzony div, aby mial pozadane wymiary

Xarviel napisał(a):

Renderowanie Reacta nie jest synchroniczne, więc nie możemy odczytać wartości od razu.

Na stackoverflow proponują coś takiego (https://stackoverflow.com/a/77681948)

createRoot(rootElement).render(<App />);
setTimeout(callback, 0)

ale możemy opakować to także w promise i korzystać przez then lub async / await

const app = new Promise((resolve) => {
  const rootElement = document.createElement('div');
  createRoot(rootElement).render(<h1>hello</h1>);

  setTimeout(() => resolve(rootElement), 0);
});

app.then((element) => {
  console.dir(element.innerHTML);
});

Niestety ta metoda nie dziala. Ogolnie uzywam bibioteki tippy.js i z pewnego powodu musze nadpisac zawartosc tooltipa w metodzie onBeforeUpdate, jak nizej:

     onBeforeUpdate(instance, partialProps) {
          const dom = document.createElement('div');
          const content = <Content editor={editorRef.current} />;
          render(content, dom);

          const domNew = document.createElement('div');
          const root = createRoot(domNew);
          root.render(content);

          // Current
          const currContent = instance.props.content as HTMLDivElement;
          currContent.removeChild(currContent?.firstChild as Node);
          currContent.appendChild(dom);
        },

Ta biblioteka zaraz po wykonaniu tej metody renderuje tooltip i niestety z Twoim kodem dzieje sie to wczesniej niz nadpisanie contentu i najpierw tooltip jest pozycjonowany ze starym kontentem a potem jest nadpisywany sam content (bez pozycjonowania) i wyglada to zle. Chcialbym dalej uzywam metody ReactDOM.render() ale czy nie zostanie ona calkowicie usunieta w dalszych wersjach reacta?

Problem rozwiazany: https://stackoverflow.com/questions/71982225/react-18-how-to-force-synchronous-rendering