CODEWITHSUNDEEP
reactjsformio
Lukáš Smida
Lukáš Smida

Reputation: 61

Custom component unmounting

I have a React18 project and wanted to make custom react-formio component (code below) but this.container.unmount in detachReact method shows this warning:

Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.

Is there any way to unmount the element without the warning?

export default class Grid extends ReactComponent {
  ...
  ...

  attachReact(element) {
    this.container = createRoot(element)
    return this.container.render(
      <HistoryRouter history={history}>
        <GridComponent {...{ ...this }} />
      </HistoryRouter>
    )
  }

  detachReact(element) {
    if (element) {
      this.container.unmount() // this creates the race condition warning
    }
  }
}

Upvotes: 0

Views: 494

Answers (1)

Ayoub Sayah
Ayoub Sayah

Reputation: 1

you can use setTimemout or debounce to make it asynchronous it worked for me

Upvotes: 0

Related Questions