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#But unlike a regular mutation, it doesn’t overwrite the past state!#thedivisor#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">draft</code> provided by Immer is a special type of object, called a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy" target="_blank" rel="nofollow noopener noreferrer" 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">Proxy</a>, that “records” what you do with it. This is why you can mutate it freely as much as you like! Under the hood, Immer figures out which parts of 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">draft</code> have been changed, and produces a completely new object that contains your edits.#thedivisor#To try Immer:#thedivisor#<li class="leading-relaxed mb-1">Run <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">npm install use-immer</code> to add Immer as a dependency</li>
<li class="leading-relaxed mb-1">Then 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">import { useState } from 'react'</code> 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">import { useImmer } from 'use-immer'</code></li>#thedivisor#Here is the above example converted to Immer:#thedivisor#Notice how much more concise the event handlers have become. You can mix and match <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">useState</code> and <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">useImmer</code> in a single component as much as you like. Immer is a great way to keep the update handlers concise, especially if there’s nesting in your state, and copying objects leads to repetitive code.#thedivisor#There are a few reasons:#thedivisor#<li class="leading-relaxed mb-1"><strong class="font-bold">Debugging:</strong> If you use <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">console.log</code> and don’t mutate state, your past logs won’t get clobbered by the more recent state changes. So you can clearly see how state has changed between renders.</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">Optimizations:</strong> Common React <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">optimization strategies</a> rely on skipping work if previous props or state are the same as the next ones. If you never mutate state, it is very fast to check whether there were any changes. If <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">prevObj === obj</code>, you can be sure that nothing could have changed inside of it.</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">New Features:</strong> The new React features we’re building rely on state being <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">treated like a snapshot.</a> If you’re mutating past versions of state, that may prevent you from using the new features.</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">Requirement Changes:</strong> Some application features, like implementing Undo/Redo, showing a history of changes, or letting the user reset a form to earlier values, are easier to do when nothing is mutated. This is because you can keep past copies of state in memory, and reuse them when appropriate. If you start with a mutative approach, features like this can be difficult to add later on.</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">Simpler Implementation:</strong> Because React does not rely on mutation, it does not need to do anything special with your objects. It does not need to hijack their properties, always wrap them into Proxies, or do other work at initialization as many “reactive” solutions do. This is also why React lets you put any object into state—no matter how large—without additional performance or correctness pitfalls.</li>#thedivisor#In practice, you can often “get away” with mutating state in React, but we strongly advise you not to do that so that you can use new React features developed with this approach in mind. Future contributors and perhaps even your future self will thank you!#thedivisor#<li class="leading-relaxed mb-1">Treat all state in React as immutable.</li>
<li class="leading-relaxed mb-1">When you store objects in state, mutating them will not trigger renders and will change the state in previous render “snapshots”.</li>
<li class="leading-relaxed mb-1">Instead of mutating an object, create a <em>new</em> version of it, and trigger a re-render by setting state to it.</li>
<li class="leading-relaxed mb-1">You can use 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">{...obj, something: 'newValue'}</code> object spread syntax to create copies of objects.</li>
<li class="leading-relaxed mb-1">Spread syntax is shallow: it only copies one level deep.</li>
<li class="leading-relaxed mb-1">To update a nested object, you need to create copies all the way up from the place you’re updating.</li>
<li class="leading-relaxed mb-1">To reduce repetitive copying code, use Immer.</li>