Migrate ReactDOM.render with async callback to createRoot()

Question

Does anyone know what is the exact equivalent of this code for React 18, what happens with the async part?

ReactDOM.render(chart, container, async () => {
//code that makes some chart cells styling and adds cells to a worksheet via exceljs
})

Answer 1

For my case I had to create a list that stores promises when processing the rows/cells. Also, an innerCallback function is created and passed to the corresponding JSX component and called inside a useEffect of the component. When the component is rendered => the callback function is called by the useEffect, the idea is that it later calls another function to resolve the promise, this function is called last inside the innerCallback function block. So, later, when all promises are resolved, the ExcelJS.Buffer is called, and the file is downloaded.

Steps:

1. Create a promiseList
2. Create the innerCallback function (in my case this function processes the rows)
3. Create the resolvePromiseFromOutside function, this function must be called inside the innerCallback block after the data processing
4. Pass the innerCallback function to the corresponding JSX component and call it inside the component useEffect()
5. Use

createRoot(container).render(element)

6. Store the promise inside the promiseList
7. Use

.then(() => {Promise.all(promiseList).then(() => {//your final code goes here, in my case I am using the ExcelJS.Buffer and storing a file :) })}) 

Seems weird, but works fine!