Batching State Changes

When updating state react creates a queue. This allows us to make multiple changes to state before a render.

Replacer

// number = 0
setNumber(number + 1);
setNumber(number + 1);
setNumber(number + 1);

This for example will set the state of number to number + 1.

But number will not change until the runder is complete.

So the final result will be 1.

Updater functions

We can use updater functions to resolve this…

// number = 0
setNumber(n => n + 1);
setNumber(n => n + 1);
setNumber(n => n + 1);

After this number will equal 3.

What happens when you combine updaters and replacers?

// number = 0
setNumber(n => n + 1); // 1
setNumber(n => n + 1); // 2
setNumber(1); // 1

We execute FIFO, so number is equal to 1.