Batching update in react-hooks

Do you want to request a feature or report a bug?

bug + improvement

What is the current behavior?

Sometimes state updates caused by multiple calls to useState setter, are not batched.

sandbox1: https://codesandbox.io/s/8yy0nw2m28 sandbox2: https://codesandbox.io/s/1498n44yr3

Step to reproduce: click on increment all text and check the console

diff:

// sandbox1
  const incAll = () => {
    console.log("set all counters");
    incA();
    incB();
  };

// sandbox2
  const incAll = () => {
    setTimeout(() => {
      console.log("set all counters");
      incA();
      incB();
    }, 100);
  };

console1:

render 
set all counters 
set counter 
set counter 
render 

console2:

render 
set all counters 
set counter 
render 
set counter 
render 

What is the expected behavior?

Render function should be called once after multiple calls of setState

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

react: 16.7.0-alpha.2

[markerikson]

This appears to be normal React behavior. It works the exact same way if you were to call setState() in a class component multiple times.

React currently will batch state updates if they’re triggered from within a React-based event, like a button click or input change. It will not batch updates if they’re triggered outside of a React event handler, like a setTimeout().

I think there’s plans long-term to always batch events, but not sure on the details.

[tqwewe]

Spent some time at work today trying to find a good solution to this. Ended up merging my two states (isAuthenticating and user) into an object to solve this but I would certainly love to see some kind of function such as useBatch(() => {}) become available to use.