diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index da5d864ab..81cb3eecc 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -1,49 +1,51 @@ --- -title: 'Referencing Values with Refs' +title: 'Referenciando valores com Refs' --- -When you want a component to "remember" some information, but you don't want that information to [trigger new renders](/learn/render-and-commit), you can use a *ref*. +Quando você quer que um componente "lembre" de alguma informação, mas você não quer que aquela informação [cause novos renders](/learn/render-and-commit), você pode usar um *ref*. + -- How to add a ref to your component -- How to update a ref's value -- How refs are different from state -- How to use refs safely +- Como adicionar um ref ao seu componente +- Como atualizar o valor de um ref +- Como refs diferenciam de state +- Como usar refs de forma segura + -## Adding a ref to your component {/*adding-a-ref-to-your-component*/} +## Adicionando um ref ao seu componente {/*adding-a-ref-to-your-component*/} -You can add a ref to your component by importing the `useRef` Hook from React: +Você pode adicionar um ref ao seu componente importando o Hook `useRef` do React: ```js import { useRef } from 'react'; ``` -Inside your component, call the `useRef` Hook and pass the initial value that you want to reference as the only argument. For example, here is a ref to the value `0`: +Dentro do seu componente, invoque o Hook `useRef` e passe o valor inicial que você quer referenciar como o único argumento. Por exemplo, aqui está um ref para o valor `0`: ```js const ref = useRef(0); ``` -`useRef` returns an object like this: +`useRef` retorna um objeto assim: ```js { - current: 0 // The value you passed to useRef + current: 0 // o valor que você passou para o useRef } ``` - + -You can access the current value of that ref through the `ref.current` property. This value is intentionally mutable, meaning you can both read and write to it. It's like a secret pocket of your component that React doesn't track. (This is what makes it an "escape hatch" from React's one-way data flow--more on that below!) +Você pode acessar o valor atual daquele ref através da propriedade `ref.current`. Esse valor é intencionalmente mutável, o que significa que você pode tanto ler quanto escrever sobre ele. É como um bolso secreto do seu componente o qual o React não rastreia. (É isso que o faz uma "saída de emergência" do fluxo de data de mão-única do React--mais sobre isso abaixo!) -Here, a button will increment `ref.current` on every click: +Aqui, um botão irá incrementar `ref.current` a cada clique: @@ -68,20 +70,21 @@ export default function Counter() { -The ref points to a number, but, like [state](/learn/state-a-components-memory), you could point to anything: a string, an object, or even a function. Unlike state, ref is a plain JavaScript object with the `current` property that you can read and modify. +O ref aponta para um número, mas, como [state](/learn/state-a-components-memory), você pode apontá-lo para qualquer coisa: uma string, um objeto, ou até mesmo uma função. Diferentemente do state, ref é um simples objeto Javascript com a propriedade `current` que você pode ler e modificar. -Note that **the component doesn't re-render with every increment.** Like state, refs are retained by React between re-renders. However, setting state re-renders a component. Changing a ref does not! +Note que **o componente não re-renderiza com cada incremento.** Assim como state, refs são retidos pelo React entre re-renderizações. Entretanto, alterar o state re-renderiza um componente. Mudar um ref não! -## Example: building a stopwatch {/*example-building-a-stopwatch*/} +## Exemplo: construindo um cronômetro {/*example-building-a-stopwatch*/} -You can combine refs and state in a single component. For example, let's make a stopwatch that the user can start or stop by pressing a button. In order to display how much time has passed since the user pressed "Start", you will need to keep track of when the Start button was pressed and what the current time is. **This information is used for rendering, so you'll keep it in state:** +Você pode combinar refs e state em um único componente. Por exemplo, vamos fazer um cronômetro que o usuário possa iniciar ou parar ao pressionar um botão. Para exibir quanto tempo passou desde que o usuário pressionou "Start", você precisará rastrear quando o botão Start foi pressionado e qual o horário atual. +**Essas informações são usadas para renderização, então as manteremos no state:** ```js const [startTime, setStartTime] = useState(null); const [now, setNow] = useState(null); ``` -When the user presses "Start", you'll use [`setInterval`](https://developer.mozilla.org/docs/Web/API/setInterval) in order to update the time every 10 milliseconds: +Quando o usuário pressionar "Start", você usará [`setInterval`](https://developer.mozilla.org/docs/Web/API/setInterval) para atualizar o tempo a cada 10 milissegundos: @@ -93,12 +96,12 @@ export default function Stopwatch() { const [now, setNow] = useState(null); function handleStart() { - // Start counting. + // Inicia contagem. setStartTime(Date.now()); setNow(Date.now()); setInterval(() => { - // Update the current time every 10ms. + // Atualizar o tempo atual a cada 10 milissegundos. setNow(Date.now()); }, 10); } @@ -121,7 +124,7 @@ export default function Stopwatch() { -When the "Stop" button is pressed, you need to cancel the existing interval so that it stops updating the `now` state variable. You can do this by calling [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval), but you need to give it the interval ID that was previously returned by the `setInterval` call when the user pressed Start. You need to keep the interval ID somewhere. **Since the interval ID is not used for rendering, you can keep it in a ref:** +Quando o botão "Stop" é pressionado, você precisará cancelar o intervalo existente de forma que ele pare de atualizar a variável `now` do state.Você pode fazer isso invocando ['clearInterval'](https://developer.mozilla.org/pt-BR/docs/Web/API/clearInterval), mas você precisará passar o ID do intervalo que foi retornado anteriormente pela invocação do `setInterval` quando o usuário pressionou Start. Você precisará gravar esse ID do intervalo em algum lugar. **Já que o ID do intervalo não é usado para renderização, você pode guardá-lo em um ref:** @@ -168,20 +171,20 @@ export default function Stopwatch() { -When a piece of information is used for rendering, keep it in state. When a piece of information is only needed by event handlers and changing it doesn't require a re-render, using a ref may be more efficient. +Quando uma informação é usada para renderização, mantenha-a no state. Quando uma informação é necessária somente por manipuladores de eventos (event handlers) e mudá-la não requer uma re-renderização, usar um ref pode ser mais eficiente. -## Differences between refs and state {/*differences-between-refs-and-state*/} +## Diferenças entre refs e state {/*differences-between-refs-and-state*/} -Perhaps you're thinking refs seem less "strict" than state—you can mutate them instead of always having to use a state setting function, for instance. But in most cases, you'll want to use state. Refs are an "escape hatch" you won't need often. Here's how state and refs compare: +Talvez você esteja pensando que refs parecem ser menos "rigorosos" que state—você pode mutá-los ao invés de sempre ter que usar uma função de definir state, por exemplo. Mas na maioria dos casos, você irá querer usar state. Refs são uma "válvula de escape" que você não precisará com frequência. Aqui uma comparação entre state e refs: | refs | state | | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -| `useRef(initialValue)` returns `{ current: initialValue }` | `useState(initialValue)` returns the current value of a state variable and a state setter function ( `[value, setValue]`) | -| Doesn't trigger re-render when you change it. | Triggers re-render when you change it. | -| Mutable—you can modify and update `current`'s value outside of the rendering process. | "Immutable"—you must use the state setting function to modify state variables to queue a re-render. | -| You shouldn't read (or write) the `current` value during rendering. | You can read state at any time. However, each render has its own [snapshot](/learn/state-as-a-snapshot) of state which does not change. +| `useRef(initialValue)` retorna `{ current: initialValue }` | `useState(initialValue)` retorna o valor atual de uma variável de state e uma função setter do state ( `[value, setValue]`) | +| Não provoca re-renderização quando alterada. | Provoca re-renderização quando alterada. | +| Mutável—você pode modificar e atualizar o valor de `current` de fora do processo de renderização. | "Imutável"—você deve usar a função de definir state para modificar variáveis de state e despachar uma re-renderização. | +| Você não deve ler (ou sobrescrever) o valor de `current` durante uma rerenderização. | Você pode ler state a qualquer momento. Entretanto, cada renderização tem seu [snapshot](/learn/state-as-a-snapshot) do state o qual não muda. -Here is a counter button that's implemented with state: +Aqui um botão contador que foi implementado com state: @@ -205,9 +208,9 @@ export default function Counter() { -Because the `count` value is displayed, it makes sense to use a state value for it. When the counter's value is set with `setCount()`, React re-renders the component and the screen updates to reflect the new count. +Como o valor `count` é exibido, faz sentido usar um valor de state para ele. Quando o valor do contador é definido com `setCount()`, React re-renderiza o componente e a tela é atualizada para refletir o novo valor. -If you tried to implement this with a ref, React would never re-render the component, so you'd never see the count change! See how clicking this button **does not update its text**: +Se você tentasse implementar isso com um ref, React nunca re-renderizaria o componente, então você nunca veria o contador mudar! Veja como, ao clicar neste botão, **seu texto não é atualizado**: @@ -218,7 +221,7 @@ export default function Counter() { let countRef = useRef(0); function handleClick() { - // This doesn't re-render the component! + // Isso não re-renderiza o componente! countRef.current = countRef.current + 1; } @@ -232,68 +235,69 @@ export default function Counter() { -This is why reading `ref.current` during render leads to unreliable code. If you need that, use state instead. +É por isso que ler `ref.current` durante a renderização leva a um código não confiável. Se você precisar disso, dê preferência ao state. -#### How does useRef work inside? {/*how-does-use-ref-work-inside*/} +#### como useRef funciona por dentro? {/*how-does-use-ref-work-inside*/} -Although both `useState` and `useRef` are provided by React, in principle `useRef` could be implemented _on top of_ `useState`. You can imagine that inside of React, `useRef` is implemented like this: +Apesar de ambos `useState` e `useRef` serem providos pelo React, em princípio `useRef` poderia ser implementado _em cima de_ `useState`. Você pode imaginar que dentro do React, `useRef` é implementado assim: ```js -// Inside of React +// Dentro do React function useRef(initialValue) { const [ref, unused] = useState({ current: initialValue }); return ref; } ``` -During the first render, `useRef` returns `{ current: initialValue }`. This object is stored by React, so during the next render the same object will be returned. Note how the state setter is unused in this example. It is unnecessary because `useRef` always needs to return the same object! +Durante a primeira renderização, `useRef` retorna `{ current: initialValue }`. Este objeto é armazenado pelo React, então durante a próxima renderização o mesmo objeto será retornado. Note como o setter do state não é utilizado neste exemplo. Ele é desnecessário porque `useRef` precisa sempre retornar o mesmo objeto! -React provides a built-in version of `useRef` because it is common enough in practice. But you can think of it as a regular state variable without a setter. If you're familiar with object-oriented programming, refs might remind you of instance fields--but instead of `this.something` you write `somethingRef.current`. +O React oferece uma versão integrada do useRef porque é algo comum na prática. No entanto, você pode pensar nele como uma variável de state normal sem um setter. Se você está familiarizado com programação orientada a objetos, refs podem te lembrar dos campos de instância -- mas em vez de `this.something` você escreve `somethingRef.current`. -## When to use refs {/*when-to-use-refs*/} +## Quando usar refs {/*when-to-use-refs*/} -Typically, you will use a ref when your component needs to "step outside" React and communicate with external APIs—often a browser API that won't impact the appearance of the component. Here are a few of these rare situations: +Normalmente, você usará um ref quando o seu componente precisa "sair" do React e se comunicar com APIs externas, frequentemente uma API do navegador que não afetará a aparência do componente. Aqui estão algumas destas situações raras: -- Storing [timeout IDs](https://developer.mozilla.org/docs/Web/API/setTimeout) -- Storing and manipulating [DOM elements](https://developer.mozilla.org/docs/Web/API/Element), which we cover on [the next page](/learn/manipulating-the-dom-with-refs) -- Storing other objects that aren't necessary to calculate the JSX. +- Armazenando IDs de [temporizadores (timeouts)](https://developer.mozilla.org/pt-BR/docs/Web/API/setTimeout) +- Armazenando e manipulando [elementos DOM](https://developer.mozilla.org/pt-BR/docs/Web/API/Element), que são abordados [na próxima página](/learn/manipulating-the-dom-with-refs) +- Armazenando outros objetos que não são necessários para calcular o JSX. -If your component needs to store some value, but it doesn't impact the rendering logic, choose refs. +Se o seu componente precisa armazenar algum valor, mas isso não afeta a lógica de renderização, escolha refs. -## Best practices for refs {/*best-practices-for-refs*/} +## Melhores práticas para refs {/*best-practices-for-refs*/} -Following these principles will make your components more predictable: +Seguir esses princípios tornará seus componentes mais previsíveis: -- **Treat refs as an escape hatch.** Refs are useful when you work with external systems or browser APIs. If much of your application logic and data flow relies on refs, you might want to rethink your approach. -- **Don't read or write `ref.current` during rendering.** If some information is needed during rendering, use [state](/learn/state-a-components-memory) instead. Since React doesn't know when `ref.current` changes, even reading it while rendering makes your component's behavior difficult to predict. (The only exception to this is code like `if (!ref.current) ref.current = new Thing()` which only sets the ref once during the first render.) +- **Trate refs como uma saída de emergência.** Refs são úteis quando você trabalha com sistemas externos ou APIs de navegador. Se grande parte da lógica da sua aplicação e fluxo de dados dependem de refs, talvez seja necessário repensar suaa abordagem. +- **Não leia nem escreva sobre `ref.current` durante a renderização.** Se alguma informação for necessária durante a renderização, use [state](/learn/state-a-components-memory). Como o React não sabe quando `ref.current` muda, até mesmo a leitura durante a renderização torna o comportamento do seu componente difícil de prever. (A única exceção a isso é código como `if (!ref.current) ref.current = new Thing()`, que define o ref apenas uma vez durante a primeira renderização.) -Limitations of React state don't apply to refs. For example, state acts like a [snapshot for every render](/learn/state-as-a-snapshot) and [doesn't update synchronously.](/learn/queueing-a-series-of-state-updates) But when you mutate the current value of a ref, it changes immediately: +As limitações do state do React não se aplicam aos refs. Por exemplo, o state age como uma [foto instantânea para cada renderização](/learn/state-as-a-snapshot) e [não atualiza de forma síncrona.](/learn/queueing-a-series-of-state-updates) Mas quando você altera o valor atual de um ref, ele muda imediatamente: ```js ref.current = 5; console.log(ref.current); // 5 ``` -This is because **the ref itself is a regular JavaScript object,** and so it behaves like one. +Isso é porque **o ref em si é um objeto JavaScript normal,** e portanto se comporta como um. -You also don't need to worry about [avoiding mutation](/learn/updating-objects-in-state) when you work with a ref. As long as the object you're mutating isn't used for rendering, React doesn't care what you do with the ref or its contents. +Você também não precisa se preocupar em [evitar a mutação](/learn/updating-objects-in-state) quando trabalha com um ref. Desde que o objeto que você está mutando não seja usado para renderização, o React não se importa com o que você faz com o ref ou seu conteúdo. -## Refs and the DOM {/*refs-and-the-dom*/} +## Refs e o DOM {/*refs-and-the-dom*/} -You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `
`, React will put the corresponding DOM element into `myRef.current`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs) +Você pode apontar um ref para qualquer valor. No entanto, o caso de uso mais comum para um ref é acessar um elemento DOM. Por exemplo, isso é útil se você deseja focar um campo de entrada (input) programaticamente. Quando você passa um ref para um atributo `ref` em JSX, como `
`, o React colocará o elemento DOM correspondente em `myRef.current`. Você pode saber mais sobre isso em [Manipulando o DOM com Refs.](/learn/manipulating-the-dom-with-refs) -- Refs are an escape hatch to hold onto values that aren't used for rendering. You won't need them often. -- A ref is a plain JavaScript object with a single property called `current`, which you can read or set. -- You can ask React to give you a ref by calling the `useRef` Hook. -- Like state, refs let you retain information between re-renders of a component. -- Unlike state, setting the ref's `current` value does not trigger a re-render. -- Don't read or write `ref.current` during rendering. This makes your component hard to predict. +- Refs são uma saída de emergência para manter valores que não são usados para renderização. Você não precisará deles com frequência. +- Um ref é um objeto JavaScript simples com uma única propriedade chamada `current`, que você pode ler ou definir. +- Você pode solicitar um ref ao React chamando o Hook `useRef`. +- Assim como o state, refs permitem que você retenha informações entre re-renderizações de um componente. +- Ao contrário do state, definir o valor `current` do ref não provoca uma re-renderização. +- Não leia nem escreva sobre `ref.current` durante a renderização. Isso torna o comportamento do seu componente difícil de prever. + @@ -301,13 +305,13 @@ You can point a ref to any value. However, the most common use case for a ref is -#### Fix a broken chat input {/*fix-a-broken-chat-input*/} +#### Consertar um input de chat quebrado {/*fix-a-broken-chat-input*/} -Type a message and click "Send". You will notice there is a three second delay before you see the "Sent!" alert. During this delay, you can see an "Undo" button. Click it. This "Undo" button is supposed to stop the "Sent!" message from appearing. It does this by calling [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout) for the timeout ID saved during `handleSend`. However, even after "Undo" is clicked, the "Sent!" message still appears. Find why it doesn't work, and fix it. +Digite uma mensagem e clique em "Send". Você perceberá que há um atraso de três segundos antes de ver o alerta "Sent!". Durante esse atraso, você pode ver um botão "Undo". Clique nele. Este botão "Undo" deve impedir que a mensagem "Sent!" apareça. Ele faz isso chamando [`clearTimeout`](https://developer.mozilla.org/pt-BR/docs/Web/API/clearTimeout) para o ID do temporizador salvo durante `handleSend`. No entanto, mesmo depois de clicar em "Undo", a mensagem "Sent!" ainda aparece. Descubra por que isso não funciona e corrija-o. -Regular variables like `let timeoutID` don't "survive" between re-renders because every render runs your component (and initializes its variables) from scratch. Should you keep the timeout ID somewhere else? +Variáveis comuns como `let timeoutID` não "sobrevivem" entre re-renderizações, porque cada re-renderização executa o seu componente (e inicializa suas variáveis) do zero. Será que você deveria manter o ID do temporizador em outro lugar? @@ -360,7 +364,7 @@ export default function Chat() { -Whenever your component re-renders (such as when you set state), all local variables get initialized from scratch. This is why you can't save the timeout ID in a local variable like `timeoutID` and then expect another event handler to "see" it in the future. Instead, store it in a ref, which React will preserve between renders. +Sempre que o seu componente re-renderiza (como quando você altera state), todas as variáveis locais são inicializadas do zero. É por isso que você não pode salvar o ID do temporizador em uma variável local como `timeoutID` e esperar que outro manipulador de eventos (event handler) o "veja" no futuro. Em vez disso, armazene-o em uma ref, que o React preservará entre as re-renderizações. @@ -412,9 +416,9 @@ export default function Chat() { -#### Fix a component failing to re-render {/*fix-a-component-failing-to-re-render*/} +#### Conserte um componente que falha ao re-renderizar {/*fix-a-component-failing-to-re-render*/} -This button is supposed to toggle between showing "On" and "Off". However, it always shows "Off". What is wrong with this code? Fix it. +Este botão deveria alternar entre mostrar "On" e "Off". No entanto, ele sempre mostra "Off". O que há de errado com este código? Corrija-o. @@ -438,7 +442,7 @@ export default function Toggle() { -In this example, the current value of a ref is used to calculate the rendering output: `{isOnRef.current ? 'On' : 'Off'}`. This is a sign that this information should not be in a ref, and should have instead been put in state. To fix it, remove the ref and use state instead: +Neste exemplo, o valor _current_ de um ref é usado para calcular a o retorno da renderização: `{isOnRef.current ? 'On' : 'Off'}`. Isso é um sinal de que essa informação não deveria estar em um ref, e em vez disso, deveria ter sido colocada no state. Para corrigir isso, remova o ref e use state em seu lugar: @@ -462,17 +466,17 @@ export default function Toggle() { -#### Fix debouncing {/*fix-debouncing*/} +#### Consertar agrupamento (debouncing) {/*fix-debouncing*/} -In this example, all button click handlers are ["debounced".](https://redd.one/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things". +Neste exemplo, todos os manipuladores de cliques dos botões estão ["agrupados" (debounced).](https://redd.one/blog/debounce-vs-throttle/) Para entender o que isso significa, clique em um dos botões. Observe como a mensagem aparece um segundo depois. Se você pressionar o botão enquanto aguarda a mensagem, o temporizador será reiniciado. Portanto, se você continuar clicando rapidamente muitas vezes no mesmo botão, a mensagem não aparecerá até um segundo *depois* de você parar de clicar. O agrupamento (debouncing) permite que você atrase alguma ação até que o usuário "pare de fazer coisas". -This example works, but not quite as intended. The buttons are not independent. To see the problem, click one of the buttons, and then immediately click another button. You'd expect that after a delay, you would see both button's messages. But only the last button's message shows up. The first button's message gets lost. +Este exemplo funciona, mas não exatamente como pretendido. Os botões não são independentes. Para ver o problema, clique em um dos botões e, imediatamente depois, clique em outro botão. Você esperaria que após um atraso, você visse as mensagens de ambos os botões. Mas apenas a mensagem do último botão aparece. A mensagem do primeiro botão se perde. -Why are the buttons interfering with each other? Find and fix the issue. +Por que os botões estão interferindo um com o outro? Encontre e corrija o problema. -The last timeout ID variable is shared between all `DebouncedButton` components. This is why clicking one button resets another button's timeout. Can you store a separate timeout ID for each button? +O último ID de temporizador (timeout) é compartilhado entre todos os componentes `DebouncedButton`. É por isso que clicar em um botão reinicia o timeout do outro botão. Você pode armazenar um ID de temporizador separado para cada botão? @@ -525,7 +529,7 @@ button { display: block; margin: 10px; } -A variable like `timeoutID` is shared between all components. This is why clicking on the second button resets the first button's pending timeout. To fix this, you can keep timeout in a ref. Each button will get its own ref, so they won't conflict with each other. Notice how clicking two buttons fast will show both messages. +Uma variável como `timeoutID` é compartilhada entre todos os componentes. É por isso que clicar no segundo botão reinicia o timeout pendente do primeiro botão. Para corrigir isso, você pode armanezar o timeout em um ref. Cada botão terá seu próprio ref, portanto, eles não entrarão em conflito entre si. Observe como clicar em dois botões rapidamente mostrará as duas mensagens. @@ -577,11 +581,11 @@ button { display: block; margin: 10px; } -#### Read the latest state {/*read-the-latest-state*/} +#### Ler o state mais recente {/*read-the-latest-state*/} -In this example, after you press "Send", there is a small delay before the message is shown. Type "hello", press Send, and then quickly edit the input again. Despite your edits, the alert would still show "hello" (which was the value of state [at the time](/learn/state-as-a-snapshot#state-over-time) the button was clicked). +Neste exemplo, após pressionar "Send", há um pequeno atraso antes que a mensagem seja exibida. Digite "hello", pressione Send e, em seguida, edite rapidamente a entrada novamente. Apesar de suas edições, o alerta ainda mostrará "hello" (que era o valor do state [naquele momento](/learn/state-as-a-snapshot#state-over-time) em que o botão foi clicado). -Usually, this behavior is what you want in an app. However, there may be occasional cases where you want some asynchronous code to read the *latest* version of some state. Can you think of a way to make the alert show the *current* input text rather than what it was at the time of the click? +Normalmente, esse comportamento é o que você deseja em um aplicativo. No entanto, pode haver situações ocasionais em que você deseja que algum código assíncrono leia a versão *mais recente* de algum estado. Você consegue pensar em uma maneira de fazer o alerta mostrar o texto de entrada *atual*, em vez do que estava no momento do clique? @@ -616,7 +620,7 @@ export default function Chat() { -State works [like a snapshot](/learn/state-as-a-snapshot), so you can't read the latest state from an asynchronous operation like a timeout. However, you can keep the latest input text in a ref. A ref is mutable, so you can read the `current` property at any time. Since the current text is also used for rendering, in this example, you will need *both* a state variable (for rendering), *and* a ref (to read it in the timeout). You will need to update the current ref value manually. +O estado funciona [como uma foto instantânea](/learn/state-as-a-snapshot), então você não pode ler o estado mais recente de uma operação assíncrona como um timeout. No entanto, você pode manter o texto de entrada mais recente em um ref. O ref é mutável, então você pode ler a propriedade `current` a qualquer momento. Como o texto atual também é usado para renderização, neste exemplo, você precisará de *ambos* uma variável de state (para a renderização) *e* um ref (para lê-lo no timeout). Você precisará atualizar o valor `current` do ref manualmente.