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.

      Components often need to change what’s on the screen as a result of an interaction. Typing into the form should update the input field, clicking “next” on an image carousel should change which image is displayed, clicking “buy” should put a product in the shopping cart. Components need to “remember” things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called <em>state</em>.#thedivisor#<li class="leading-relaxed mb-1">How to add a state variable 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"><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">useState</code></a> Hook</li>
<li class="leading-relaxed mb-1">What pair of values 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">useState</code> Hook returns</li>
<li class="leading-relaxed mb-1">How to add more than one state variable</li>
<li class="leading-relaxed mb-1">Why state is called local</li>#thedivisor#Here’s a component that renders a sculpture image. Clicking the “Next” button should show the next sculpture by changing 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">index</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">1</code>, then <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</code>, and so on. However, this <strong class="font-bold">won’t work</strong> (you can try it!):#thedivisor#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">handleClick</code> event handler is updating a local variable, <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">index</code>. But two things prevent that change from being visible:#thedivisor#<li class="leading-relaxed mb-1"><strong class="font-bold">Local variables don’t persist between renders.</strong> When React renders this component a second time, it renders it from scratch—it doesn’t consider any changes to the local variables.</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">Changes to local variables won’t trigger renders.</strong> React doesn’t realize it needs to render the component again with the new data.</li>#thedivisor#To update a component with new data, two things need to happen:#thedivisor#<li class="leading-relaxed mb-1"><strong class="font-bold">Retain</strong> the data between renders.</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">Trigger</strong> React to render the component with new data (re-rendering).</li>#thedivisor#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"><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">useState</code></a> Hook provides those two things:#thedivisor#<li class="leading-relaxed mb-1">A <strong class="font-bold">state variable</strong> to retain the data between renders.</li>
<li class="leading-relaxed mb-1">A <strong class="font-bold">state setter function</strong> to update the variable and trigger React to render the component again.</li>#thedivisor#To add a state variable, import <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">useState</code> from React at the top of the file: