Why does react 18 warn using createRoot inside the container?

Question

I'm using React 18 and nextjs and I made a kind of render function like this

export const showAlert = (props: AlertProps) => {
  const container = document.getElementById('alert') // it will catch <div id="alert"></div> inside _document.tsx
  if (container) {
    const root = createRoot(container)
    root.render(<Alert {...props} />)
  }
}

And I want to use this function like this

const handleClick = () => {
 if (error) {
  showAlert({
   type: "error",
   text: "Error !"
  })
 }

}

But react warn this behavior

Anyone knows why React warn using of createRoot for the render function ?

Answer 1

During runtime, createRoot should be called only once