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.

      Components often need to change what is shown on the screen because of an interaction. Typing into the form should update the input field, clicking “next” on an image carousel should change which image is shown, and clicking “buy” should add a product to the shopping cart. Components need to “remember” things: the current input value, the current image, and the shopping cart. In React, this kind of memory specific to components 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 is a component that shows a sculpture image. Clicking the “Next” button should display 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 forth. 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 reasons stop that change from being shown:#thedivisor#<li class="leading-relaxed mb-1"><strong class="font-bold">Local variables don’t last between renders.</strong> When React renders this component again, it renders it from the beginning—it doesn’t look at any changes to the local variables.</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">Changes to local variables won’t cause renders.</strong> React doesn’t see that 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">Keep</strong> the data between renders.</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">Cause</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 keep 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 cause 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: