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 inglê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#In the above example, the problem was that the component changed a <em>preexisting</em> variable while rendering. This is often called a <strong class="font-bold">“mutation”</strong> to make it sound a bit scarier. Pure functions don’t mutate variables outside of the function’s scope or objects that were created before the call—that makes them impure!#thedivisor#However, <strong class="font-bold">it’s completely fine to change variables and objects that you’ve <em>just</em> created while rendering.</strong> In this example, you create an <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">[]</code> array, assign it to a <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">cups</code> variable, and then <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">push</code> a dozen cups into it:#thedivisor#If the <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">cups</code> variable or the <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">[]</code> array were created outside the <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">TeaGathering</code> function, this would be a huge problem! You would be changing a <em>preexisting</em> object by pushing items into that array.#thedivisor#However, it’s fine because you’ve created them <em>during the same render</em>, inside <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">TeaGathering</code>. No code outside 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">TeaGathering</code> will ever know that this happened. This is called <strong class="font-bold">“local mutation”</strong>—it’s like your component’s little secret.#thedivisor#While functional programming relies heavily on purity, at some point, somewhere, <em>something</em> has to change. That’s kind of the point of programming! These changes—updating the screen, starting an animation, changing the data—are called <strong class="font-bold">side effects.</strong> They’re things that happen <em>“on the side”</em>, not during rendering.#thedivisor#In React, <strong class="font-bold">side effects usually belong inside <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/responding-to-events">event handlers.</a></strong> Event handlers are functions that React runs when you perform some action—for example, when you click a button. Even though event handlers are defined <em>inside</em> your component, they don’t run <em>during</em> rendering! <strong class="font-bold">So event handlers don’t need to be pure.</strong>#thedivisor#If you’ve exhausted all other options and can’t find the right event handler for your side effect, you can still attach it to your returned JSX with a <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="/reference/react/useEffect"><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">useEffect</code></a> call in your component. This tells React to execute it later, after rendering, when side effects are allowed. <strong class="font-bold">However, this approach should be your last resort.</strong>#thedivisor#When possible, try to express your logic with rendering alone. You’ll be surprised how far this can take you!#thedivisor#Writing pure functions takes some habit and discipline. But it also unlocks marvelous opportunities:#thedivisor#<li class="leading-relaxed mb-1">Your components could run in a different environment—for example, on the server! Since they return the same result for the same inputs, one component can serve many user requests.</li>
<li class="leading-relaxed mb-1">You can improve performance by <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="/reference/react/memo">skipping rendering</a> components whose inputs have not changed. This is safe because pure functions always return the same results, so they are safe to cache.</li>
<li class="leading-relaxed mb-1">If some data changes in the middle of rendering a deep component tree, React can restart rendering without wasting time to finish the outdated render. Purity makes it safe to stop calculating at any time.</li>