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#Once the component has been initially rendered, you can trigger further renders by updating its state with the <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/useState#setstate"><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">set</code> function.</a> Updating your component’s state automatically queues a render. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.)#thedivisor#<li class="flex-1"><figure><div class="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4"><img class="text-primary" src="/images/docs/illustrations/i_rerender1.png" alt="React as a server in a restaurant, serving a Card UI to the user, represented as a patron with a cursor for their head. They patron expresses they want a pink card, not a black one!"></div><figcaption class="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">State update...</figcaption></figure></li><li class="flex-1"><figure><div class="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4"><img class="text-primary" src="/images/docs/illustrations/i_rerender2.png" alt="React returns to the Component Kitchen and tells the Card Chef they need a pink Card."></div><figcaption class="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">...triggers...</figcaption></figure></li><li class="flex-1"><figure><div class="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4"><img class="text-primary" src="/images/docs/illustrations/i_rerender3.png" alt="The Card Chef gives React the pink Card."></div><figcaption class="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">...render!</figcaption></figure></li>#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#After you trigger a render, React calls your components to figure out what to display on screen. <strong class="font-bold">“Rendering” is React calling your components.</strong>#thedivisor#<li class="leading-relaxed mb-1"><strong class="font-bold">On initial render,</strong> React will call the root component.</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">For subsequent renders,</strong> React will call the function component whose state update triggered the render.</li>#thedivisor#This process is recursive: if the updated component returns some other component, React will render <em>that</em> component next, and if that component also returns something, it will render <em>that</em> component next, and so on. The process will continue until there are no more nested components and React knows exactly what should be displayed on screen.#thedivisor#In the following example, React will call <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">Gallery()</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">Image()</code> several times:#thedivisor#<li class="leading-relaxed mb-1"><strong class="font-bold">During the initial render,</strong> React will <a href="https://developer.mozilla.org/docs/Web/API/Document/createElement" 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">create the DOM nodes</a> for <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;section&gt;</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">&lt;h1&gt;</code>, and three <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;img&gt;</code> tags.</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">During a re-render,</strong> React will calculate which of their properties, if any, have changed since the previous render. It won’t do anything with that information until the next step, the commit phase.</li>#thedivisor#Rendering must always be 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="/learn/keeping-components-pure">pure calculation</a>:#thedivisor#<li class="leading-relaxed mb-1"><strong class="font-bold">Same inputs, same output.</strong> Given the same inputs, a component should always return the same JSX. (When someone orders a salad with tomatoes, they should not receive a salad with onions!)</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">It minds its own business.</strong> It should not change any objects or variables that existed before rendering. (One order should not change anyone else’s order.)</li>