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#Consider a nested object structure like this:#thedivisor#If you wanted to update <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">person.artwork.city</code>, it’s clear how to do it with mutation:#thedivisor#But in React, you treat state as immutable! In order to change <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">city</code>, you would first need to produce the new <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">artwork</code> object (pre-populated with data from the previous one), and then produce the new <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">person</code> object which points at the new <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">artwork</code>:#thedivisor#Or, written as a single function call:#thedivisor#This gets a bit wordy, but it works fine for many cases:#thedivisor#An object like this appears “nested” in code:#thedivisor#However, “nesting” is an inaccurate way to think about how objects behave. When the code executes, there is no such thing as a “nested” object. You are really looking at two different objects:#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">obj1</code> object is not “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">obj2</code>. For example, <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">obj3</code> could “point” at <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">obj1</code> too:#thedivisor#If you were to mutate <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">obj3.artwork.city</code>, it would affect both <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">obj2.artwork.city</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">obj1.city</code>. This is because <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">obj3.artwork</code>, <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">obj2.artwork</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">obj1</code> are the same object. This is difficult to see when you think of objects as “nested”. Instead, they are separate objects “pointing” at each other with properties.#thedivisor#If your state is deeply nested, you might want to consider <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/choosing-the-state-structure#avoid-deeply-nested-state">flattening it.</a> But, if you don’t want to change your state structure, you might prefer a shortcut to nested spreads. <a href="https://github.com/immerjs/use-immer" 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">Immer</a> is a popular library that lets you write using the convenient but mutating syntax and takes care of producing the copies for you. With Immer, the code you write looks like you are “breaking the rules” and mutating an object: