How to use the react-dom.createRoot function in react-dom

import React from 'react';
import {
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
  // @ts-ignore
  createRoot,
} from 'react-dom';

import App from './App';

const ele = document.getElementById('app');
if (!ele) throw new Error('no app');
createRoot(ele).render(React.createElement(App));

function renderReactElement(reactEl, domEl) {
  // mark start of hydrate/render
  if (SUPPORTS_PERFORMANCE_USER_TIMING) {
    performance.mark('beforeRender')
  }

  if (process.env.__NEXT_REACT_MODE !== 'legacy') {
    let callback = markRenderComplete
    if (!reactRoot) {
      const opts = { hydrate: true }
      reactRoot =
        process.env.__NEXT_REACT_MODE === 'concurrent'
          ? ReactDOM.createRoot(domEl, opts)
          : ReactDOM.createBlockingRoot(domEl, opts)
      callback = markHydrateComplete
    }
    reactRoot.render(reactEl, callback)
  } else {
    // The check for `.hydrate` is there to support React alternatives like preact
    if (isInitialRender) {
      ReactDOM.hydrate(reactEl, domEl, markHydrateComplete)
      isInitialRender = false
    } else {
      ReactDOM.render(reactEl, domEl, markRenderComplete)
    }
  }

  if (onPerfEntry && SUPPORTS_PERFORMANCE_USER_TIMING) {
    if (!(PerformanceObserver in window)) {

import * as React from 'react';
import {
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
  // @ts-ignore
  createRoot,
} from 'react-dom';

import App from './App';

createRoot(document.getElementById('app')).render(React.createElement(App));

import React from 'react';
import {
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
  // @ts-ignore
  createRoot,
} from 'react-dom';

import App from './App';

const ele = document.getElementById('app');
if (!ele) throw new Error('no app');
createRoot(ele).render(React.createElement(App));

import React from 'react';
import ReactDOM from 'react-dom';

import './index.scss';

import App from './App';

const mode = window.localStorage.getItem('mode');
if (!mode || mode === 'sync') {
  // Synchronous
  ReactDOM.render(, document.getElementById('root'));
} else {
  // Concurrent
  ReactDOM.createRoot(document.getElementById('root')).render();
}

const useFetch = createUseFetch(fetchFunc, '1');

const Main = () => {
  const { result, refetch } = useFetch();
  return ;
};

const App = () => (
   <h1>{error.message}</h1>}&gt;
    Loading...}&gt;
      <main>
    
  
);

ReactDOM.createRoot(document.getElementById('app')).render();
</main>

loading...}>
            {movieLoaders ? (
              
            ) : (
              
            )}
          
        
      
    
  );
}

ReactDOM.createRoot(document.getElementById('root')).render();

componentDidMount() {
    spin("List.componentDidMount");
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    spin("List.getSnapshotBeforeUpdate");
    return {};
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    spin("List.componentDidUpdate");
  }
}

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(
  
    
    
  
);

const render = (isConcurrent: boolean, switchConcurrency: (val: boolean) => void) => {
  const rootEl = document.getElementById('root');
  if (rootEl) {
    ReactDOM.unmountComponentAtNode(rootEl);
  }

  if (isConcurrent) {
    ReactDOM.createRoot(rootEl).render();
  } else {
    ReactDOM.render(, rootEl);
  }
};

import React from 'react';
import {createRoot} from 'react-dom';

import App from './components/App';

let root = createRoot(document, {hydrate: true});
root.render();