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.

      #thedivisor#You might have noticed that 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> call does not receive any information about <em>which</em> state variable it refers to. There is no “identifier” that is passed 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">useState</code>, so how does it know which of the state variables to return? Does it rely on some magic like parsing your functions? The answer is no.#thedivisor#Instead, to enable their concise syntax, Hooks <strong class="font-bold">rely on a stable call order on every render of the same component.</strong> This works well in practice because if you follow the rule above (“only call Hooks at the top level”), Hooks will always be called in the same order. Additionally, a <a href="https://www.npmjs.com/package/eslint-plugin-react-hooks" target="_blank" rel="nofollow noopener noreferrer" 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">linter plugin</a> catches most mistakes.#thedivisor#Internally, React holds an array of state pairs for every component. It also maintains the current pair index, which is set 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">0</code> before rendering. Each time you call <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>, React gives you the next state pair and increments the index. You can read more about this mechanism in <a href="https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e" target="_blank" rel="nofollow noopener noreferrer" 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">React Hooks: Not Magic, Just Arrays.</a>#thedivisor#This example <strong class="font-bold">doesn’t use React</strong> but it gives you an idea of how <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> works internally:#thedivisor#You don’t have to understand it to use React, but you might find this a helpful mental model.#thedivisor#State is local to a component instance on the screen. In other words, <strong class="font-bold">if you render the same component twice, each copy will have completely isolated state!</strong> Changing one of them will not affect the other.#thedivisor#In this example, 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">Gallery</code> component from earlier is rendered twice with no changes to its logic. Try clicking the buttons inside each of the galleries. Notice that their state is independent:#thedivisor#This is what makes state different from regular variables that you might declare at the top of your module. State is not tied to a particular function call or a place in the code, but it’s “local” to the specific place on the screen. You rendered two <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;Gallery /&gt;</code> components, so their state is stored separately.#thedivisor#Also notice how 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">Page</code> component doesn’t “know” anything about 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">Gallery</code> state or even whether it has any. Unlike props, <strong class="font-bold">state is fully private to the component declaring it.</strong> The parent component can’t change it. This lets you add state to any component or remove it without impacting the rest of the components.#thedivisor#What if you wanted both galleries to keep their states in sync? The right way to do it in React is to <em>remove</em> state from child components and add it to their closest shared parent. The next few pages will focus on organizing state of a single component, but we will return to this topic in <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/sharing-state-between-components">Sharing State Between Components.</a>