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#The problem is with this bit of code.#thedivisor#This code modifies the object assigned to <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">position</code> from <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">the previous render.</a> But without using the state setting function, React has no idea that object has changed. So React does not do anything in response. It’s like trying to change the order after you’ve already eaten the meal. While mutating state can work in some cases, we don’t recommend it. You should treat the state value you have access to in a render as read-only.#thedivisor#To actually <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#setting-state-triggers-renders">trigger a re-render</a> in this case, <strong class="font-bold">create a <em>new</em> object and pass it to the state setting function:</strong>#thedivisor#With <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">setPosition</code>, you’re telling React:#thedivisor#<li class="leading-relaxed mb-1">Replace <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">position</code> with this new object</li>
<li class="leading-relaxed mb-1">And render this component again</li>#thedivisor#Notice how the red dot now follows your pointer when you touch or hover over the preview area:#thedivisor#Code like this is a problem because it modifies an <em>existing</em> object in state:#thedivisor#But code like this is <strong class="font-bold">absolutely fine</strong> because you’re mutating a fresh object you have <em>just created</em>:#thedivisor#In fact, it is completely equivalent to writing this:#thedivisor#Mutation is only a problem when you change <em>existing</em> objects that are already in state. Mutating an object you’ve just created is okay because <em>no other code references it yet.</em> Changing it isn’t going to accidentally impact something that depends on it. This is called a “local mutation”. You can even do local mutation <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/keeping-components-pure#local-mutation-your-components-little-secret">while rendering.</a> Very convenient and completely okay!