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#Otherwise, you can encounter confusing bugs and unpredictable behavior as your codebase grows in complexity. When developing in “Strict Mode”, React calls each component’s function twice, which can help surface mistakes caused by impure functions.#thedivisor#The default behavior of rendering all components nested within the updated component is not optimal for performance if the updated component is very high in the tree. If you run into a performance issue, there are several opt-in ways to solve it described in the <a href="https://reactjs.org/docs/optimizing-performance.html" 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">Performance</a> section. <strong class="font-bold">Don’t optimize prematurely!</strong>#thedivisor#After rendering (calling) your components, React will modify the DOM.#thedivisor#<li class="leading-relaxed mb-1"><strong class="font-bold">For the initial render,</strong> React will use the <a href="https://developer.mozilla.org/docs/Web/API/Node/appendChild" 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"><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">appendChild()</code></a> DOM API to put all the DOM nodes it has created on screen.</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">For re-renders,</strong> React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.</li>#thedivisor#<strong class="font-bold">React only changes the DOM nodes if there’s a difference between renders.</strong> For example, here is a component that re-renders with different props passed from its parent every second. Notice how you can add some text into 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">&lt;input&gt;</code>, updating its <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">value</code>, but the text doesn’t disappear when the component re-renders:#thedivisor#This works because during this last step, React only updates the content 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">&lt;h1&gt;</code> with 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">time</code>. It sees that 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">&lt;input&gt;</code> appears in the JSX in the same place as last time, so React doesn’t touch 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">&lt;input&gt;</code>—or its <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">value</code>!#thedivisor#After rendering is done and React updated the DOM, the browser will repaint the screen. Although this process is known as “browser rendering”, we’ll refer to it as “painting” to avoid confusion throughout the docs.#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#<li class="leading-relaxed mb-1">Any screen update in a React app happens in three steps:<!-- -->
<ol class="ms-6 my-3 list-decimal">
<li class="leading-relaxed mb-1">Trigger</li>
<li class="leading-relaxed mb-1">Render</li>
<li class="leading-relaxed mb-1">Commit</li>
</ol>
</li>
<li class="leading-relaxed mb-1">You can use Strict Mode to find mistakes in your components</li>
<li class="leading-relaxed mb-1">React does not touch the DOM if the rendering result is the same as last time</li>#thedivisor#<li class="leading-relaxed mb-1">Trigger</li>
<li class="leading-relaxed mb-1">Render</li>
<li class="leading-relaxed mb-1">Commit</li>