Skip to content

Commit

Permalink
fix: move React flushSync to microtask (#3188)
Browse files Browse the repository at this point in the history
To avoid seeing the `Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.` error, we need to move the `flushSync()` code that avoids automatic batching to a microtask to not fire a lifecycle event `setState()` during rendering.

Fixes warning introduced in #2985
  • Loading branch information
sampi authored Sep 13, 2022
1 parent 1cc75c0 commit 9093cdf
Showing 1 changed file with 23 additions and 19 deletions.
42 changes: 23 additions & 19 deletions packages/react/src/ReactRenderer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,15 +78,17 @@ export class ReactRenderer<R = unknown, P = unknown> {

this.reactElement = <Component {...props } />

flushSync(() => {
if (this.editor?.contentComponent) {
this.editor.contentComponent.setState({
renderers: this.editor.contentComponent.state.renderers.set(
this.id,
this,
),
})
}
queueMicrotask(() => {
flushSync(() => {
if (this.editor?.contentComponent) {
this.editor.contentComponent.setState({
renderers: this.editor.contentComponent.state.renderers.set(
this.id,
this,
),
})
}
})
})
}

Expand All @@ -100,16 +102,18 @@ export class ReactRenderer<R = unknown, P = unknown> {
}

destroy(): void {
flushSync(() => {
if (this.editor?.contentComponent) {
const { renderers } = this.editor.contentComponent.state

renderers.delete(this.id)

this.editor.contentComponent.setState({
renderers,
})
}
queueMicrotask(() => {
flushSync(() => {
if (this.editor?.contentComponent) {
const { renderers } = this.editor.contentComponent.state

renderers.delete(this.id)

this.editor.contentComponent.setState({
renderers,
})
}
})
})
}
}

0 comments on commit 9093cdf

Please sign in to comment.