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#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> function does not get any information about <em>which</em> state variable it refers to. There is no “identifier” sent 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 state variable to return? Does it rely on some magic like reading your functions? The answer is no.#thedivisor#Instead, to support their short syntax, Hooks <strong class="font-bold">depend on a stable order of calls on every render of the same component.</strong> This works well because if you follow the rule (“only call Hooks at the top level”), Hooks will always be called in the same order. Also, 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> finds most errors.#thedivisor#Internally, React keeps an array of state pairs for each component. It also tracks 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. Every 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 increases the index. You can learn more about this process 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 shows 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 need to understand it to use React, but you might find this a useful way to think about it.#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 instance will have completely separate state!</strong> Changing one instance 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 before is shown twice without any changes to its logic. Try clicking the buttons inside each gallery. Notice how 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 linked to a specific function call or location in the code, but it’s “local” to the specific spot 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 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">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 if it even has any. Unlike props, <strong class="font-bold">state is fully private to the component that creates it.</strong> The parent component can’t change it. This allows you to add state to any component or remove it without affecting the other components.#thedivisor#What if you want both galleries to keep their states in sync? The correct way to do this 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 the 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>