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#Every new React feature we’re building takes advantage of purity. From data fetching to animations to performance, keeping components pure unlocks the power of the React paradigm.#thedivisor#<li class="leading-relaxed mb-1">A component must be pure, meaning:<!-- -->
<ul class="ms-6 my-3 list-disc">
<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.</li>
<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.</li>
</ul>
</li>
<li class="leading-relaxed mb-1">Rendering can happen at any time, so components should not depend on each others’ rendering sequence.</li>
<li class="leading-relaxed mb-1">You should not mutate any of the inputs that your components use for rendering. That includes props, state, and context. To update the screen, <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 mutating preexisting objects.</li>
<li class="leading-relaxed mb-1">Strive to express your component’s logic in the JSX you return. When you need to “change things”, you’ll usually want to do it in an event handler. As a last resort, you can <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">useEffect</code>.</li>
<li class="leading-relaxed mb-1">Writing pure functions takes a bit of practice, but it unlocks the power of React’s paradigm.</li>#thedivisor#<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.</li>
<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.</li>#thedivisor#This component tries to set 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;h1&gt;</code>’s CSS class 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">"night"</code> during the time from midnight to six hours in the morning, 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">"day"</code> at all other times. However, it doesn’t work. Can you fix this component?#thedivisor#You can verify whether your solution works by temporarily changing the computer’s timezone. When the current time is between midnight and six in the morning, the clock should have inverted colors!