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.

      State variables might look like regular JavaScript variables that you can read and write to. However, state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render.#thedivisor#<li class="leading-relaxed mb-1">How setting state triggers re-renders</li>
<li class="leading-relaxed mb-1">When and how state updates</li>
<li class="leading-relaxed mb-1">Why state does not update immediately after you set it</li>
<li class="leading-relaxed mb-1">How event handlers access a “snapshot” of the state</li>#thedivisor#You might think of your user interface as changing directly in response to the user event like a click. In React, it works a little differently from this mental model. On the previous page, you saw that <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#step-1-trigger-a-render">setting state requests a re-render</a> from React. This means that for an interface to react to the event, you need to <em>update the state</em>.#thedivisor#In this example, when you press “send”, <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">setIsSent(true)</code> tells React to re-render the UI:#thedivisor#Here’s what happens when you click the button:#thedivisor#<li class="leading-relaxed mb-1">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">onSubmit</code> event handler executes.</li>
<li class="leading-relaxed mb-1"><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">setIsSent(true)</code> sets <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">isSent</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">true</code> and queues a new render.</li>
<li class="leading-relaxed mb-1">React re-renders the component according to the new <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">isSent</code> value.</li>#thedivisor#Let’s take a closer look at the relationship between state and rendering.#thedivisor#<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#step-2-react-renders-your-components">“Rendering”</a> means that React is calling your component, which is a function. The JSX you return from that function is like a snapshot of the UI in time. Its props, event handlers, and local variables were all calculated <strong class="font-bold">using its state at the time of the render.</strong>#thedivisor#Unlike a photograph or a movie frame, the UI “snapshot” you return is interactive. It includes logic like event handlers that specify what happens in response to inputs. React updates the screen to match this snapshot and connects the event handlers. As a result, pressing a button will trigger the click handler from your JSX.#thedivisor#When React re-renders a component: