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 portuguê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.

      Before your components are displayed on screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior.#thedivisor#<li class="leading-relaxed mb-1">What rendering means in React</li>
<li class="leading-relaxed mb-1">When and why React renders a component</li>
<li class="leading-relaxed mb-1">The steps involved in displaying a component on screen</li>
<li class="leading-relaxed mb-1">Why rendering does not always produce a DOM update</li>#thedivisor#Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps:#thedivisor#<li class="leading-relaxed mb-1"><strong class="font-bold">Triggering</strong> a render (delivering the guest’s order to the kitchen)</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">Rendering</strong> the component (preparing the order in the kitchen)</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">Committing</strong> to the DOM (placing the order on the table)</li>#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_render-and-commit1.png" alt="React as a server in a restaurant, fetching orders from the users and delivering them to the Component Kitchen."></div><figcaption class="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">Trigger</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_render-and-commit2.png" alt="The Card Chef gives React a fresh Card component."></div><figcaption class="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">Render</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_render-and-commit3.png" alt="React delivers the Card to the user at their table."></div><figcaption class="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">Commit</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#There are two reasons for a component to render:#thedivisor#<li class="leading-relaxed mb-1">It’s the component’s <strong class="font-bold">initial render.</strong></li>
<li class="leading-relaxed mb-1">The component’s (or one of its ancestors’) <strong class="font-bold">state has been updated.</strong></li>#thedivisor#When your app starts, you need to trigger the initial render. Frameworks and sandboxes sometimes hide this code, but it’s done by calling <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-dom/client/createRoot"><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">createRoot</code></a> with the target DOM node, and then calling 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">render</code> method with your component:#thedivisor#Try commenting out 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">root.render()</code> call and see the component disappear!