Rescreva essa parte da string com as seguintes condições:
      1. Não elimine NENHUMA informação dada no artigo.
      2. Termos, variáveis, expressões ou referências devem ser SEMPRE mantidos em inglês.
      3. Apenas transcreva o artigo para um português mais simples, tornando ele mais literal e direto, sem alterar o contexto.
      4. Não remova as tags HTML e nem os "#thedivisor#".
      5. Você deve me enviar sua resposta em texto puro, sem markdown.

      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.#thedivisor#<li class="leading-relaxed mb-1">What “batching” is and how React uses it to process multiple state updates</li>
<li class="leading-relaxed mb-1">How to apply several updates to the same state variable in a row</li>#thedivisor#You might expect that clicking the “+3” button will increment the counter three times because it calls <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">setNumber(number + 1)</code> three times:#thedivisor#However, as you might recall from the previous section, <a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time">each render’s state values are fixed</a>, so the value of <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">number</code> inside the first render’s event handler is always <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">0</code>, no matter how many times you call <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">setNumber(1)</code>:#thedivisor#But there is one other factor at play here. <strong class="font-bold">React waits until <em>all</em> code in the event handlers has run before processing your state updates.</strong> This is why the re-render only happens <em>after</em> all these <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">setNumber()</code> calls.#thedivisor#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 it, and even take orders from other people at the table.#thedivisor#<cite>Illustrated by<!-- --> <a target="_blank" rel="noreferrer" class="text-link dark:text-link-dark" href="https://nearestnabors.com/">Rachel Lee Nabors</a></cite>#thedivisor#This lets you update multiple state variables—even from multiple components—without triggering too many <a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="/learn/render-and-commit#re-renders-when-state-updates">re-renders.</a> But this also means that the UI won’t be updated until <em>after</em> your event handler, and any code in it, completes. This behavior, also known as <strong class="font-bold">batching,</strong> makes your React app run much faster. It also avoids dealing with confusing “half-finished” renders where only some of the variables have been updated.#thedivisor#<strong class="font-bold">React does not batch across <em>multiple</em> intentional events like clicks</strong>—each click is handled separately. Rest assured that React only does batching when it’s generally safe to do. This ensures that, for example, if the first button click disables a form, the second click would not submit it again.#thedivisor#It is an uncommon use case, but if you would like to update the same state variable multiple times before the next render, instead of passing the <em>next state value</em> like <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">setNumber(number + 1)</code>, you can pass a <em>function</em> that calculates the next state based on the previous one in the queue, like <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">setNumber(n =&gt; n + 1)</code>. It is a way to tell React to “do something with the state value” instead of just replacing it.