-1

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

enter image description here

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

Lee Jongseo
  • 223
  • 3
  • 8
  • It seems that you are using the `createRoot` elsewhere. You should use it only once and provide the root already created to your function using either a prop or another kind of variable. – Stéphane Veyret Apr 09 '22 at 09:23
  • 1
    Yes you're right. It seems that createRoot must be called only once. – Lee Jongseo Apr 09 '22 at 12:07

1 Answers1

0

During runtime, createRoot should be called only once

Lee Jongseo
  • 223
  • 3
  • 8