Skip to content

Commit

Permalink
unstable_batchedUpdates
Browse files Browse the repository at this point in the history
Implements batchedUpdates and exposes as unstable_batchedUpdates. All
nested synchronous updates are automatically batched.
  • Loading branch information
acdlite committed Nov 2, 2016
1 parent d153b1e commit b41883f
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 7 deletions.
4 changes: 4 additions & 0 deletions src/renderers/dom/fiber/ReactDOMFiber.js
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,10 @@ var ReactDOM = {
return DOMRenderer.findHostInstance(component);
},

unstable_batchedUpdates(fn : Function) : void {
DOMRenderer.batchedUpdates(fn);
},

};

module.exports = ReactDOM;
9 changes: 8 additions & 1 deletion src/renderers/shared/fiber/ReactFiberReconciler.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ export type Reconciler<C, I, TI> = {
updateContainer(element : ReactElement<any>, container : OpaqueNode) : void,
unmountContainer(container : OpaqueNode) : void,
performWithPriority(priorityLevel : PriorityLevel, fn : Function) : void,
batchedUpdates(fn: Function) : void,

// Used to extract the return value from the initial render. Legacy API.
getPublicRootInstance(container : OpaqueNode) : (ReactComponent<any, any, any> | TI | I | null),
Expand All @@ -78,7 +79,11 @@ export type Reconciler<C, I, TI> = {

module.exports = function<T, P, I, TI, C>(config : HostConfig<T, P, I, TI, C>) : Reconciler<C, I, TI> {

var { scheduleWork, performWithPriority } = ReactFiberScheduler(config);
var {
scheduleWork,
performWithPriority,
batchedUpdates,
} = ReactFiberScheduler(config);

return {

Expand Down Expand Up @@ -142,6 +147,8 @@ module.exports = function<T, P, I, TI, C>(config : HostConfig<T, P, I, TI, C>) :

performWithPriority,

batchedUpdates,

getPublicRootInstance(container : OpaqueNode) : (ReactComponent<any, any, any> | I | TI | null) {
const root : FiberRoot = (container.stateNode : any);
const containerFiber = root.current;
Expand Down
22 changes: 16 additions & 6 deletions src/renderers/shared/fiber/ReactFiberScheduler.js
Original file line number Diff line number Diff line change
Expand Up @@ -508,12 +508,10 @@ module.exports = function<T, P, I, TI, C>(config : HostConfig<T, P, I, TI, C>) {
}

function performSynchronousWork() {
if (useSyncScheduling) {
// Start batching updates
shouldBatchUpdates = true;
}
performAndHandleErrors(performSynchronousWorkUnsafe);
shouldBatchUpdates = false;
// All nested updates are batched
batchedUpdates(() => {
performAndHandleErrors(performSynchronousWorkUnsafe);
});
}

function scheduleSynchronousWork(root : FiberRoot) {
Expand All @@ -534,6 +532,7 @@ module.exports = function<T, P, I, TI, C>(config : HostConfig<T, P, I, TI, C>) {
lastScheduledRoot = root;

if (!shouldBatchUpdates) {
// Unless in batched mode, perform work immediately
performSynchronousWork();
}
}
Expand Down Expand Up @@ -690,9 +689,20 @@ module.exports = function<T, P, I, TI, C>(config : HostConfig<T, P, I, TI, C>) {
}
}

function batchedUpdates(fn: Function) {
const prev = shouldBatchUpdates;
shouldBatchUpdates = true;
try {
fn();
} finally {
shouldBatchUpdates = prev;
}
}

return {
scheduleWork: scheduleWork,
scheduleDeferredWork: scheduleDeferredWork,
performWithPriority: performWithPriority,
batchedUpdates: batchedUpdates,
};
};

4 comments on commit b41883f

@TravnikovDev
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it make sense to use unstable_batchedUpdates now in 2019?

@ashish-r
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unstable even in 2020? πŸ˜•

@gaearon
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's fine to use if you want.

@ashish-r
Copy link

@ashish-r ashish-r commented on b41883f Sep 1, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @gaearon , I wanted to use the batch api of react-redux. Though we can have a common action for multiple reducer functions, at times batch API can come handy.

Please sign in to comment.