From 1e72798d22d2991bb070ea1ed50b6013d39beaa2 Mon Sep 17 00:00:00 2001
From: Johan Santana <johancarlosst@gmail.com>
Date: Sun, 9 Oct 2022 19:21:48 -0400
Subject: [PATCH 1/5] docs: translate referencing-values-with-refs.md

---
 .../learn/referencing-values-with-refs.md     | 223 +++++++++---------
 1 file changed, 111 insertions(+), 112 deletions(-)

diff --git a/beta/src/content/learn/referencing-values-with-refs.md b/beta/src/content/learn/referencing-values-with-refs.md
index fe196493e..23191b8aa 100644
--- a/beta/src/content/learn/referencing-values-with-refs.md
+++ b/beta/src/content/learn/referencing-values-with-refs.md
@@ -1,49 +1,49 @@
 ---
-title: 'Referencing Values with Refs'
+title: 'Haciendo referencia a valores utilizando Refs'
 ---
 
 <Intro>
 
-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*.
+Cuando quieres que un componente "recuerdo" alguna información, pero no quieres que esa información [active nuevos renderizados](/learn/render-and-commit), puedes usar un *ref*.
 
 </Intro>
 
 <YouWillLearn>
 
-- 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
+- Cómo añadir un ref a tu componente
+- Cómo actualizar el valor de un ref
+- En qué se diferencian los refs y el estado
+- Cómo usar los refs de manera segura
 
 </YouWillLearn>
 
-## Adding a ref to your component {/*adding-a-ref-to-your-component*/}
+## Agregando un ref a tu componente {/*adding-a-ref-to-your-component*/}
 
-You can add a ref to your component by importing the `useRef` Hook from React:
+Puedes añadir un ref a tu componente importando el Hook `useRef` desde 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 de tu componente, llama al Hook `useRef` y pasa el valor inicial al que quieres hacer referencia como único parámetro. Por ejemplo, este es un ref con el valor `0`:
 
 ```js
 const ref = useRef(0);
 ```
 
-`useRef` returns an object like this:
+`useRef` devuelve un objeto como este:
 
 ```js
 { 
-  current: 0 // The value you passed to useRef
+  current: 0 // El valor que le pasaste al useRef
 }
 ```
 
-<Illustration src="/images/docs/illustrations/i_ref.png" alt="An arrow with 'current' written on it stuffed into a pocket with 'ref' written on it." />
+<Illustration src="/images/docs/illustrations/i_ref.png" alt="Una flecha con 'current' escrito en ella metida en un bolsillo con 'ref' escrito en el." />
 
-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!)
+Puedes acceder al valor actual de ese ref a través de la propiedad `ref.current`. Este valor es mutable intencionalmente, lo que significa que puedes tanto leer como escribir en él. Es como un bolsillo secreto de tu componente que React no puede rastrear. (Esto es lo que lo hace una "escotilla de escape" del flujo de datos de una vía de React—más sobre eso a continuación!)
 
-Here, a button will increment `ref.current` on every click:
+Aquí, un botón incrementará `ref.current` en cada clic:
 
 <Sandpack>
 
@@ -55,12 +55,12 @@ export default function Counter() {
 
   function handleClick() {
     ref.current = ref.current + 1;
-    alert('You clicked ' + ref.current + ' times!');
+    alert('Has hecho clic ' + ref.current + ' veces!');
   }
 
   return (
     <button onClick={handleClick}>
-      Click me!
+      Clic aquí!
     </button>
   );
 }
@@ -68,20 +68,20 @@ export default function Counter() {
 
 </Sandpack>
 
-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.
+El ref apunta hacia un número, pero, como [el estado](/learn/state-a-components-memory), podrías apuntar a cualquier cosa: un string, un objeto, o incluso una función. A diferencia del estado, el ref es un objeto plano de JavaScript con la propiedad `current` que puedes leer y 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!
+Fíjate como **el componente no se re-renderiza con cada incremento.** Como el estado, los refs son retenidos por React entre cada re-renderizado. Sin embargo, asignar el estado re-renderiza un componente. Cambiar un ref no!
 
-## Example: building a stopwatch {/*example-building-a-stopwatch*/}
+## Ejemplo: creando un 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:**
+Puedes combinar los refs y el estado en un solo componente. Por ejemplo, hagamos un cronómetro que el usuario pueda iniciar y detener al presionar un botón. Para poder mostrar cuánto tiempo ha pasado desde que el usuario pulsó "Iniciar", necesitarás mantener rastreado cuándo el botón de Iniciar fue presionado y cuál es el tiempo actual. **Esta información es usada para la renderización, asi que la guardala en el estado:**
 
 ```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:
+Cuando el usuario presione "Iniciar", usarás [`setInterval`](https://developer.mozilla.org/docs/Web/API/setInterval) para poder actualizar el tiempo cada 10 milisegundos:
 
 <Sandpack>
 
@@ -93,12 +93,12 @@ export default function Stopwatch() {
   const [now, setNow] = useState(null);
 
   function handleStart() {
-    // Start counting.
+    // Empieza a contar.
     setStartTime(Date.now());
     setNow(Date.now());
 
     setInterval(() => {
-      // Update the current time every 10ms.
+      // Actualiza el tiempo actual cada 10 milisegundos.
       setNow(Date.now());
     }, 10);
   }
@@ -110,9 +110,9 @@ export default function Stopwatch() {
 
   return (
     <>
-      <h1>Time passed: {secondsPassed.toFixed(3)}</h1>
+      <h1>Tiempo transcurrido: {secondsPassed.toFixed(3)}</h1>
       <button onClick={handleStart}>
-        Start
+        Iniciar
       </button>
     </>
   );
@@ -121,7 +121,7 @@ export default function Stopwatch() {
 
 </Sandpack>
 
-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:**
+Cuando el boton "Detener" es presionado, necesitas cancelar el intervalo existente para que deje de actualizar la variable `now` del estado. Puedes hacer esto llamando [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval), pero necesitas pasarle el identificador del intervalo que fue previamente devuelto por la llamada del `setInterval` cuando el usuario presionó Iniciar. Necesitas guardar el identificador del intervalo en alguna parte. **Como el identificador de un intervalo no es usado para la renderización, puedes guardarlo en un ref:**
 
 <Sandpack>
 
@@ -154,12 +154,12 @@ export default function Stopwatch() {
 
   return (
     <>
-      <h1>Time passed: {secondsPassed.toFixed(3)}</h1>
+      <h1>Tiempo transcurrido: {secondsPassed.toFixed(3)}</h1>
       <button onClick={handleStart}>
-        Start
+        Iniciar
       </button>
       <button onClick={handleStop}>
-        Stop
+        Detener
       </button>
     </>
   );
@@ -168,20 +168,20 @@ export default function Stopwatch() {
 
 </Sandpack>
 
-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.
+Cuando una pieza de información es usada para la renderización, guárdala en el estado. Cuando una pieza de información solo se necesita en los manejadores de eventos y no requiere un re-renderizado, usar un ref quizás sea más eficiente.
 
-## Differences between refs and state {/*differences-between-refs-and-state*/}
+## Diferencias entre los refs y el estado {/*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:
+Tal vez estés pensando que los refs parecen menos "estrictos" que el estado—puedes mutarlos en lugar de siempre tener que utilizar una función asignadora del estado, por ejemplo. Pero en la mayoría de los casos, querrás usar el estado. Los refs son una "escotilla de escape" que no necesitarás a menudo. Esta es la comparación entre el estado y los refs:
 
-| refs                                                                                  | state                                                                                                                     |
+| los refs                                                                                  | el estado                                                                                                                     |
 | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| `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)` devuelve `{ current: initialValue }`                            | `useState(initialValue)` devuelve el valor actual de una variable de estado y una función asignadora del estado ( `[value, setValue]`) |
+| No desencadena un re-renderizado cuando lo cambias.   | Desencadena un re-renderizado cuando lo cambias.                                        |
+| Mutable—puedes modificar y actualizar el valor de `current` fuera del proceso de renderización. | "Immutable"—necesitas usar la función asignadora del estado para modificar variables de estado para poner en cola un re-renderizado.               |
+| No deberías leer (o escribir) el valor de `current` durante la renderización. | Puedes leer el estado en cualquier momento. Sin embargo, cada renderizado tiene su propia [instantánea](/learn/state-as-a-snapshot) del estado la cual no cambia.
 
-Here is a counter button that's implemented with state:
+Este es un botón contador que está implementado con el estado:
 
 <Sandpack>
 
@@ -197,7 +197,7 @@ export default function Counter() {
 
   return (
     <button onClick={handleClick}>
-      You clicked {count} times
+      Has hecho {count} clics
     </button>
   );
 }
@@ -205,9 +205,9 @@ export default function Counter() {
 
 </Sandpack>
 
-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 el valor de `count` es mostrado, tiene sentido usar un valor del estado para eso. Cuando el valor del contador es asignado con `setCount()`, React re-renderiza el componente y la pantalla se actualiza para reflejar la nueva cuenta.
 
-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**:
+Si trataste de implementar esto con un ref, React nunca re-renderizaría el componente, así que nunca verías la cuenta cambiar! Observa como al hacer clic en este botón **no se actualiza su texto**:
 
 <Sandpack>
 
@@ -218,13 +218,13 @@ export default function Counter() {
   let countRef = useRef(0);
 
   function handleClick() {
-    // This doesn't re-render the component!
+    // Esto no re-renderiza el componente!
     countRef.current = countRef.current + 1;
   }
 
   return (
     <button onClick={handleClick}>
-      You clicked {countRef.current} times
+      Has hecho {countRef.current} clics
     </button>
   );
 }
@@ -232,66 +232,65 @@ export default function Counter() {
 
 </Sandpack>
 
-This is why reading `ref.current` during render leads to unreliable code. If you need that, use state instead.
+Esta es la razón por la que leer `ref.current` durante el renderizado conduce a un cógigo poco fiable. Si necesitas eso, en su lugar usa el estado.
+<DeepDive title="¿Cómo useRef funciona internamente?">
 
-<DeepDive title="How does useRef 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:
+A pesar de que tanto `useState` como `useRef` son proporcionados por React, en principio `useRef` podría ser implementado _por encima de_ `useState`. Puedes imaginar que internamente en React, `useRef` es implementado de esta manera:
 
 ```js
-// Inside of React
+// Internamente en 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 el primer renderizado, `useRef` devuelve `{ current: initialValue }`. Este objeto es almacenado por Reacto, asi que durante el siguiente renderizado el mismo objeto será devuelto. Fíjate como el asignador de estado no es usado en este ejemplo. Es innecesario porque `useRef` siempre necesita devolver el mismo 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`.
+React proporciona una versión integrada de `useRef` porque es suficientemente común en la practica. Pero puedes pensar en ello como si fuera una variable de estado común sin un asignador. Si estas familiarizado con la programación orientada a objetos, los refs puede que te recuerden a los campos de instancias—pero en lugar de `this.something` escribes `somethingRef.current`.
 
 </DeepDive>
 
-## When to use refs {/*when-to-use-refs*/}
+## Cuándo 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:
+Típicamente, usarás un ref cuando tu componente necesite "salir" de React y comunicarse con APIs externas—a menudo una API del navegador no impactará en la apariencia de un componentete. Estas son algunas de estas raras situaciones:
 
-- 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.
+- Almacenar [identificadores de timeouts](https://developer.mozilla.org/docs/Web/API/setTimeout)
+- Almacenar y manipular [Elementos del DOM](https://developer.mozilla.org/docs/Web/API/Element), lo cual cubrimos en [la siguiente página](/learn/manipulating-the-dom-with-refs)
+- Almacenar otros objetos que no son necesarios para calcular el JSX.
 
-If your component needs to store some value, but it doesn't impact the rendering logic, choose refs.
+Si tu componente necesita almacenar algún valor, pero no impacta la lógica de la renderización, usa refs.
 
-## Best practices for refs {/*best-practices-for-refs*/}
+## Buenas prácticas para los refs {/*best-practices-for-refs*/}
 
-Following these principles will make your components more predictable:
+Seguir estos principios hará que tus componentes sean más predecibles:
 
-- **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.)
+- **Trata a los refs como una escotilla de escape.** Los refs son útiles cuando trabajas con sistemas externos o APIs del navegador. Si mucha de la lógica de tu aplicación y el flujo de los datos dependen de los refs, puede que quieras reconsiderar su enfoque.
+- **No leas o escribas `ref.current` durante la renderización.** Si se necesita alguna información durante la renderización, en su lugar usa [el estado](/learn/state-a-components-memory). Como React no sabe cuándo `ref.current` cambia, incluso leerlo mientras se renderiza hace que el comportamiento de tu componente sea difícil de predecir. (La única excepción a esto es codigo como `if (!ref.current) ref.current = new Thing()` el cual solo asigna el ref una vez durante el renderizado inicial).
 
-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:
+Las limitaciones del estado en React no se aplican a los refs. Por ejemplo, el estado actúa como una [instantánea para cada renderizado](/learn/state-as-a-snapshot) y [no se actualíza de manera síncrona.](/learn/queueing-a-series-of-state-updates) Pero cuando mutas el valor actual de un ref, cambia inmediatamente:
 
 ```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.
+Esto es porque **el propio ref es un objeto regular de JavaScript,** así que se comporta como uno.
 
-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.
+Tampoco tienes que preocuparte por [evitar la mutación](/learn/updating-objects-in-state) cuando trabajas con un ref. Siempre y cuando el objeto que estás mutando no está siendo usado para la renderización, a React no le importa lo que hagas con el ref o con su contenido.
 
-## Refs and the DOM {/*refs-and-the-dom*/}
+## Los Refs y el 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 `<div ref={myRef}>`, 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)
+Puedes apuntar un ref hacia cualquier valor. Sin embargo, el caso de uso más común para un ref es acceder a un elemento del DOM. Por ejemplo, esto es útil cuando quieres enfocar un input programáticamente. Cuando pasas un ref a un atributo `ref` en JSX, así `<div ref={myRef}>`, React colocará el elemento del DOM correspondiente en `myRef.current`. Puedes leer más sobre esto en [Manipulando el DOM con refs.](/learn/manipulating-the-dom-with-refs)
 
 <Recap>
 
-- 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.
+- Los refs son una escotilla de escape para quedarse con valores que no son usados para la renderización. No los necesitarás a menudo.
+- Un ref es un objeto plano de JavaScript con una sola propiedad llamada `current`, la cual puedes leer o asignarle un valor.
+- Puedes pedirle a React que te de un ref llamando al Hook `useRef`.
+- Como el estado, los refs retienen información entre los re-renderizados de un componente.
+- A diferencia del estado, asignar el valor de `current` de un ref no desencadena un re-renderizado.
+- No leas o escribas `ref.current` durante la renderización. Esto hace que tu componente sea díficil de predecir.
 
 </Recap>
 
@@ -299,13 +298,13 @@ You can point a ref to any value. However, the most common use case for a ref is
 
 <Challenges>
 
-#### Fix a broken chat input {/*fix-a-broken-chat-input*/}
+#### Arregla un input de chat roto {/*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.
+Escribe un mensaje y haz clic en "Enviar". Notarás que hay un retraso de tres segundos antes de que veas la alerta de "Enviado!". Durante este retraso, puedes ver un botón de "Deshacer". Haz clic en él. Este botón de "Deshacer" se supone que debe evitar que el mensaje de "Enviado!" aparezca. Hace esto llamando [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout) para el identificador del timeout guardado durante `handleSend`. Sin embargo, incluso después de que "Deshacer" es clicado, el mensaje de "Enviado!" sigue apareciendo. Encuentra por qué no funciona, y arréglalo.
 
 <Hint>
 
-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?
+Variables comunes como `let timeoutID` no "sobreviven" entre los re-renderizados porque cada renderizado ejecuta tu componente (e inicializa sus variables) desde cero. ¿Deberías guardar el identificador del timeout en algún otro lugar?
 
 </Hint>
 
@@ -322,7 +321,7 @@ export default function Chat() {
   function handleSend() {
     setIsSending(true);
     timeoutID = setTimeout(() => {
-      alert('Sent!');
+      alert('Enviado!');
       setIsSending(false);
     }, 3000);
   }
@@ -342,11 +341,11 @@ export default function Chat() {
       <button
         disabled={isSending}
         onClick={handleSend}>
-        {isSending ? 'Sending...' : 'Send'}
+        {isSending ? 'Enviando...' : 'Enviar'}
       </button>
       {isSending &&
         <button onClick={handleUndo}>
-          Undo
+          Deshacer
         </button>
       }
     </>
@@ -358,7 +357,7 @@ export default function Chat() {
 
 <Solution>
 
-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.
+Sea cuando sea que tu componente se re-renderice (tal y como cuando asignas un estado), todas las variables locales se inicializan desde cero. Esto es porque no puedes guardar el identificador del timeout en una variable local como `timeoutID` y luego esperar que otro manejador de eventos lo "vea" en el futuro. En cambio, almacénalo en un ref, el cual React preservará entre renderizados.
 
 <Sandpack>
 
@@ -373,7 +372,7 @@ export default function Chat() {
   function handleSend() {
     setIsSending(true);
     timeoutRef.current = setTimeout(() => {
-      alert('Sent!');
+      alert('Enviado!');
       setIsSending(false);
     }, 3000);
   }
@@ -393,11 +392,11 @@ export default function Chat() {
       <button
         disabled={isSending}
         onClick={handleSend}>
-        {isSending ? 'Sending...' : 'Send'}
+        {isSending ? 'Enviando...' : 'Enviar'}
       </button>
       {isSending &&
         <button onClick={handleUndo}>
-          Undo
+          Deshacer
         </button>
       }
     </>
@@ -410,9 +409,9 @@ export default function Chat() {
 </Solution>
 
 
-#### Fix a component failing to re-render {/*fix-a-component-failing-to-re-render*/}
+#### Arreglar un componente fallando al 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ón se supone que alterna entre mostrar "Encendido" y "Apagado". Sin embargo, siempre muestra "Apagado". ¿Qué está mal en este código? Arréglalo.
 
 <Sandpack>
 
@@ -436,7 +435,7 @@ export default function Toggle() {
 
 <Solution>
 
-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:
+En este ejemplo, el valor actual de un ref es usado para calcular la salida de la renderización: `{isOnRef.current ? 'Encendido' : 'Apagado'}`. Esta es una señal de que esta información no debería estar en un ref, y en su lugar debería estar colocada en el estado. Para arreglarlo, quita el ref y en su lugar usa el estado:
 
 <Sandpack>
 
@@ -450,7 +449,7 @@ export default function Toggle() {
     <button onClick={() => {
       setIsOn(!isOn);
     }}>
-      {isOn ? 'On' : 'Off'}
+      {isOn ? 'Encendido' : 'Apagado'}
     </button>
   );
 }
@@ -460,17 +459,17 @@ export default function Toggle() {
 
 </Solution>
 
-#### Fix debouncing {/*fix-debouncing*/}
+#### Arregla el rebote {/*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".
+En este ejemplo, todos los manejadores de clic están ["rebotados".](https://redd.one/blog/debounce-vs-throttle) Para ver que significa esto, presiona uno de los botones. Nota como el mensaje aparece un segundo después. Si presionas el botón mientras esperas el mensaje, el temporizador se reiniciará. Así que mantente cliqueando el mismo botón rápido muchas veces, el mensaje no aparecerá hasta un segundo *después* de que pares de hacer clic. El rebote te permite retrasar algunas acciones hasta que el usuario "pare de hacer cosas".
 
-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 ejemplo funciona, pero no tan bien como se esperaba. Los botones no son independientes. Para ver el problema, haz clic en uno de los botones, y luego inmediatamente haz clic en otro botón. Esperarías que después de un retraso, verías el mensaje del botón. Pero solo el mensaje del último botón se muestra. El mensaje del primer botón se pierde.
 
-Why are the buttons interfering with each other? Find and fix the issue.
+¿Por qué los botones están interfiriendo con los demás? Encuentra y arregla el problema.
 
 <Hint>
 
-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?
+La última variable de timeout es compartida entre todos los componentes `DebouncedButton`. Por eso al hacer clic en un botón reinicia el timeout de otro botón. ¿Puedes almacenar un identificador de timeout separado para cada botón?
 
 </Hint>
 
@@ -498,19 +497,19 @@ export default function Dashboard() {
   return (
     <>
       <DebouncedButton
-        onClick={() => alert('Spaceship launched!')}
+        onClick={() => alert('Cohete lanzado!')}
       >
-        Launch the spaceship
+        Lanza el cohete
       </DebouncedButton>
       <DebouncedButton
-        onClick={() => alert('Soup boiled!')}
+        onClick={() => alert('Sopa hervida!')}
       >
-        Boil the soup
+        Hierve la sopa
       </DebouncedButton>
       <DebouncedButton
-        onClick={() => alert('Lullaby sung!')}
+        onClick={() => alert('Canción de cuna cantada!')}
       >
-        Sing a lullaby
+        Canta una canción de cuna
       </DebouncedButton>
     </>
   )
@@ -525,7 +524,7 @@ button { display: block; margin: 10px; }
 
 <Solution>
 
-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.
+Una variable como `timeoutID` es compartida entre todos los componentes. Esto es porque al hacer clic en el segundo botón reinicia el timeout pendiente del primer botón. Para solucionar esto, puedes guardar el timeout en un ref. Cada botón tendrá su propio ref, así no tendrán conflicto con los demás botones. Fíjate como al hacer clic a dos botones rápido se mostrarán ambos mensajes.
 
 <Sandpack>
 
@@ -550,19 +549,19 @@ export default function Dashboard() {
   return (
     <>
       <DebouncedButton
-        onClick={() => alert('Spaceship launched!')}
+        onClick={() => alert('Cohete lanzado!')}
       >
-        Launch the spaceship
+        Lanza el cohete
       </DebouncedButton>
       <DebouncedButton
-        onClick={() => alert('Soup boiled!')}
+        onClick={() => alert('Sopa hervida!')}
       >
-        Boil the soup
+        Hierve la sopa
       </DebouncedButton>
       <DebouncedButton
-        onClick={() => alert('Lullaby sung!')}
+        onClick={() => alert('Canción de cuna cantada!')}
       >
-        Sing a lullaby
+        Canta una canción de cuna
       </DebouncedButton>
     </>
   )
@@ -577,11 +576,11 @@ button { display: block; margin: 10px; }
 
 </Solution>
 
-#### Read the latest state {/*read-the-latest-state*/}
+#### Leer el último estado {/*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).
+En este ejemplo, después de que presionas "Enviar", hay un pequeño retraso antes de que el mensaje sea mostrado. Escribe "hola", presiona Enviar, y luego rápidamente edita el input otra véz. A pesar de tus cambios, la alerta seguiría mostrando "hola" (el cual fue el valor del estado [en el momento](/learn/state-as-a-snapshot#state-over-time) en que el botón fue presionado).
 
-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?
+Usualmente, este comportamiento es lo que quieres en una aplicación. Sin embargo, hay algunos casos ocasionales donde quieres que algún código asíncrono lea la *última* versión de algún estado. ¿Puedes pensar en alguna manera de hacer que la alerta muestre el texto *actual* del input en lugar de el que estaba al momento del clic?
 
 <Sandpack>
 
@@ -593,7 +592,7 @@ export default function Chat() {
 
   function handleSend() {
     setTimeout(() => {
-      alert('Sending: ' + text);
+      alert('Enviando: ' + text);
     }, 3000);
   }
 
@@ -605,7 +604,7 @@ export default function Chat() {
       />
       <button
         onClick={handleSend}>
-        Send
+        Enviar
       </button>
     </>
   );
@@ -616,7 +615,7 @@ export default function Chat() {
 
 <Solution>
 
-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.
+El estado funciona [como una instantánea](/learn/state-as-a-snapshot), así que no puedes leer el último estado de una operación asíncrona como un timeout. Sin embargo, puedes guardar el último texto del input en un ref. Un ref es mutable, así que puedes leer la propiedad `current` en cualquier momento. Como el texto actual también es usado para la renderización, en este ejemplo, necesitaras *tanto* una variable de estado (para la renderización), *como* un ref (para leerlo en el timeout). Necesitarás actualizar el valor actual del ref manualmente.
 
 <Sandpack>
 
@@ -634,7 +633,7 @@ export default function Chat() {
 
   function handleSend() {
     setTimeout(() => {
-      alert('Sending: ' + textRef.current);
+      alert('Enviando: ' + textRef.current);
     }, 3000);
   }
 
@@ -646,7 +645,7 @@ export default function Chat() {
       />
       <button
         onClick={handleSend}>
-        Send
+        Enviar
       </button>
     </>
   );
@@ -657,4 +656,4 @@ export default function Chat() {
 
 </Solution>
 
-</Challenges>
+</Challenges>
\ No newline at end of file

From 6d162adf5a3da019505476db34dfce67dc8cc363 Mon Sep 17 00:00:00 2001
From: Johan Santana <johancarlosst@gmail.com>
Date: Sun, 9 Oct 2022 20:51:06 -0400
Subject: [PATCH 2/5] docs: improving referencing-values-with-refs.md

---
 .../learn/referencing-values-with-refs.md     | 74 +++++++++----------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/beta/src/content/learn/referencing-values-with-refs.md b/beta/src/content/learn/referencing-values-with-refs.md
index 23191b8aa..12973b900 100644
--- a/beta/src/content/learn/referencing-values-with-refs.md
+++ b/beta/src/content/learn/referencing-values-with-refs.md
@@ -4,28 +4,28 @@ title: 'Haciendo referencia a valores utilizando Refs'
 
 <Intro>
 
-Cuando quieres que un componente "recuerdo" alguna información, pero no quieres que esa información [active nuevos renderizados](/learn/render-and-commit), puedes usar un *ref*.
+Cuando quieres que un componente "recuerdo" alguna información, pero no quieres que esa información [active nuevos renderizados](/learn/render-and-commit), puedes usar una *ref*.
 
 </Intro>
 
 <YouWillLearn>
 
-- Cómo añadir un ref a tu componente
-- Cómo actualizar el valor de un ref
-- En qué se diferencian los refs y el estado
-- Cómo usar los refs de manera segura
+- Cómo añadir una ref a tu componente
+- Cómo actualizar el valor de una ref
+- En qué se diferencian las refs y el estado
+- Cómo usar las refs de manera segura
 
 </YouWillLearn>
 
-## Agregando un ref a tu componente {/*adding-a-ref-to-your-component*/}
+## Agregando una ref a tu componente {/*adding-a-ref-to-your-component*/}
 
-Puedes añadir un ref a tu componente importando el Hook `useRef` desde React:
+Puedes añadir una ref a tu componente importando el Hook `useRef` desde React:
 
 ```js
 import { useRef } from 'react';
 ```
 
-Dentro de tu componente, llama al Hook `useRef` y pasa el valor inicial al que quieres hacer referencia como único parámetro. Por ejemplo, este es un ref con el valor `0`:
+Dentro de tu componente, llama al Hook `useRef` y pasa el valor inicial al que quieres hacer referencia como único parámetro. Por ejemplo, este es una ref con el valor `0`:
 
 ```js
 const ref = useRef(0);
@@ -41,7 +41,7 @@ const ref = useRef(0);
 
 <Illustration src="/images/docs/illustrations/i_ref.png" alt="Una flecha con 'current' escrito en ella metida en un bolsillo con 'ref' escrito en el." />
 
-Puedes acceder al valor actual de ese ref a través de la propiedad `ref.current`. Este valor es mutable intencionalmente, lo que significa que puedes tanto leer como escribir en él. Es como un bolsillo secreto de tu componente que React no puede rastrear. (Esto es lo que lo hace una "escotilla de escape" del flujo de datos de una vía de React—más sobre eso a continuación!)
+Puedes acceder al valor actual de esa ref a través de la propiedad `ref.current`. Este valor es mutable intencionalmente, lo que significa que puedes tanto leer como escribir en él. Es como un bolsillo secreto de tu componente que React no puede rastrear. (Esto es lo que lo hace una "escotilla de escape" del flujo de datos de una vía de React—más sobre eso a continuación!)
 
 Aquí, un botón incrementará `ref.current` en cada clic:
 
@@ -68,13 +68,13 @@ export default function Counter() {
 
 </Sandpack>
 
-El ref apunta hacia un número, pero, como [el estado](/learn/state-a-components-memory), podrías apuntar a cualquier cosa: un string, un objeto, o incluso una función. A diferencia del estado, el ref es un objeto plano de JavaScript con la propiedad `current` que puedes leer y modificar.
+La ref apunta hacia un número, pero, como [el estado](/learn/state-a-components-memory), podrías apuntar a cualquier cosa: un string, un objeto, o incluso una función. A diferencia del estado, la ref es un objeto plano de JavaScript con la propiedad `current` que puedes leer y modificar.
 
-Fíjate como **el componente no se re-renderiza con cada incremento.** Como el estado, los refs son retenidos por React entre cada re-renderizado. Sin embargo, asignar el estado re-renderiza un componente. Cambiar un ref no!
+Fíjate como **el componente no se re-renderiza con cada incremento.** Como el estado, las refs son retenidos por React entre cada re-renderizado. Sin embargo, asignar el estado re-renderiza un componente. Cambiar una ref no!
 
 ## Ejemplo: creando un cronómetro {/*example-building-a-stopwatch*/}
 
-Puedes combinar los refs y el estado en un solo componente. Por ejemplo, hagamos un cronómetro que el usuario pueda iniciar y detener al presionar un botón. Para poder mostrar cuánto tiempo ha pasado desde que el usuario pulsó "Iniciar", necesitarás mantener rastreado cuándo el botón de Iniciar fue presionado y cuál es el tiempo actual. **Esta información es usada para la renderización, asi que la guardala en el estado:**
+Puedes combinar las refs y el estado en un solo componente. Por ejemplo, hagamos un cronómetro que el usuario pueda iniciar y detener al presionar un botón. Para poder mostrar cuánto tiempo ha pasado desde que el usuario pulsó "Iniciar", necesitarás mantener rastreado cuándo el botón de Iniciar fue presionado y cuál es el tiempo actual. **Esta información es usada para la renderización, asi que la guardala en el estado:**
 
 ```js
 const [startTime, setStartTime] = useState(null);
@@ -121,7 +121,7 @@ export default function Stopwatch() {
 
 </Sandpack>
 
-Cuando el boton "Detener" es presionado, necesitas cancelar el intervalo existente para que deje de actualizar la variable `now` del estado. Puedes hacer esto llamando [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval), pero necesitas pasarle el identificador del intervalo que fue previamente devuelto por la llamada del `setInterval` cuando el usuario presionó Iniciar. Necesitas guardar el identificador del intervalo en alguna parte. **Como el identificador de un intervalo no es usado para la renderización, puedes guardarlo en un ref:**
+Cuando el boton "Detener" es presionado, necesitas cancelar el intervalo existente para que deje de actualizar la variable `now` del estado. Puedes hacer esto llamando [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval), pero necesitas pasarle el identificador del intervalo que fue previamente devuelto por la llamada del `setInterval` cuando el usuario presionó Iniciar. Necesitas guardar el identificador del intervalo en alguna parte. **Como el identificador de un intervalo no es usado para la renderización, puedes guardarlo en una ref:**
 
 <Sandpack>
 
@@ -168,13 +168,13 @@ export default function Stopwatch() {
 
 </Sandpack>
 
-Cuando una pieza de información es usada para la renderización, guárdala en el estado. Cuando una pieza de información solo se necesita en los manejadores de eventos y no requiere un re-renderizado, usar un ref quizás sea más eficiente.
+Cuando una pieza de información es usada para la renderización, guárdala en el estado. Cuando una pieza de información solo se necesita en los manejadores de eventos y no requiere un re-renderizado, usar una ref quizás sea más eficiente.
 
-## Diferencias entre los refs y el estado {/*differences-between-refs-and-state*/}
+## Diferencias entre las refs y el estado {/*differences-between-refs-and-state*/}
 
-Tal vez estés pensando que los refs parecen menos "estrictos" que el estado—puedes mutarlos en lugar de siempre tener que utilizar una función asignadora del estado, por ejemplo. Pero en la mayoría de los casos, querrás usar el estado. Los refs son una "escotilla de escape" que no necesitarás a menudo. Esta es la comparación entre el estado y los refs:
+Tal vez estés pensando que las refs parecen menos "estrictos" que el estado—puedes mutarlos en lugar de siempre tener que utilizar una función asignadora del estado, por ejemplo. Pero en la mayoría de los casos, querrás usar el estado. Las refs son una "escotilla de escape" que no necesitarás a menudo. Esta es la comparación entre el estado y las refs:
 
-| los refs                                                                                  | el estado                                                                                                                     |
+| las refs                                                                                  | el estado                                                                                                                     |
 | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
 | `useRef(initialValue)` devuelve `{ current: initialValue }`                            | `useState(initialValue)` devuelve el valor actual de una variable de estado y una función asignadora del estado ( `[value, setValue]`) |
 | No desencadena un re-renderizado cuando lo cambias.   | Desencadena un re-renderizado cuando lo cambias.                                        |
@@ -207,7 +207,7 @@ export default function Counter() {
 
 Como el valor de `count` es mostrado, tiene sentido usar un valor del estado para eso. Cuando el valor del contador es asignado con `setCount()`, React re-renderiza el componente y la pantalla se actualiza para reflejar la nueva cuenta.
 
-Si trataste de implementar esto con un ref, React nunca re-renderizaría el componente, así que nunca verías la cuenta cambiar! Observa como al hacer clic en este botón **no se actualiza su texto**:
+Si trataste de implementar esto con una ref, React nunca re-renderizaría el componente, así que nunca verías la cuenta cambiar! Observa como al hacer clic en este botón **no se actualiza su texto**:
 
 <Sandpack>
 
@@ -247,13 +247,13 @@ function useRef(initialValue) {
 
 Durante el primer renderizado, `useRef` devuelve `{ current: initialValue }`. Este objeto es almacenado por Reacto, asi que durante el siguiente renderizado el mismo objeto será devuelto. Fíjate como el asignador de estado no es usado en este ejemplo. Es innecesario porque `useRef` siempre necesita devolver el mismo objeto!
 
-React proporciona una versión integrada de `useRef` porque es suficientemente común en la practica. Pero puedes pensar en ello como si fuera una variable de estado común sin un asignador. Si estas familiarizado con la programación orientada a objetos, los refs puede que te recuerden a los campos de instancias—pero en lugar de `this.something` escribes `somethingRef.current`.
+React proporciona una versión integrada de `useRef` porque es suficientemente común en la practica. Pero puedes pensar en ello como si fuera una variable de estado normal sin un asignador. Si estas familiarizado con la programación orientada a objetos, las refs puede que te recuerden a los campos de instancias—pero en lugar de `this.something` escribes `somethingRef.current`.
 
 </DeepDive>
 
 ## Cuándo usar refs {/*when-to-use-refs*/}
 
-Típicamente, usarás un ref cuando tu componente necesite "salir" de React y comunicarse con APIs externas—a menudo una API del navegador no impactará en la apariencia de un componentete. Estas son algunas de estas raras situaciones:
+Típicamente, usarás una ref cuando tu componente necesite "salir" de React y comunicarse con APIs externas—a menudo una API del navegador no impactará en la apariencia de un componentete. Estas son algunas de estas raras situaciones:
 
 - Almacenar [identificadores de timeouts](https://developer.mozilla.org/docs/Web/API/setTimeout)
 - Almacenar y manipular [Elementos del DOM](https://developer.mozilla.org/docs/Web/API/Element), lo cual cubrimos en [la siguiente página](/learn/manipulating-the-dom-with-refs)
@@ -261,35 +261,35 @@ Típicamente, usarás un ref cuando tu componente necesite "salir" de React y co
 
 Si tu componente necesita almacenar algún valor, pero no impacta la lógica de la renderización, usa refs.
 
-## Buenas prácticas para los refs {/*best-practices-for-refs*/}
+## Buenas prácticas para las refs {/*best-practices-for-refs*/}
 
 Seguir estos principios hará que tus componentes sean más predecibles:
 
-- **Trata a los refs como una escotilla de escape.** Los refs son útiles cuando trabajas con sistemas externos o APIs del navegador. Si mucha de la lógica de tu aplicación y el flujo de los datos dependen de los refs, puede que quieras reconsiderar su enfoque.
-- **No leas o escribas `ref.current` durante la renderización.** Si se necesita alguna información durante la renderización, en su lugar usa [el estado](/learn/state-a-components-memory). Como React no sabe cuándo `ref.current` cambia, incluso leerlo mientras se renderiza hace que el comportamiento de tu componente sea difícil de predecir. (La única excepción a esto es codigo como `if (!ref.current) ref.current = new Thing()` el cual solo asigna el ref una vez durante el renderizado inicial).
+- **Trata a las refs como una escotilla de escape.** Las refs son útiles cuando trabajas con sistemas externos o APIs del navegador. Si mucha de la lógica de tu aplicación y el flujo de los datos dependen de las refs, puede que quieras reconsiderar su enfoque.
+- **No leas o escribas `ref.current` durante la renderización.** Si se necesita alguna información durante la renderización, en su lugar usa [el estado](/learn/state-a-components-memory). Como React no sabe cuándo `ref.current` cambia, incluso leerlo mientras se renderiza hace que el comportamiento de tu componente sea difícil de predecir. (La única excepción a esto es codigo como `if (!ref.current) ref.current = new Thing()` el cual solo asigna la ref una vez durante el renderizado inicial).
 
-Las limitaciones del estado en React no se aplican a los refs. Por ejemplo, el estado actúa como una [instantánea para cada renderizado](/learn/state-as-a-snapshot) y [no se actualíza de manera síncrona.](/learn/queueing-a-series-of-state-updates) Pero cuando mutas el valor actual de un ref, cambia inmediatamente:
+Las limitaciones del estado en React no se aplican a las refs. Por ejemplo, el estado actúa como una [instantánea para cada renderizado](/learn/state-as-a-snapshot) y [no se actualíza de manera síncrona.](/learn/queueing-a-series-of-state-updates) Pero cuando mutas el valor actual de una ref, cambia inmediatamente:
 
 ```js
 ref.current = 5;
 console.log(ref.current); // 5
 ```
 
-Esto es porque **el propio ref es un objeto regular de JavaScript,** así que se comporta como uno.
+Esto es porque **la propia ref es un objeto normal de JavaScript,** así que se comporta como uno.
 
-Tampoco tienes que preocuparte por [evitar la mutación](/learn/updating-objects-in-state) cuando trabajas con un ref. Siempre y cuando el objeto que estás mutando no está siendo usado para la renderización, a React no le importa lo que hagas con el ref o con su contenido.
+Tampoco tienes que preocuparte por [evitar la mutación](/learn/updating-objects-in-state) cuando trabajas con una ref. Siempre y cuando el objeto que estás mutando no está siendo usado para la renderización, a React no le importa lo que hagas con la ref o con su contenido.
 
-## Los Refs y el DOM {/*refs-and-the-dom*/}
+## Las Refs y el DOM {/*refs-and-the-dom*/}
 
-Puedes apuntar un ref hacia cualquier valor. Sin embargo, el caso de uso más común para un ref es acceder a un elemento del DOM. Por ejemplo, esto es útil cuando quieres enfocar un input programáticamente. Cuando pasas un ref a un atributo `ref` en JSX, así `<div ref={myRef}>`, React colocará el elemento del DOM correspondiente en `myRef.current`. Puedes leer más sobre esto en [Manipulando el DOM con refs.](/learn/manipulating-the-dom-with-refs)
+Puedes apuntar una ref hacia cualquier valor. Sin embargo, el caso de uso más común para una ref es acceder a un elemento del DOM. Por ejemplo, esto es útil cuando quieres enfocar un input programáticamente. Cuando pasas una ref a un atributo `ref` en JSX, así `<div ref={myRef}>`, React colocará el elemento del DOM correspondiente en `myRef.current`. Puedes leer más sobre esto en [Manipulando el DOM con refs.](/learn/manipulating-the-dom-with-refs)
 
 <Recap>
 
-- Los refs son una escotilla de escape para quedarse con valores que no son usados para la renderización. No los necesitarás a menudo.
-- Un ref es un objeto plano de JavaScript con una sola propiedad llamada `current`, la cual puedes leer o asignarle un valor.
-- Puedes pedirle a React que te de un ref llamando al Hook `useRef`.
-- Como el estado, los refs retienen información entre los re-renderizados de un componente.
-- A diferencia del estado, asignar el valor de `current` de un ref no desencadena un re-renderizado.
+- Las refs son una escotilla de escape para quedarse con valores que no son usados para la renderización. No los necesitarás a menudo.
+- Una ref es un objeto plano de JavaScript con una sola propiedad llamada `current`, la cual puedes leer o asignarle un valor.
+- Puedes pedirle a React que te de una ref llamando al Hook `useRef`.
+- Como el estado, las refs retienen información entre los re-renderizados de un componente.
+- A diferencia del estado, asignar el valor de `current` de una ref no desencadena un re-renderizado.
 - No leas o escribas `ref.current` durante la renderización. Esto hace que tu componente sea díficil de predecir.
 
 </Recap>
@@ -357,7 +357,7 @@ export default function Chat() {
 
 <Solution>
 
-Sea cuando sea que tu componente se re-renderice (tal y como cuando asignas un estado), todas las variables locales se inicializan desde cero. Esto es porque no puedes guardar el identificador del timeout en una variable local como `timeoutID` y luego esperar que otro manejador de eventos lo "vea" en el futuro. En cambio, almacénalo en un ref, el cual React preservará entre renderizados.
+Sea cuando sea que tu componente se re-renderice (tal y como cuando asignas un estado), todas las variables locales se inicializan desde cero. Esto es porque no puedes guardar el identificador del timeout en una variable local como `timeoutID` y luego esperar que otro manejador de eventos lo "vea" en el futuro. En cambio, almacénalo en una ref, el cual React preservará entre renderizados.
 
 <Sandpack>
 
@@ -435,7 +435,7 @@ export default function Toggle() {
 
 <Solution>
 
-En este ejemplo, el valor actual de un ref es usado para calcular la salida de la renderización: `{isOnRef.current ? 'Encendido' : 'Apagado'}`. Esta es una señal de que esta información no debería estar en un ref, y en su lugar debería estar colocada en el estado. Para arreglarlo, quita el ref y en su lugar usa el estado:
+En este ejemplo, el valor actual de una ref es usado para calcular la salida de la renderización: `{isOnRef.current ? 'Encendido' : 'Apagado'}`. Esta es una señal de que esta información no debería estar en una ref, y en su lugar debería estar colocada en el estado. Para arreglarlo, quita la ref y en su lugar usa el estado:
 
 <Sandpack>
 
@@ -524,7 +524,7 @@ button { display: block; margin: 10px; }
 
 <Solution>
 
-Una variable como `timeoutID` es compartida entre todos los componentes. Esto es porque al hacer clic en el segundo botón reinicia el timeout pendiente del primer botón. Para solucionar esto, puedes guardar el timeout en un ref. Cada botón tendrá su propio ref, así no tendrán conflicto con los demás botones. Fíjate como al hacer clic a dos botones rápido se mostrarán ambos mensajes.
+Una variable como `timeoutID` es compartida entre todos los componentes. Esto es porque al hacer clic en el segundo botón reinicia el timeout pendiente del primer botón. Para solucionar esto, puedes guardar el timeout en una ref. Cada botón tendrá su propia ref, así no tendrán conflicto con los demás botones. Fíjate como al hacer clic a dos botones rápido se mostrarán ambos mensajes.
 
 <Sandpack>
 
@@ -615,7 +615,7 @@ export default function Chat() {
 
 <Solution>
 
-El estado funciona [como una instantánea](/learn/state-as-a-snapshot), así que no puedes leer el último estado de una operación asíncrona como un timeout. Sin embargo, puedes guardar el último texto del input en un ref. Un ref es mutable, así que puedes leer la propiedad `current` en cualquier momento. Como el texto actual también es usado para la renderización, en este ejemplo, necesitaras *tanto* una variable de estado (para la renderización), *como* un ref (para leerlo en el timeout). Necesitarás actualizar el valor actual del ref manualmente.
+El estado funciona [como una instantánea](/learn/state-as-a-snapshot), así que no puedes leer el último estado de una operación asíncrona como un timeout. Sin embargo, puedes guardar el último texto del input en una ref. Una ref es mutable, así que puedes leer la propiedad `current` en cualquier momento. Como el texto actual también es usado para la renderización, en este ejemplo, necesitaras *tanto* una variable de estado (para la renderización), *como* una ref (para leerlo en el timeout). Necesitarás actualizar el valor actual de la ref manualmente.
 
 <Sandpack>
 

From dedf19ccfcb5b5f6af9c0a127273dd4dda572111 Mon Sep 17 00:00:00 2001
From: Johan Santana <johancarlosst@gmail.com>
Date: Sun, 9 Oct 2022 20:54:02 -0400
Subject: [PATCH 3/5] style: add space

---
 beta/src/content/learn/referencing-values-with-refs.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/beta/src/content/learn/referencing-values-with-refs.md b/beta/src/content/learn/referencing-values-with-refs.md
index 12973b900..ef08d7856 100644
--- a/beta/src/content/learn/referencing-values-with-refs.md
+++ b/beta/src/content/learn/referencing-values-with-refs.md
@@ -233,6 +233,7 @@ export default function Counter() {
 </Sandpack>
 
 Esta es la razón por la que leer `ref.current` durante el renderizado conduce a un cógigo poco fiable. Si necesitas eso, en su lugar usa el estado.
+
 <DeepDive title="¿Cómo useRef funciona internamente?">
 
 A pesar de que tanto `useState` como `useRef` son proporcionados por React, en principio `useRef` podría ser implementado _por encima de_ `useState`. Puedes imaginar que internamente en React, `useRef` es implementado de esta manera:

From ed64d259e9cd049bb11dc7a20368797021b70418 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= <rmartinezfraga@yandex.com>
Date: Sat, 22 Oct 2022 21:43:57 -0400
Subject: [PATCH 4/5] Update referencing-values-with-refs.md

---
 .../learn/referencing-values-with-refs.md     | 126 +++++++++---------
 1 file changed, 63 insertions(+), 63 deletions(-)

diff --git a/beta/src/content/learn/referencing-values-with-refs.md b/beta/src/content/learn/referencing-values-with-refs.md
index ef08d7856..2eb573948 100644
--- a/beta/src/content/learn/referencing-values-with-refs.md
+++ b/beta/src/content/learn/referencing-values-with-refs.md
@@ -1,10 +1,10 @@
 ---
-title: 'Haciendo referencia a valores utilizando Refs'
+title: 'Referenciar valores con refs'
 ---
 
 <Intro>
 
-Cuando quieres que un componente "recuerdo" alguna información, pero no quieres que esa información [active nuevos renderizados](/learn/render-and-commit), puedes usar una *ref*.
+Cuando quieres que un componente "recuerde" alguna información, pero no quieres que esa información [active nuevos renderizados](/learn/render-and-commit), puedes usar una *ref*.
 
 </Intro>
 
@@ -17,7 +17,7 @@ Cuando quieres que un componente "recuerdo" alguna información, pero no quieres
 
 </YouWillLearn>
 
-## Agregando una ref a tu componente {/*adding-a-ref-to-your-component*/}
+## Añadir una ref a tu componente {/*adding-a-ref-to-your-component*/}
 
 Puedes añadir una ref a tu componente importando el Hook `useRef` desde React:
 
@@ -25,7 +25,7 @@ Puedes añadir una ref a tu componente importando el Hook `useRef` desde React:
 import { useRef } from 'react';
 ```
 
-Dentro de tu componente, llama al Hook `useRef` y pasa el valor inicial al que quieres hacer referencia como único parámetro. Por ejemplo, este es una ref con el valor `0`:
+Dentro de tu componente, llama al Hook `useRef` y pasa el valor inicial al que quieres hacer referencia como único parámetro. Por ejemplo, esta es una ref al valor `0`:
 
 ```js
 const ref = useRef(0);
@@ -35,13 +35,13 @@ const ref = useRef(0);
 
 ```js
 { 
-  current: 0 // El valor que le pasaste al useRef
+  current: 0 // El valor que le pasaste a useRef
 }
 ```
 
-<Illustration src="/images/docs/illustrations/i_ref.png" alt="Una flecha con 'current' escrito en ella metida en un bolsillo con 'ref' escrito en el." />
+<Illustration src="/images/docs/illustrations/i_ref.png" alt="Una flecha con que tiene escrito 'current' metida en un bolsillo que tiene escrito 'ref'." />
 
-Puedes acceder al valor actual de esa ref a través de la propiedad `ref.current`. Este valor es mutable intencionalmente, lo que significa que puedes tanto leer como escribir en él. Es como un bolsillo secreto de tu componente que React no puede rastrear. (Esto es lo que lo hace una "escotilla de escape" del flujo de datos de una vía de React—más sobre eso a continuación!)
+Puedes acceder al valor actual de esa ref a través de la propiedad `ref.current`. Este valor es mutable intencionalmente, lo que significa que puedes tanto leer como escribir en él. Es como un bolsillo secreto de tu componente que React no puede rastrear. (Esto es lo que lo hace una "puerta de escape" del flujo de datos de una vía de React: ¡Más sobre eso a continuación!)
 
 Aquí, un botón incrementará `ref.current` en cada clic:
 
@@ -60,7 +60,7 @@ export default function Counter() {
 
   return (
     <button onClick={handleClick}>
-      Clic aquí!
+      ¡Clic aquí!
     </button>
   );
 }
@@ -68,13 +68,13 @@ export default function Counter() {
 
 </Sandpack>
 
-La ref apunta hacia un número, pero, como [el estado](/learn/state-a-components-memory), podrías apuntar a cualquier cosa: un string, un objeto, o incluso una función. A diferencia del estado, la ref es un objeto plano de JavaScript con la propiedad `current` que puedes leer y modificar.
+La ref apunta hacia un número, pero, al igual que [el estado](/learn/state-a-components-memory), podrías apuntar a cualquier cosa: un string, un objeto, o incluso una función. A diferencia del estado, la ref es un objeto plano de JavaScript con la propiedad `current` que puedes leer y modificar.
 
-Fíjate como **el componente no se re-renderiza con cada incremento.** Como el estado, las refs son retenidos por React entre cada re-renderizado. Sin embargo, asignar el estado re-renderiza un componente. Cambiar una ref no!
+Fíjate como **el componente no se rerenderiza con cada incremento.** Como el estado, React retiene las refs entre rerenderizados. Sin embargo, asignar el estado rerenderiza un componente. ¡Cambiar una ref no!
 
-## Ejemplo: creando un cronómetro {/*example-building-a-stopwatch*/}
+## Ejemplo: crear un cronómetro {/*example-building-a-stopwatch*/}
 
-Puedes combinar las refs y el estado en un solo componente. Por ejemplo, hagamos un cronómetro que el usuario pueda iniciar y detener al presionar un botón. Para poder mostrar cuánto tiempo ha pasado desde que el usuario pulsó "Iniciar", necesitarás mantener rastreado cuándo el botón de Iniciar fue presionado y cuál es el tiempo actual. **Esta información es usada para la renderización, asi que la guardala en el estado:**
+Puedes combinar las refs y el estado en un solo componente. Por ejemplo, hagamos un cronómetro que el usuario pueda iniciar y detener al presionar un botón. Para poder mostrar cuánto tiempo ha pasado desde que el usuario pulsó "Iniciar", necesitarás mantener rastreado cuándo el botón de Iniciar fue presionado y cuál es el tiempo actual. **Esta información se usa para el renderizado, así que la guárdala en el estado:**
 
 ```js
 const [startTime, setStartTime] = useState(null);
@@ -121,7 +121,7 @@ export default function Stopwatch() {
 
 </Sandpack>
 
-Cuando el boton "Detener" es presionado, necesitas cancelar el intervalo existente para que deje de actualizar la variable `now` del estado. Puedes hacer esto llamando [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval), pero necesitas pasarle el identificador del intervalo que fue previamente devuelto por la llamada del `setInterval` cuando el usuario presionó Iniciar. Necesitas guardar el identificador del intervalo en alguna parte. **Como el identificador de un intervalo no es usado para la renderización, puedes guardarlo en una ref:**
+Cuando se presiona el botón "Detener", necesitas cancelar el intervalo existente para que deje de actualizar la variable `now` del estado. Puedes hacerlo llamando a [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval), pero necesitas pasarle el identificador del intervalo que fue previamente devuelto por la llamada a `setInterval` cuando el usuario presionó Iniciar. Necesitas guardar el identificador del intervalo en alguna parte. **Como el identificador de un intervalo no se usa para el renderizado, puedes guardarlo en una ref:**
 
 <Sandpack>
 
@@ -168,18 +168,18 @@ export default function Stopwatch() {
 
 </Sandpack>
 
-Cuando una pieza de información es usada para la renderización, guárdala en el estado. Cuando una pieza de información solo se necesita en los manejadores de eventos y no requiere un re-renderizado, usar una ref quizás sea más eficiente.
+Cuando una pieza de información es usada para el renderizado, guárdala en el estado. Cuando una pieza de información solo se necesita en los manejadores de eventos y no requiere un rerenderizado, usar una ref quizás sea más eficiente.
 
 ## Diferencias entre las refs y el estado {/*differences-between-refs-and-state*/}
 
-Tal vez estés pensando que las refs parecen menos "estrictos" que el estado—puedes mutarlos en lugar de siempre tener que utilizar una función asignadora del estado, por ejemplo. Pero en la mayoría de los casos, querrás usar el estado. Las refs son una "escotilla de escape" que no necesitarás a menudo. Esta es la comparación entre el estado y las refs:
+Tal vez estés pensando que las refs parecen menos "estrictas" que el estado —puedes mutarlos en lugar de siempre tener que utilizar una función asignadora del estado, por ejemplo. Pero en la mayoría de los casos, querrás usar el estado. Las refs son una "puerta de escape" que no necesitarás a menudo. Esta es la comparación entre el estado y las refs:
 
 | las refs                                                                                  | el estado                                                                                                                     |
 | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
 | `useRef(initialValue)` devuelve `{ current: initialValue }`                            | `useState(initialValue)` devuelve el valor actual de una variable de estado y una función asignadora del estado ( `[value, setValue]`) |
-| No desencadena un re-renderizado cuando lo cambias.   | Desencadena un re-renderizado cuando lo cambias.                                        |
-| Mutable—puedes modificar y actualizar el valor de `current` fuera del proceso de renderización. | "Immutable"—necesitas usar la función asignadora del estado para modificar variables de estado para poner en cola un re-renderizado.               |
-| No deberías leer (o escribir) el valor de `current` durante la renderización. | Puedes leer el estado en cualquier momento. Sin embargo, cada renderizado tiene su propia [instantánea](/learn/state-as-a-snapshot) del estado la cual no cambia.
+| No desencadena un rerenderizado cuando lo cambias.   | Desencadena un rerenderizado cuando lo cambias.                                        |
+| Mutable: puedes modificar y actualizar el valor de `current` fuera del proceso de renderizado. | "Immutable": necesitas usar la función asignadora del estado para modificar variables de estado para poner en cola un rerenderizado.               |
+| No deberías leer (o escribir) el valor de `current` durante el renderizado. | Puedes leer el estado en cualquier momento. Sin embargo, cada renderizado tiene su propia [instantánea](/learn/state-as-a-snapshot) del estado que no cambia.
 
 Este es un botón contador que está implementado con el estado:
 
@@ -205,9 +205,9 @@ export default function Counter() {
 
 </Sandpack>
 
-Como el valor de `count` es mostrado, tiene sentido usar un valor del estado para eso. Cuando el valor del contador es asignado con `setCount()`, React re-renderiza el componente y la pantalla se actualiza para reflejar la nueva cuenta.
+Como el valor de `count` es mostrado, tiene sentido usar un valor del estado. Cuando se asigna el valor del contador con `setCount()`, React rerenderiza el componente y la pantalla se actualiza para reflejar el nuevo contador.
 
-Si trataste de implementar esto con una ref, React nunca re-renderizaría el componente, así que nunca verías la cuenta cambiar! Observa como al hacer clic en este botón **no se actualiza su texto**:
+Si intentaras implementarlo con una ref, React nunca rerenderizaría el componente, ¡y nunca verías cambiar el contador! Observa como al hacer clic en este botón **no se actualiza su texto**:
 
 <Sandpack>
 
@@ -218,7 +218,7 @@ export default function Counter() {
   let countRef = useRef(0);
 
   function handleClick() {
-    // Esto no re-renderiza el componente!
+    // ¡Esto no rerenderiza el componente!
     countRef.current = countRef.current + 1;
   }
 
@@ -232,11 +232,11 @@ export default function Counter() {
 
 </Sandpack>
 
-Esta es la razón por la que leer `ref.current` durante el renderizado conduce a un cógigo poco fiable. Si necesitas eso, en su lugar usa el estado.
+Esta es la razón por la que leer `ref.current` durante el renderizado conduce a un código poco fiable. Si eso es lo que necesitas, usa en su lugar el estado.
 
 <DeepDive title="¿Cómo useRef funciona internamente?">
 
-A pesar de que tanto `useState` como `useRef` son proporcionados por React, en principio `useRef` podría ser implementado _por encima de_ `useState`. Puedes imaginar que internamente en React, `useRef` es implementado de esta manera:
+A pesar de que React proporciona tanto `useState` como `useRef`, en principio `useRef` se podría implementar _a partir de_ `useState`. Puedes imaginar que internamente en React, `useRef` se implementa de esta manera:
 
 ```js
 // Internamente en React
@@ -246,30 +246,30 @@ function useRef(initialValue) {
 }
 ```
 
-Durante el primer renderizado, `useRef` devuelve `{ current: initialValue }`. Este objeto es almacenado por Reacto, asi que durante el siguiente renderizado el mismo objeto será devuelto. Fíjate como el asignador de estado no es usado en este ejemplo. Es innecesario porque `useRef` siempre necesita devolver el mismo objeto!
+Durante el primer renderizado, `useRef` devuelve `{ current: initialValue }`. React almacena este objeto, así que durante el siguiente renderizado se devolverá el mismo objeto. Fíjate como el asignador de estado no se usa en este ejemplo. ¡Es innecesario porque `useRef` siempre necesita devolver el mismo objeto!
 
-React proporciona una versión integrada de `useRef` porque es suficientemente común en la practica. Pero puedes pensar en ello como si fuera una variable de estado normal sin un asignador. Si estas familiarizado con la programación orientada a objetos, las refs puede que te recuerden a los campos de instancias—pero en lugar de `this.something` escribes `somethingRef.current`.
+React proporciona una versión integrada de `useRef` porque es suficientemente común en la practica. Pero puedes imaginártelo como si fuera una variable de estado normal sin un asignador. Si estas familiarizado con la programación orientada a objetos, las refs puede que te recuerden a los campos de instancias, pero en lugar de `this.something` escribes `somethingRef.current`.
 
 </DeepDive>
 
-## Cuándo usar refs {/*when-to-use-refs*/}
+## ¿Cuándo usar refs? {/*when-to-use-refs*/}
 
-Típicamente, usarás una ref cuando tu componente necesite "salir" de React y comunicarse con APIs externas—a menudo una API del navegador no impactará en la apariencia de un componentete. Estas son algunas de estas raras situaciones:
+Típicamente, usarás una ref cuando tu componente necesite "salir" de React y comunicarse con APIs externas —a menudo una API del navegador no impactará en la apariencia de un componente. Estas son algunas de estas situaciones raras:
 
 - Almacenar [identificadores de timeouts](https://developer.mozilla.org/docs/Web/API/setTimeout)
-- Almacenar y manipular [Elementos del DOM](https://developer.mozilla.org/docs/Web/API/Element), lo cual cubrimos en [la siguiente página](/learn/manipulating-the-dom-with-refs)
+- Almacenar y manipular [elementos del DOM](https://developer.mozilla.org/docs/Web/API/Element), que cubrimos en [la siguiente página](/learn/manipulating-the-dom-with-refs)
 - Almacenar otros objetos que no son necesarios para calcular el JSX.
 
-Si tu componente necesita almacenar algún valor, pero no impacta la lógica de la renderización, usa refs.
+Si tu componente necesita almacenar algún valor, pero no impacta la lógica del renderizado, usa refs.
 
 ## Buenas prácticas para las refs {/*best-practices-for-refs*/}
 
 Seguir estos principios hará que tus componentes sean más predecibles:
 
-- **Trata a las refs como una escotilla de escape.** Las refs son útiles cuando trabajas con sistemas externos o APIs del navegador. Si mucha de la lógica de tu aplicación y el flujo de los datos dependen de las refs, puede que quieras reconsiderar su enfoque.
-- **No leas o escribas `ref.current` durante la renderización.** Si se necesita alguna información durante la renderización, en su lugar usa [el estado](/learn/state-a-components-memory). Como React no sabe cuándo `ref.current` cambia, incluso leerlo mientras se renderiza hace que el comportamiento de tu componente sea difícil de predecir. (La única excepción a esto es codigo como `if (!ref.current) ref.current = new Thing()` el cual solo asigna la ref una vez durante el renderizado inicial).
+- **Trata a las refs como una puerta de escape.** Las refs son útiles cuando trabajas con sistemas externos o APIs del navegador. Si mucho de la lógica de tu aplicación y del flujo de los datos depende de las refs, es posible que quieras reconsiderar tu enfoque.
+- **No leas o escribas `ref.current` durante el renderizado.** Si se necesita alguna información durante el renderizado, usa en su lugar [el estado](/learn/state-a-components-memory). Como React no sabe cuándo `ref.current` cambia, incluso leerlo mientras se renderiza hace que el comportamiento de tu componente sea difícil de predecir. (La única excepción a esto es código como `if (!ref.current) ref.current = new Thing()` que solo asigna la ref una vez durante el renderizado inicial).
 
-Las limitaciones del estado en React no se aplican a las refs. Por ejemplo, el estado actúa como una [instantánea para cada renderizado](/learn/state-as-a-snapshot) y [no se actualíza de manera síncrona.](/learn/queueing-a-series-of-state-updates) Pero cuando mutas el valor actual de una ref, cambia inmediatamente:
+Las limitaciones del estado en React no se aplican a las refs. Por ejemplo, el estado actúa como una [instantánea para cada renderizado](/learn/state-as-a-snapshot) y [no se actualiza de manera síncrona.](/learn/queueing-a-series-of-state-updates) Pero cuando mutas el valor actual de una ref, cambia inmediatamente:
 
 ```js
 ref.current = 5;
@@ -278,20 +278,20 @@ console.log(ref.current); // 5
 
 Esto es porque **la propia ref es un objeto normal de JavaScript,** así que se comporta como uno.
 
-Tampoco tienes que preocuparte por [evitar la mutación](/learn/updating-objects-in-state) cuando trabajas con una ref. Siempre y cuando el objeto que estás mutando no está siendo usado para la renderización, a React no le importa lo que hagas con la ref o con su contenido.
+Tampoco tienes que preocuparte por [evitar la mutación](/learn/updating-objects-in-state) cuando trabajas con una ref. Siempre y cuando el objeto que estás mutando no se esté usando para el renderizado, a React no le importa lo que hagas con la ref o con su contenido.
 
-## Las Refs y el DOM {/*refs-and-the-dom*/}
+## Las refs y el DOM {/*refs-and-the-dom*/}
 
-Puedes apuntar una ref hacia cualquier valor. Sin embargo, el caso de uso más común para una ref es acceder a un elemento del DOM. Por ejemplo, esto es útil cuando quieres enfocar un input programáticamente. Cuando pasas una ref a un atributo `ref` en JSX, así `<div ref={myRef}>`, React colocará el elemento del DOM correspondiente en `myRef.current`. Puedes leer más sobre esto en [Manipulando el DOM con refs.](/learn/manipulating-the-dom-with-refs)
+Puedes apuntar una ref hacia cualquier valor. Sin embargo, el caso de uso más común para una ref es acceder a un elemento del DOM. Por ejemplo, esto es útil cuando quieres enfocar un input programáticamente. Cuando pasas una ref a un atributo `ref` en JSX, así `<div ref={myRef}>`, React colocará el elemento del DOM correspondiente en `myRef.current`. Puedes leer más sobre esto en [Manipular el DOM con refs.](/learn/manipulating-the-dom-with-refs)
 
 <Recap>
 
-- Las refs son una escotilla de escape para quedarse con valores que no son usados para la renderización. No los necesitarás a menudo.
-- Una ref es un objeto plano de JavaScript con una sola propiedad llamada `current`, la cual puedes leer o asignarle un valor.
+- Las refs son una puerta de escape para guardar valores que no se usan en el renderizado. No las necesitarás a menudo.
+- Una ref es un objeto plano de JavaScript con una sola propiedad llamada `current`, que puedes leer o asignarle un valor.
 - Puedes pedirle a React que te de una ref llamando al Hook `useRef`.
-- Como el estado, las refs retienen información entre los re-renderizados de un componente.
-- A diferencia del estado, asignar el valor de `current` de una ref no desencadena un re-renderizado.
-- No leas o escribas `ref.current` durante la renderización. Esto hace que tu componente sea díficil de predecir.
+- Como el estado, las refs retienen información entre los rerenderizados de un componente.
+- A diferencia del estado, asignar el valor de `current` de una ref no desencadena un rerenderizado.
+- No leas o escribas `ref.current` durante el renderizado. Esto hace que tu componente sea difícil de predecir.
 
 </Recap>
 
@@ -301,11 +301,11 @@ Puedes apuntar una ref hacia cualquier valor. Sin embargo, el caso de uso más c
 
 #### Arregla un input de chat roto {/*fix-a-broken-chat-input*/}
 
-Escribe un mensaje y haz clic en "Enviar". Notarás que hay un retraso de tres segundos antes de que veas la alerta de "Enviado!". Durante este retraso, puedes ver un botón de "Deshacer". Haz clic en él. Este botón de "Deshacer" se supone que debe evitar que el mensaje de "Enviado!" aparezca. Hace esto llamando [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout) para el identificador del timeout guardado durante `handleSend`. Sin embargo, incluso después de que "Deshacer" es clicado, el mensaje de "Enviado!" sigue apareciendo. Encuentra por qué no funciona, y arréglalo.
+Escribe un mensaje y haz clic en "Enviar". Notarás que hay un retraso de tres segundos antes de que veas la alerta de "¡Enviado!". Durante este retraso, puedes ver un botón de "Deshacer". Haz clic en él. Este botón de "Deshacer" se supone que debe evitar que el mensaje de "¡Enviado!" aparezca. Hace esto llamando a [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout) para el identificador del timeout guardado durante `handleSend`. Sin embargo, incluso después de hacer clic en "Deshacer", el mensaje de "¡Enviado!" sigue apareciendo. Encuentra por qué no funciona, y arréglalo.
 
 <Hint>
 
-Variables comunes como `let timeoutID` no "sobreviven" entre los re-renderizados porque cada renderizado ejecuta tu componente (e inicializa sus variables) desde cero. ¿Deberías guardar el identificador del timeout en algún otro lugar?
+Variables comunes como `let timeoutID` no "sobreviven" entre rerenderizados porque cada renderizado ejecuta tu componente (e inicializa sus variables) desde cero. ¿Deberías guardar el identificador del timeout en algún otro lugar?
 
 </Hint>
 
@@ -322,7 +322,7 @@ export default function Chat() {
   function handleSend() {
     setIsSending(true);
     timeoutID = setTimeout(() => {
-      alert('Enviado!');
+      alert('¡Enviado!');
       setIsSending(false);
     }, 3000);
   }
@@ -358,7 +358,7 @@ export default function Chat() {
 
 <Solution>
 
-Sea cuando sea que tu componente se re-renderice (tal y como cuando asignas un estado), todas las variables locales se inicializan desde cero. Esto es porque no puedes guardar el identificador del timeout en una variable local como `timeoutID` y luego esperar que otro manejador de eventos lo "vea" en el futuro. En cambio, almacénalo en una ref, el cual React preservará entre renderizados.
+Sin importar cuándo tu componente se rerenderice (como cuando asignas el estado), todas las variables locales se inicializan desde cero. Por eso es que no puedes guardar el identificador del timeout en una variable local como `timeoutID` y luego esperar que otro manejador de eventos lo "vea" en el futuro. En cambio, almacénalo en una ref, que React preservará entre renderizados.
 
 <Sandpack>
 
@@ -373,7 +373,7 @@ export default function Chat() {
   function handleSend() {
     setIsSending(true);
     timeoutRef.current = setTimeout(() => {
-      alert('Enviado!');
+      alert('¡Enviado!');
       setIsSending(false);
     }, 3000);
   }
@@ -410,7 +410,7 @@ export default function Chat() {
 </Solution>
 
 
-#### Arreglar un componente fallando al re-renderizar {/*fix-a-component-failing-to-re-render*/}
+#### Arregla un componente que no logra rerenderizar {/*fix-a-component-failing-to-re-render*/}
 
 Este botón se supone que alterna entre mostrar "Encendido" y "Apagado". Sin embargo, siempre muestra "Apagado". ¿Qué está mal en este código? Arréglalo.
 
@@ -436,7 +436,7 @@ export default function Toggle() {
 
 <Solution>
 
-En este ejemplo, el valor actual de una ref es usado para calcular la salida de la renderización: `{isOnRef.current ? 'Encendido' : 'Apagado'}`. Esta es una señal de que esta información no debería estar en una ref, y en su lugar debería estar colocada en el estado. Para arreglarlo, quita la ref y en su lugar usa el estado:
+En este ejemplo, el valor actual de una ref se usa para calcular la salida del renderizado: `{isOnRef.current ? 'Encendido' : 'Apagado'}`. Esta es una señal de que esta información no debería estar en una ref, y en su lugar debería colocarse en el estado. Para arreglarlo, quita la ref y en su lugar usa el estado:
 
 <Sandpack>
 
@@ -460,17 +460,17 @@ export default function Toggle() {
 
 </Solution>
 
-#### Arregla el rebote {/*fix-debouncing*/}
+#### Arregla el _debounce_ {/*fix-debouncing*/}
 
-En este ejemplo, todos los manejadores de clic están ["rebotados".](https://redd.one/blog/debounce-vs-throttle) Para ver que significa esto, presiona uno de los botones. Nota como el mensaje aparece un segundo después. Si presionas el botón mientras esperas el mensaje, el temporizador se reiniciará. Así que mantente cliqueando el mismo botón rápido muchas veces, el mensaje no aparecerá hasta un segundo *después* de que pares de hacer clic. El rebote te permite retrasar algunas acciones hasta que el usuario "pare de hacer cosas".
+En este ejemplo, todos los manejadores de clic usan [el "corte de rebote" o _"debounce"_.](https://redd.one/blog/debounce-vs-throttle) Para ver que significa esto, presiona uno de los botones. Fíjate como el mensaje aparece un segundo después. Si presionas el botón mientras esperas el mensaje, el temporizador se reiniciará. Así que si te mantienes cliqueando el mismo botón rápidamente muchas veces, el mensaje no aparecerá hasta un segundo *después* de que pares de hacer clic. El _debounce_ te permite retrasar algunas acciones hasta que el usuario "pare de hacer cosas".
 
-Este ejemplo funciona, pero no tan bien como se esperaba. Los botones no son independientes. Para ver el problema, haz clic en uno de los botones, y luego inmediatamente haz clic en otro botón. Esperarías que después de un retraso, verías el mensaje del botón. Pero solo el mensaje del último botón se muestra. El mensaje del primer botón se pierde.
+Este ejemplo funciona, pero no tan bien como se esperaba. Los botones no son independientes. Para ver el problema, haz clic en uno de los botones, y luego inmediatamente haz clic en otro botón. Esperarías que después de un retraso, podrías ver los mensajes de ambos botones. Pero solo se muestra el mensaje del último botón. El mensaje del primer botón se pierde.
 
 ¿Por qué los botones están interfiriendo con los demás? Encuentra y arregla el problema.
 
 <Hint>
 
-La última variable de timeout es compartida entre todos los componentes `DebouncedButton`. Por eso al hacer clic en un botón reinicia el timeout de otro botón. ¿Puedes almacenar un identificador de timeout separado para cada botón?
+La variable del último ID del timeout se comparte entre todos los componentes `DebouncedButton`. Por eso si se hace clic en un botón se reinicia el timeout de otro botón. ¿Puedes almacenar un ID de timeout por separado para cada botón?
 
 </Hint>
 
@@ -498,17 +498,17 @@ export default function Dashboard() {
   return (
     <>
       <DebouncedButton
-        onClick={() => alert('Cohete lanzado!')}
+        onClick={() => alert('¡Cohete lanzado!')}
       >
         Lanza el cohete
       </DebouncedButton>
       <DebouncedButton
-        onClick={() => alert('Sopa hervida!')}
+        onClick={() => alert('¡Sopa hervida!')}
       >
         Hierve la sopa
       </DebouncedButton>
       <DebouncedButton
-        onClick={() => alert('Canción de cuna cantada!')}
+        onClick={() => alert('¡Canción de cuna cantada!')}
       >
         Canta una canción de cuna
       </DebouncedButton>
@@ -525,7 +525,7 @@ button { display: block; margin: 10px; }
 
 <Solution>
 
-Una variable como `timeoutID` es compartida entre todos los componentes. Esto es porque al hacer clic en el segundo botón reinicia el timeout pendiente del primer botón. Para solucionar esto, puedes guardar el timeout en una ref. Cada botón tendrá su propia ref, así no tendrán conflicto con los demás botones. Fíjate como al hacer clic a dos botones rápido se mostrarán ambos mensajes.
+Una variable como `timeoutID` se comparte entre todos los componentes. Por esto si se hace clic en el segundo botón se reinicia el timeout pendiente del primer botón. Para solucionarlo, puedes guardar el timeout en una ref. Cada botón tendrá su propia ref, así no tendrán conflicto con los demás botones. Fíjate como al hacer clic a dos botones rápidamente se mostrarán ambos mensajes.
 
 <Sandpack>
 
@@ -550,17 +550,17 @@ export default function Dashboard() {
   return (
     <>
       <DebouncedButton
-        onClick={() => alert('Cohete lanzado!')}
+        onClick={() => alert('¡Cohete lanzado!')}
       >
         Lanza el cohete
       </DebouncedButton>
       <DebouncedButton
-        onClick={() => alert('Sopa hervida!')}
+        onClick={() => alert('¡Sopa hervida!')}
       >
         Hierve la sopa
       </DebouncedButton>
       <DebouncedButton
-        onClick={() => alert('Canción de cuna cantada!')}
+        onClick={() => alert('¡Canción de cuna cantada!')}
       >
         Canta una canción de cuna
       </DebouncedButton>
@@ -577,11 +577,11 @@ button { display: block; margin: 10px; }
 
 </Solution>
 
-#### Leer el último estado {/*read-the-latest-state*/}
+#### Lee el último estado {/*read-the-latest-state*/}
 
-En este ejemplo, después de que presionas "Enviar", hay un pequeño retraso antes de que el mensaje sea mostrado. Escribe "hola", presiona Enviar, y luego rápidamente edita el input otra véz. A pesar de tus cambios, la alerta seguiría mostrando "hola" (el cual fue el valor del estado [en el momento](/learn/state-as-a-snapshot#state-over-time) en que el botón fue presionado).
+En este ejemplo, después de que presionas "Enviar", hay un pequeño retraso antes de que el mensaje se muestre. Escribe "hola", presiona Enviar, y luego rápidamente edita el input otra vez. A pesar de tus cambios, la alerta seguirá mostrando "hola" (que fue el valor del estado [en el momento](/learn/state-as-a-snapshot#state-over-time) en que se presionó el botón).
 
-Usualmente, este comportamiento es lo que quieres en una aplicación. Sin embargo, hay algunos casos ocasionales donde quieres que algún código asíncrono lea la *última* versión de algún estado. ¿Puedes pensar en alguna manera de hacer que la alerta muestre el texto *actual* del input en lugar de el que estaba al momento del clic?
+Normalmente, este es el comportamiento que quieres en una aplicación. Sin embargo, en ocasiones quieres que algún código asíncrono lea la *última* versión de algún estado. ¿Se te ocurre alguna manera de hacer que la alerta muestre el texto *actual* del input en lugar del que estaba en momento del clic?
 
 <Sandpack>
 
@@ -616,7 +616,7 @@ export default function Chat() {
 
 <Solution>
 
-El estado funciona [como una instantánea](/learn/state-as-a-snapshot), así que no puedes leer el último estado de una operación asíncrona como un timeout. Sin embargo, puedes guardar el último texto del input en una ref. Una ref es mutable, así que puedes leer la propiedad `current` en cualquier momento. Como el texto actual también es usado para la renderización, en este ejemplo, necesitaras *tanto* una variable de estado (para la renderización), *como* una ref (para leerlo en el timeout). Necesitarás actualizar el valor actual de la ref manualmente.
+El estado funciona [como una instantánea](/learn/state-as-a-snapshot), así que no puedes leer el último estado de una operación asíncrona como un timeout. Sin embargo, puedes guardar el último texto del input en una ref. Una ref es mutable, así que puedes leer la propiedad `current` en cualquier momento. Como el texto actual también se usa para el renderizado, en este ejemplo, necesitaras *tanto* una variable de estado (para el renderizado), *como* una ref (para leerlo en el timeout). Necesitarás actualizar el valor actual de la ref manualmente.
 
 <Sandpack>
 
@@ -657,4 +657,4 @@ export default function Chat() {
 
 </Solution>
 
-</Challenges>
\ No newline at end of file
+</Challenges>

From de0d35aba3af45ee3e80148a3de123521aa05107 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= <rmartinezfraga@yandex.com>
Date: Sat, 22 Oct 2022 21:45:47 -0400
Subject: [PATCH 5/5] Update referencing-values-with-refs.md

---
 beta/src/content/learn/referencing-values-with-refs.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/referencing-values-with-refs.md b/beta/src/content/learn/referencing-values-with-refs.md
index 2eb573948..734e136ce 100644
--- a/beta/src/content/learn/referencing-values-with-refs.md
+++ b/beta/src/content/learn/referencing-values-with-refs.md
@@ -581,7 +581,7 @@ button { display: block; margin: 10px; }
 
 En este ejemplo, después de que presionas "Enviar", hay un pequeño retraso antes de que el mensaje se muestre. Escribe "hola", presiona Enviar, y luego rápidamente edita el input otra vez. A pesar de tus cambios, la alerta seguirá mostrando "hola" (que fue el valor del estado [en el momento](/learn/state-as-a-snapshot#state-over-time) en que se presionó el botón).
 
-Normalmente, este es el comportamiento que quieres en una aplicación. Sin embargo, en ocasiones quieres que algún código asíncrono lea la *última* versión de algún estado. ¿Se te ocurre alguna manera de hacer que la alerta muestre el texto *actual* del input en lugar del que estaba en momento del clic?
+Normalmente, este es el comportamiento que quieres en una aplicación. Sin embargo, en ocasiones quieres que algún código asíncrono lea la *última* versión de algún estado. ¿Se te ocurre alguna manera de hacer que la alerta muestre el texto *actual* del input en lugar del que estaba en el momento del clic?
 
 <Sandpack>