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.

      #thedivisor#<li class="leading-relaxed mb-1">React calls your function again.</li>
<li class="leading-relaxed mb-1">Your function returns a new JSX snapshot.</li>
<li class="leading-relaxed mb-1">React then updates the screen to match the snapshot your function returned.</li>#thedivisor#<li class="flex-1"><figure><div class="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4"><img class="text-primary" src="/images/docs/illustrations/i_render1.png"></div><figcaption class="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">React executing the function</figcaption></figure></li><li class="flex-1"><figure><div class="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4"><img class="text-primary" src="/images/docs/illustrations/i_render2.png"></div><figcaption class="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">Calculating the snapshot</figcaption></figure></li><li class="flex-1"><figure><div class="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4"><img class="text-primary" src="/images/docs/illustrations/i_render3.png"></div><figcaption class="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">Updating the DOM tree</figcaption></figure></li>#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#As a component’s memory, state is not like a regular variable that disappears after your function returns. State actually “lives” in React itself—as if on a shelf!—outside of your function. When React calls your component, it gives you a snapshot of the state for that particular render. Your component returns a snapshot of the UI with a fresh set of props and event handlers in its JSX, all calculated <strong class="font-bold">using the state values from that render!</strong>#thedivisor#<li class="flex-1"><figure><div class="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4"><img class="text-primary" src="/images/docs/illustrations/i_state-snapshot1.png"></div><figcaption class="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">You tell React to update the state</figcaption></figure></li><li class="flex-1"><figure><div class="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4"><img class="text-primary" src="/images/docs/illustrations/i_state-snapshot2.png"></div><figcaption class="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">React updates the state value</figcaption></figure></li><li class="flex-1"><figure><div class="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4"><img class="text-primary" src="/images/docs/illustrations/i_state-snapshot3.png"></div><figcaption class="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">React passes a snapshot of the state value into the component</figcaption></figure></li>#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#Here’s a little experiment to show you how this works. In this example, you might expect that clicking the “+3” button would 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#See what happens when you click the “+3” button:#thedivisor#Notice that <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> only increments once per click!#thedivisor#<strong class="font-bold">Setting state only changes it for the <em>next</em> render.</strong> During the first render, <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> was <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>. This is why, in <em>that render’s</em> <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">onClick</code> handler, 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> is still <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> even after <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> was called: