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#This component is reading and writing a <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">guest</code> variable declared outside of it. This means that <strong class="font-bold">calling this component multiple times will produce different JSX!</strong> And what’s more, if <em>other</em> components read <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">guest</code>, they will produce different JSX, too, depending on when they were rendered! That’s not predictable.#thedivisor#Going back to our formula <span style="font-family:STIXGeneral-Regular, Georgia, serif;font-size:1.2rem"><span style="font-family:STIXGeneral-Italic, Georgia, serif;font-size:1.2rem">y</span> = 2<span style="font-family:STIXGeneral-Italic, Georgia, serif;font-size:1.2rem">x</span></span>, now even if <span style="font-family:STIXGeneral-Regular, Georgia, serif;font-size:1.2rem"><span style="font-family:STIXGeneral-Italic, Georgia, serif;font-size:1.2rem">x</span> = 2</span>, we cannot trust that <span style="font-family:STIXGeneral-Regular, Georgia, serif;font-size:1.2rem"><span style="font-family:STIXGeneral-Italic, Georgia, serif;font-size:1.2rem">y</span> = 4</span>. Our tests could fail, our users would be baffled, planes would fall out of the sky—you can see how this would lead to confusing bugs!#thedivisor#You can fix this component by <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/passing-props-to-a-component">passing <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">guest</code> as a prop instead</a>:#thedivisor#Now your component is pure, as the JSX it returns only depends on 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">guest</code> prop.#thedivisor#In general, you should not expect your components to be rendered in any particular order. It doesn’t matter if you call <span style="font-family:STIXGeneral-Regular, Georgia, serif;font-size:1.2rem"><span style="font-family:STIXGeneral-Italic, Georgia, serif;font-size:1.2rem">y</span> = 2<span style="font-family:STIXGeneral-Italic, Georgia, serif;font-size:1.2rem">x</span></span> before or after <span style="font-family:STIXGeneral-Regular, Georgia, serif;font-size:1.2rem"><span style="font-family:STIXGeneral-Italic, Georgia, serif;font-size:1.2rem">y</span> = 5<span style="font-family:STIXGeneral-Italic, Georgia, serif;font-size:1.2rem">x</span></span>: both formulas will resolve independently of each other. In the same way, each component should only “think for itself”, and not attempt to coordinate with or depend upon others during rendering. Rendering is like a school exam: each component should calculate JSX on their own!#thedivisor#Although you might not have used them all yet, in React there are three kinds of inputs that you can read while rendering: <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/passing-props-to-a-component">props</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/state-a-components-memory">state</a>, and <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/passing-data-deeply-with-context">context.</a> You should always treat these inputs as read-only.#thedivisor#When you want to <em>change</em> something in response to user input, you should <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-a-components-memory">set state</a> instead of writing to a variable. You should never change preexisting variables or objects while your component is rendering.#thedivisor#React offers a “Strict Mode” in which it calls each component’s function twice during development. <strong class="font-bold">By calling the component functions twice, Strict Mode helps find components that break these rules.</strong>#thedivisor#Notice how the original example displayed “Guest #2”, “Guest #4”, and “Guest #6” instead of “Guest #1”, “Guest #2”, and “Guest #3”. The original function was impure, so calling it twice broke it. But the fixed pure version works even if the function is called twice every time. <strong class="font-bold">Pure functions only calculate, so calling them twice won’t change anything</strong>—just like calling <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">double(2)</code> twice doesn’t change what’s returned, and solving <span style="font-family:STIXGeneral-Regular, Georgia, serif;font-size:1.2rem"><span style="font-family:STIXGeneral-Italic, Georgia, serif;font-size:1.2rem">y</span> = 2<span style="font-family:STIXGeneral-Italic, Georgia, serif;font-size:1.2rem">x</span></span> twice doesn’t change what <span style="font-family:STIXGeneral-Italic, Georgia, serif;font-size:1.2rem">y</span> is. Same inputs, same outputs. Always.#thedivisor#Strict Mode has no effect in production, so it won’t slow down the app for your users. To opt into Strict Mode, you can wrap your root component into <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;React.StrictMode&gt;</code>. Some frameworks do this by default.