Understanding FlushSync In React Codebases
TipTap's ReactRenderer uses `flushSync` to force DOM updates synchronously, fixing a cursor positioning issue on first render. `flushSync` is uncommon and can hurt performance.
In this article, we will review a code snippet from TipTap source code.
As I was reading through the file, ReactRenderer.tsx, I saw a function named flushSync in the constructor. This below code snippet is written inside constructor.
if (this.editor.isInitialized) {
// On first render, we need to flush the render synchronously
// Renders afterwards can be async, but this fixes a cursor positioning issue
flushSync(() => {
this.render()
})
} else {
this.render()
}
constructor
/**
* Immediately creates element and renders the provided React...