✳flâneur — a map of the web's best reading

Queueing a Series of State Updates – React

react.dev · 1,967 words · saved by 1 readers

Setting a state variable will queue another render. But sometimes you might want to perform multiple operations on the value before queueing the next render. To do this, it helps to understand how React batches state updates. You might expect that clicking the “+3” button will increment the counter three times because it calls setNumber(number + 1) three times: However, as you might recall from the previous section, each render’s state values are fixed, so the value of number inside the first render’s event handler is always 0, no matter how many times you call setNumber(1): But there is one other factor at play here. React waits until all code in the event handlers has run before processing your state updates. This is why the re-render only happens after all these setNumber() calls. This might remind you of a waiter taking an order at the restaurant. A waiter doesn’t run to the kitchen at the mention of your first dish! Instead, they let you finish your order, let you make changes to

Learn React Adding Interactivity Copy page Copy Queueing a Series of State Updates Setting a state variable will queue another render. But sometimes you might want to perform multiple operations on the value before queueing the next render. To do this, it helps to understand how React batches state updates. You will learn What “batching” is and how React uses it to process multiple state updates How to apply several updates to the same state variable in a row React batches state updates You might expect that clicking the “+3” button will increment the counter three times because it calls setNu

Explore this link on the map →

saved by

related reading