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#If we made this into a JavaScript function, it would look like this:#thedivisor#In the above 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">double</code> is a <strong class="font-bold">pure function.</strong> If you pass it <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">3</code>, it will return <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">6</code>. Always.#thedivisor#React is designed around this concept. <strong class="font-bold">React assumes that every component you write is a pure function.</strong> This means that React components you write must always return the same JSX given the same inputs:#thedivisor#When you pass <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">drinkers={2}</code> to <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">Recipe</code>, it will return JSX containing <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">2 cups of water</code>. Always.#thedivisor#If you pass <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">drinkers={4}</code>, it will return JSX containing <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">4 cups of water</code>. Always.#thedivisor#Just like a math formula.#thedivisor#You could think of your components as recipes: if you follow them and don’t introduce new ingredients during the cooking process, you will get the same dish every time. That “dish” is the JSX that the component serves to React to <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/render-and-commit">render.</a>#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#React’s rendering process must always be pure. Components should only <em>return</em> their JSX, and not <em>change</em> any objects or variables that existed before rendering—that would make them impure!#thedivisor#Here is a component that breaks this rule: