dillon1000/react

Commit

ReactDOM.flushControlled (#12118)

* ReactDOM.flushControlled

New API for wrapping event handlers that need to fire before React
yields to the browser. Previously we thought that flushSync was
sufficient for this use case, but it turns out that flushSync is only
safe if you're guaranteed to be at the top of the stack; that is, if
you know for sure that your event handler is not nested inside another
React event handler or lifecycle. This isn't true for cases like
el.focus, el.click, or dispatchEvent, where an event handler can be
invoked synchronously from inside an existing stack.

flushControlled has similar semantics to batchedUpdates, where if you
nest multiple batches, the work is not flushed until the end of the
outermost batch. The work is not guaranteed to synchronously flush, as
with flushSync, but it is guaranteed to flush before React yields to
the browser.

flushSync is still the preferred API in most cases, such as inside
a requestAnimationFrame callback.

* Test that flushControlled does not flush inside batchedUpdates

* Make flushControlled a void function

In the future, we may want to return a thenable work object. For now,
we'll return nothing.

* flushControlled -> unstable_flushControlled
Browse files
Changed paths4 files
First-parent comparison
M packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js ModifiedM packages/react-dom/src/client/ReactDOM.js ModifiedM packages/react-reconciler/src/ReactFiberReconciler.js ModifiedM packages/react-reconciler/src/ReactFiberScheduler.js Modified
Patch

Files changed

Rendering syntax-highlighted changes…