From 34ae36c90701b94049e6da54df0b6518da1039a7 Mon Sep 17 00:00:00 2001
From: Aitor Lancharro <aitor.lancharro@gmail.com>
Date: Fri, 14 Oct 2022 19:22:10 +0200
Subject: [PATCH 1/2] forwardRef

---
 beta/src/content/apis/react/forwardRef.md | 88 +++++++++++------------
 1 file changed, 44 insertions(+), 44 deletions(-)

diff --git a/beta/src/content/apis/react/forwardRef.md b/beta/src/content/apis/react/forwardRef.md
index 6a6287b68..e527f7c30 100644
--- a/beta/src/content/apis/react/forwardRef.md
+++ b/beta/src/content/apis/react/forwardRef.md
@@ -4,7 +4,7 @@ title: forwardRef
 
 <Intro>
 
-`forwardRef` lets your component expose a DOM node to parent component with a [ref.](/learn/manipulating-the-dom-with-refs)
+`forwardRef` permite a su componente exponer un nodo DOM al componente padre con un [ref.](/learn/manipulating-the-dom-with-refs)
 
 ```js
 const SomeComponent = forwardRef(render)
@@ -16,11 +16,11 @@ const SomeComponent = forwardRef(render)
 
 ---
 
-## Usage {/*usage*/}
+## Uso {/*usage*/}
 
-### Exposing a DOM node to the parent component {/*exposing-a-dom-node-to-the-parent-component*/}
+### Exponer un nodo DOM al componente padre {/*exposing-a-dom-node-to-the-parent-component*/}
 
-By default, each component's DOM nodes are private. However, sometimes it's useful to expose a DOM node to the parent--for example, to allow focusing it. To opt in, wrap your component definition into `forwardRef()`:
+Por defecto, los nodos DOM de cada componente son privados. Sin embargo, a veces es útil exponer un nodo DOM al padre, por ejemplo, para permitir su enfoque. Para optar por ello, envuelve la definición de su componente en `forwardRef()`:
 
 ```js {3,11}
 import { forwardRef } from 'react';
@@ -36,7 +36,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 });
 ```
 
-You will receive a <CodeStep step={1}>ref</CodeStep> as the second argument after props. Pass it to the DOM node that you want to expose:
+Recibirás un <CodeStep step={1}>ref</CodeStep> como segundo argumento después de props. Pásalo al nodo DOM que quieras exponer:
 
 ```js {8} [[1, 3, "ref"], [1, 8, "ref", 30]]
 import { forwardRef } from 'react';
@@ -52,7 +52,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 });
 ```
 
-This lets the parent `Form` component access the <CodeStep step={2}>`<input>` DOM node</CodeStep> exposed by `MyInput`:
+Esto permite al componente padre `Form` acceder al <CodeStep step={2}>`<input>` nodo DOM</CodeStep> expuesto por `MyInput`:
 
 ```js [[1, 2, "ref"], [1, 10, "ref", 41], [2, 5, "ref.current"]]
 function Form() {
@@ -73,15 +73,15 @@ function Form() {
 }
 ```
 
-This `Form` component [passes a ref](/apis/useref#manipulating-the-dom-with-a-ref) to `MyInput`. The `MyInput` component *forwards* that ref to the `<input>` browser tag. As a result, the `Form` component can access that `<input>` DOM node and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it.
+Éste componente `Form` [pasa un ref](/apis/useref#manipulating-the-dom-with-a-ref) a `MyInput`. El componente `MyInput` *envía* esa referencia al tag `<input>` del navegador. Como resultado, el componente `Form` puede acceder a ese nodo DOM `<input>` y llamar a [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) en él.
 
-Keep in mind that by exposing a ref to the DOM node inside your component, you're making it harder to change your component's internals later. You will typically expose DOM nodes from reusable low-level components like buttons or text inputs, but you won't do it for application-level components like an avatar or a comment.
+Ten en cuenta que al exponer una referencia al nodo DOM dentro de tu componente, estás dificultando la posibilidad de cambiar el interior de tu componente más adelante. Por lo general, expondrás los nodos DOM de los componentes reutilizables de bajo nivel como los botones o las entradas de texto, pero no lo harás para los componentes de nivel de aplicación como un avatar o un comentario.
 
 <Recipes title="Examples of forwarding a ref">
 
-#### Focusing a text input {/*focusing-a-text-input*/}
+#### Enfocar una entrada de texto {/*focusing-a-text-input*/}
 
-Clicking the button will focus the input. The `Form` component defines a ref and passes it to the `MyInput` component. The `MyInput` component fowards that ref to the browser `<input>`. This lets the `Form` component focus the `<input>`.
+Al hacer clic en el botón se centrará la entrada. El componente `Form` define una referencia y la pasa al componente `MyInput`. El componente `MyInput` reenvía esa referencia al navegador `<input>`. Esto permite que el componente `Form` enfoque el `<input>`.
 
 <Sandpack>
 
@@ -133,9 +133,9 @@ input {
 
 <Solution />
 
-#### Playing and pausing a video {/*playing-and-pausing-a-video*/}
+#### Reproducir y pausar un vídeo {/*playing-and-pausing-a-video*/}
 
-Clicking the button will call [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) and [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) on a `<video>` DOM node. The `App` component defines a ref and passes it to the `MyVideoPlayer` component. The `MyVideoPlayer` component forwards that ref to the browser `<video>` node. This lets the `App` component play and pause the `<video>`.
+Al hacer clic en el botón, se llamará a [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) y [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) en un `<video>` del nodo DOM. El componente `App` define un ref y lo pasa al componente `MyVideoPlayer`. El componente `MyVideoPlayer` reenvía esa referencia al nodo `<video>` del navegador. Esto permite al componente `App` reproducir y pausar el `<video>`.
 
 <Sandpack>
 
@@ -194,9 +194,9 @@ button { margin-bottom: 10px; margin-right: 10px; }
 
 ---
 
-### Forwarding a ref through multiple components {/*forwarding-a-ref-through-multiple-components*/}
+### Reenvío de una referencia a través de múltiples componentes {/*forwarding-a-ref-through-multiple-components*/}
 
-Instead of forwarding a `ref` to a DOM node, you can forward it to your own component like `MyInput`:
+En lugar de reenviar un `ref` a un nodo DOM, puedes reenviarlo a tu propio componente como `MyInput`.:
 
 ```js {1,5}
 const FormField = forwardRef(function FormField(props, ref) {
@@ -210,7 +210,7 @@ const FormField = forwardRef(function FormField(props, ref) {
 });
 ```
 
-If that `MyInput` component forwards a ref to its `<input>`, a ref to `FormField` will give you that `<input>`:
+Si ese componente `MyInput` reenvía un ref a su `<input>`, un ref a `FormField` te dará ese `<input>`:
 
 ```js {2,5,10}
 function Form() {
@@ -231,7 +231,7 @@ function Form() {
 }
 ```
 
-The `Form` component defines a ref and passes it to `FormField`. The `FormField` component forwards that ref to `MyInput`, which forwards this ref to a browser `<input>` DOM node. This is how `Form` accesses that DOM node.
+El componente `Form` del formulario define una referencia y la pasa a `FormField`. El componente `FormField` reenvía esa referencia a `MyInput`, que reenvía esta referencia a un nodo DOM del navegador `<input>`. Así es como `Form` accede a ese nodo DOM.
 
 
 <Sandpack>
@@ -309,9 +309,9 @@ input, button {
 
 ---
 
-### Exposing an imperative handle instead of a DOM node {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
+### Exposición de un manejador imperativo en lugar de un nodo DOM {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
 
-Instead of exposing an entire DOM node, you can expose a custom object, called an *imperative handle,* with a more constrained set of methods. To do this, you'd need to define a separate ref to hold the DOM node:
+En lugar de exponer un nodo DOM completo, puedes exponer un objeto personalizado, llamado *imperative handle*, con un conjunto de métodos más restringido. Para hacer esto, tendrías que definir un ref separado para mantener el nodo DOM:
 
 ```js {2,6}
 const MyInput = forwardRef(function MyInput(props, ref) {
@@ -323,7 +323,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 });
 ```
 
-Then pass the `ref` you received to [`useImperativeHandle`](/apis/react/useImperativeHandle) and specify the value you want to expose to the `ref`:
+A continuación, pasa la `ref` que has recibido a [`useImperativeHandle`](/apis/react/useImperativeHandle) y especifica el valor que quieres exponer a la `ref`:
 
 ```js {6-15}
 import { forwardRef, useRef, useImperativeHandle } from 'react';
@@ -346,7 +346,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 });
 ```
 
-If some component gets a ref to `MyInput` now, it will only receive your `{ focus, scrollIntoView }` object instead of the DOM node. This lets you limit the information you expose about your DOM node to the minimum.
+Si algún componente obtiene ahora un ref a `MyInput`, sólo recibirá su objeto `{ focus, scrollIntoView }` en lugar del nodo DOM. Esto le permite limitar la información que expone sobre su nodo DOM al mínimo.
 
 <Sandpack>
 
@@ -405,23 +405,23 @@ input {
 
 </Sandpack>
 
-[Read more about using imperative handles.](/apis/react/useImperativeHandle)
+[Más información sobre el uso de asas imperativas.](/apis/react/useImperativeHandle)
 
 <Pitfall>
 
-**Do not overuse refs.** You should only use refs for *imperative* behaviors that you can't express as props: for example, scrolling to a node, focusing a node, triggering an animation, selecting text, and so on.
+**No abuses de los refs.** Sólo deberías usar refs para comportamientos *imperativos* que no puedes expresar como props: por ejemplo, desplazarse a un nodo, enfocar un nodo, disparar una animación, seleccionar texto, etc.
 
-**If you can express something as a prop, you should not use a ref.** For example, instead of exposing an imperative handle like `{ open, close }` from a `Modal` component, it is better to take `isOpen` as a prop like `<Modal isOpen={isOpen} />`. [Effects](/learn/synchronizing-with-effects) can help you expose imperative behaviors via props.
+**Si puedes expresar algo como un prop, no debes usar un ref.** Por ejemplo, en lugar de exponer un manejador imperativo como `{ open, close }` de un componente `Modal`, es mejor tomar `isOpen` como prop `<Modal isOpen={isOpen} />`. [Effects](/learn/synchronizing-with-effects) puede ayudarte a exponer comportamientos imperativos a través de props.
 
 </Pitfall>
 
 ---
 
-## Reference {/*reference*/}
+## Referencias {/*reference*/}
 
 ### `forwardRef(render)` {/*forwardref*/}
 
-Call `forwardRef()` to let your component receive a ref and forward it to a child component:
+Llama a `forwardRef()` para que su componente reciba un ref y lo reenvíe a un componente hijo:
 
 ```js
 import { forwardRef } from 'react';
@@ -432,24 +432,24 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 
 ```
 
-#### Parameters {/*parameters*/}
+#### Parametros {/*parameters*/}
 
-* `render`: The render function for your component. React calls this function with the props and `ref` that your component received from its parent. The JSX you return will be the output of your component.
+* `render`: La función de renderización de tu componente. React llama a esta función con los props y `ref` que tu componente recibió de su padre. El JSX que devuelve será la salida de tu componente.
 
 #### Returns {/*returns*/}
 
-`forwardRef` returns a React component that you can render in JSX. Unlike React components defined as plain functions, a component returned by `forwardRef` is also able to receive a `ref` prop.
+`forwardRef` devuelve un componente de React que puedes renderizar en JSX. A diferencia de los componentes de React definidos como funciones simples, un componente devuelto por `forwardRef` también puede recibir una proposición `ref`.
 
-#### Caveats {/*caveats*/}
+#### Advertencias {/*caveats*/}
 
-* In Strict Mode, React will **call your render function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your render function is pure (as it should be), this should not affect the logic of your component. The result from one of the calls will be ignored.
+* En el modo estricto, React **llamará a su función de renderizado dos veces** para [ayudarte a encontrar impurezas accidentales.](#my-initializer-or-updater-function-runs-twice) Este es un comportamiento sólo de desarrollo y no afecta a la producción. Si tu función de renderizado es pura (como debería ser), esto no debería afectar a la lógica de tu componente. El resultado de una de las llamadas será ignorado.
 
 
 ---
 
-### `render` function {/*render-function*/}
+### Función `render` {/*render-function*/}
 
-`forwardRef` accepts a render function as an argument. React calls this function with `props` and `ref`:
+`forwardRef` acepta una función de renderizado como argumento. React llama a esta función con `props` y `ref`:
 
 ```js
 const MyInput = forwardRef(function MyInput(props, ref) {
@@ -462,25 +462,25 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 });
 ```
 
-#### Parameters {/*render-parameters*/}
+#### Parametros {/*render-parameters*/}
 
-* `props`: The props passed by the parent component.
+* `props`: Los accesorios pasados por el componente padre.
 
-* `ref`:  The `ref` attribute passed by the parent component. The `ref` can be an object or a function. If the parent component has not passed a ref, it will be `null`. You should either pass the `ref` you receive to another component, or pass it to [`useImperativeHandle`.](/apis/react/useImperativeHandle)
+* `ref`:  El atributo `ref` pasado por el componente padre. El `ref` puede ser un objeto o una función. Si el componente padre no ha pasado un ref, será `null`. Deberá pasar el "ref" que reciba a otro componente, o pasarlo a [`useImperativeHandle`.](/apis/react/useImperativeHandle)
 
 #### Returns {/*render-returns*/}
 
-`forwardRef` returns a React component that you can render in JSX. Unlike React components defined as plain functions, the component returned by `forwardRef` is able to take a `ref` prop.
+`forwardRef` devuelve un componente de React que puedes renderizar en JSX. A diferencia de los componentes de React definidos como funciones simples, el componente devuelto por `forwardRef` puede tomar una proposición `ref`.
 
 ---
 
-## Troubleshooting {/*troubleshooting*/}
+## Solución de problemas {/*troubleshooting*/}
 
-### My component is wrapped in `forwardRef`, but the `ref` to it is always `null` {/*my-component-is-wrapped-in-forwardref-but-the-ref-to-it-is-always-null*/}
+### Mi componente está envuelto en `forwardRef`, pero el `ref` a él es siempre `null`. {/*my-component-is-wrapped-in-forwardref-but-the-ref-to-it-is-always-null*/}
 
-This usually means that you forgot to actually use the `ref` that you received.
+Esto suele significar que se ha olvidado de utilizar el `ref` que ha recibido.
 
-For example, this component doesn't do anything with its `ref`:
+Por ejemplo, este componente no hace nada con su `ref`:
 
 ```js {1}
 const MyInput = forwardRef(function MyInput({ label }, ref) {
@@ -493,7 +493,7 @@ const MyInput = forwardRef(function MyInput({ label }, ref) {
 });
 ```
 
-To fix it, pass the `ref` down to a DOM node or another component that can accept a ref:
+Para solucionarlo, pasa el `ref` a un nodo DOM o a otro componente que pueda aceptar un ref:
 
 ```js {1,5}
 const MyInput = forwardRef(function MyInput({ label }, ref) {
@@ -506,7 +506,7 @@ const MyInput = forwardRef(function MyInput({ label }, ref) {
 });
 ```
 
-The `ref` to `MyInput` could also be `null` if some of the logic is conditional:
+El `ref` a `MyInput` también podría ser `null` si parte de la lógica es condicional:
 
 ```js {1,5}
 const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
@@ -519,7 +519,7 @@ const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
 });
 ```
 
-If `showInput` is `false`, then the ref won't be forwarded to any node, and a ref to `MyInput` will remain empty. This is particularly easy to miss if the condition is hidden inside another component, like `Panel` in this example:
+Si `showInput` es `false`, el ref no será reenviado a ningún nodo, y un ref a `MyInput` permanecerá vacío. Esto es particularmente fácil de pasar por alto si la condición está oculta dentro de otro componente, como `Panel` en este ejemplo:
 
 ```js {5,7}
 const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
@@ -532,4 +532,4 @@ const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
     </label>
   );
 });
-```
+```
\ No newline at end of file

From fdcd2e6f3f559c5d5ec64bef79d8e5cf2d9476d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= <rmartinezfraga@yandex.com>
Date: Sat, 12 Nov 2022 22:16:25 -0500
Subject: [PATCH 2/2] Update forwardRef.md

---
 beta/src/content/apis/react/forwardRef.md | 68 +++++++++++------------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/beta/src/content/apis/react/forwardRef.md b/beta/src/content/apis/react/forwardRef.md
index e527f7c30..6e6cda83d 100644
--- a/beta/src/content/apis/react/forwardRef.md
+++ b/beta/src/content/apis/react/forwardRef.md
@@ -4,7 +4,7 @@ title: forwardRef
 
 <Intro>
 
-`forwardRef` permite a su componente exponer un nodo DOM al componente padre con un [ref.](/learn/manipulating-the-dom-with-refs)
+`forwardRef` le permite a tu componente exponer un nodo DOM al componente padre con una [ref.](/learn/manipulating-the-dom-with-refs)
 
 ```js
 const SomeComponent = forwardRef(render)
@@ -20,7 +20,7 @@ const SomeComponent = forwardRef(render)
 
 ### Exponer un nodo DOM al componente padre {/*exposing-a-dom-node-to-the-parent-component*/}
 
-Por defecto, los nodos DOM de cada componente son privados. Sin embargo, a veces es útil exponer un nodo DOM al padre, por ejemplo, para permitir su enfoque. Para optar por ello, envuelve la definición de su componente en `forwardRef()`:
+Por defecto, los nodos DOM de cada componente son privados. Sin embargo, a veces es útil exponer un nodo DOM al padre, por ejemplo, para permitir enfocarlo. Para permitirlo, envuelve la definición de tu componente con `forwardRef()`:
 
 ```js {3,11}
 import { forwardRef } from 'react';
@@ -36,7 +36,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 });
 ```
 
-Recibirás un <CodeStep step={1}>ref</CodeStep> como segundo argumento después de props. Pásalo al nodo DOM que quieras exponer:
+Recibirás una <CodeStep step={1}>ref</CodeStep> como segundo argumento después de props. Pásala al nodo DOM que quieras exponer:
 
 ```js {8} [[1, 3, "ref"], [1, 8, "ref", 30]]
 import { forwardRef } from 'react';
@@ -73,15 +73,15 @@ function Form() {
 }
 ```
 
-Éste componente `Form` [pasa un ref](/apis/useref#manipulating-the-dom-with-a-ref) a `MyInput`. El componente `MyInput` *envía* esa referencia al tag `<input>` del navegador. Como resultado, el componente `Form` puede acceder a ese nodo DOM `<input>` y llamar a [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) en él.
+Este componente `Form` [pasa una ref](/apis/useref#manipulating-the-dom-with-a-ref) a `MyInput`. El componente `MyInput` *pasa* esa ref a la etiqueta `<input>` del navegador. Como resultado, el componente `Form` puede acceder a ese nodo DOM `<input>` y llamar a [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) en él.
 
-Ten en cuenta que al exponer una referencia al nodo DOM dentro de tu componente, estás dificultando la posibilidad de cambiar el interior de tu componente más adelante. Por lo general, expondrás los nodos DOM de los componentes reutilizables de bajo nivel como los botones o las entradas de texto, pero no lo harás para los componentes de nivel de aplicación como un avatar o un comentario.
+Ten en cuenta que al exponer una ref al nodo DOM dentro de tu componente, estás dificultando la posibilidad de cambiar el interior de tu componente más adelante. Por lo general, expondrás los nodos DOM de los componentes reutilizables de bajo nivel como los botones o las entradas de texto, pero no lo harás para los componentes de nivel de aplicación como un avatar o un comentario.
 
-<Recipes title="Examples of forwarding a ref">
+<Recipes title="Ejemplos del paso de una ref">
 
 #### Enfocar una entrada de texto {/*focusing-a-text-input*/}
 
-Al hacer clic en el botón se centrará la entrada. El componente `Form` define una referencia y la pasa al componente `MyInput`. El componente `MyInput` reenvía esa referencia al navegador `<input>`. Esto permite que el componente `Form` enfoque el `<input>`.
+Al hacer clic en el botón el campo de texto (_input_) tomará el foco. El componente `Form` define una ref y la pasa al componente `MyInput`. El componente `MyInput` la reenvía al elemento nativo `<input>`. Esto permite que el componente `Form` enfoque el `<input>`.
 
 <Sandpack>
 
@@ -135,7 +135,7 @@ input {
 
 #### Reproducir y pausar un vídeo {/*playing-and-pausing-a-video*/}
 
-Al hacer clic en el botón, se llamará a [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) y [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) en un `<video>` del nodo DOM. El componente `App` define un ref y lo pasa al componente `MyVideoPlayer`. El componente `MyVideoPlayer` reenvía esa referencia al nodo `<video>` del navegador. Esto permite al componente `App` reproducir y pausar el `<video>`.
+Al hacer clic en el botón, se llamará a [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) y [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) en un `<video>` del nodo DOM. El componente `App` define una ref y la pasa al componente `MyVideoPlayer`. El componente `MyVideoPlayer` pasa esa ref al nodo `<video>` del navegador. Esto permite al componente `App` reproducir y pausar el `<video>`.
 
 <Sandpack>
 
@@ -194,9 +194,9 @@ button { margin-bottom: 10px; margin-right: 10px; }
 
 ---
 
-### Reenvío de una referencia a través de múltiples componentes {/*forwarding-a-ref-through-multiple-components*/}
+### Pasar una ref a través de múltiples componentes {/*forwarding-a-ref-through-multiple-components*/}
 
-En lugar de reenviar un `ref` a un nodo DOM, puedes reenviarlo a tu propio componente como `MyInput`.:
+En lugar de pasar una `ref` a un nodo DOM, puedes pasarla a un componente propio como `MyInput`.:
 
 ```js {1,5}
 const FormField = forwardRef(function FormField(props, ref) {
@@ -210,7 +210,7 @@ const FormField = forwardRef(function FormField(props, ref) {
 });
 ```
 
-Si ese componente `MyInput` reenvía un ref a su `<input>`, un ref a `FormField` te dará ese `<input>`:
+Si ese componente `MyInput` pasa una ref a su `<input>`, una ref a `FormField` te dará ese `<input>`:
 
 ```js {2,5,10}
 function Form() {
@@ -231,7 +231,7 @@ function Form() {
 }
 ```
 
-El componente `Form` del formulario define una referencia y la pasa a `FormField`. El componente `FormField` reenvía esa referencia a `MyInput`, que reenvía esta referencia a un nodo DOM del navegador `<input>`. Así es como `Form` accede a ese nodo DOM.
+El componente `Form` del formulario define una ref y la pasa a `FormField`. El componente `FormField` pasa esa ref a `MyInput`, que a su vez la pasa a un nodo DOM `<input>`. Así es como `Form` accede a ese nodo DOM.
 
 
 <Sandpack>
@@ -311,7 +311,7 @@ input, button {
 
 ### Exposición de un manejador imperativo en lugar de un nodo DOM {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
 
-En lugar de exponer un nodo DOM completo, puedes exponer un objeto personalizado, llamado *imperative handle*, con un conjunto de métodos más restringido. Para hacer esto, tendrías que definir un ref separado para mantener el nodo DOM:
+En lugar de exponer un nodo DOM completo, puedes exponer un objeto personalizado, llamado manejador imperativo (*imperative handle*), con un conjunto de métodos más restringido. Para hacer esto, tendrías que definir una ref separada para guardar el nodo DOM:
 
 ```js {2,6}
 const MyInput = forwardRef(function MyInput(props, ref) {
@@ -346,7 +346,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 });
 ```
 
-Si algún componente obtiene ahora un ref a `MyInput`, sólo recibirá su objeto `{ focus, scrollIntoView }` en lugar del nodo DOM. Esto le permite limitar la información que expone sobre su nodo DOM al mínimo.
+Si algún componente obtiene ahora una ref a `MyInput`, sólo recibirá su objeto `{ focus, scrollIntoView }` en lugar del nodo DOM. Esto te permite limitar la información que expones sobre tu nodo DOM al mínimo.
 
 <Sandpack>
 
@@ -405,13 +405,13 @@ input {
 
 </Sandpack>
 
-[Más información sobre el uso de asas imperativas.](/apis/react/useImperativeHandle)
+[Más información sobre el uso de manejadores imperativos.](/apis/react/useImperativeHandle)
 
 <Pitfall>
 
-**No abuses de los refs.** Sólo deberías usar refs para comportamientos *imperativos* que no puedes expresar como props: por ejemplo, desplazarse a un nodo, enfocar un nodo, disparar una animación, seleccionar texto, etc.
+**No abuses de las refs.** Sólo deberías usar refs para comportamientos *imperativos* que no puedes expresar como props: por ejemplo, desplazarse a un nodo, enfocar un nodo, desencadenar una animación, seleccionar texto, etc.
 
-**Si puedes expresar algo como un prop, no debes usar un ref.** Por ejemplo, en lugar de exponer un manejador imperativo como `{ open, close }` de un componente `Modal`, es mejor tomar `isOpen` como prop `<Modal isOpen={isOpen} />`. [Effects](/learn/synchronizing-with-effects) puede ayudarte a exponer comportamientos imperativos a través de props.
+**Si puedes expresar algo como una prop, no debes usar una ref.** Por ejemplo, en lugar de exponer un manejador imperativo como `{ open, close }` de un componente `Modal`, es mejor tomar `isOpen` como prop `<Modal isOpen={isOpen} />`. [Effects](/learn/synchronizing-with-effects) puede ayudarte a exponer comportamientos imperativos a través de props.
 
 </Pitfall>
 
@@ -421,7 +421,7 @@ input {
 
 ### `forwardRef(render)` {/*forwardref*/}
 
-Llama a `forwardRef()` para que su componente reciba un ref y lo reenvíe a un componente hijo:
+Llama a `forwardRef()` para que tu componente reciba un ref y la reenvíe a un componente hijo:
 
 ```js
 import { forwardRef } from 'react';
@@ -432,17 +432,17 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 
 ```
 
-#### Parametros {/*parameters*/}
+#### Parámetros {/*parameters*/}
 
-* `render`: La función de renderización de tu componente. React llama a esta función con los props y `ref` que tu componente recibió de su padre. El JSX que devuelve será la salida de tu componente.
+* `render`: La función de renderización de tu componente. React llama a esta función con las props y `ref` que tu componente recibió de su padre. El JSX que devuelve será la salida de tu componente.
 
-#### Returns {/*returns*/}
+#### Devuelve {/*returns*/}
 
-`forwardRef` devuelve un componente de React que puedes renderizar en JSX. A diferencia de los componentes de React definidos como funciones simples, un componente devuelto por `forwardRef` también puede recibir una proposición `ref`.
+`forwardRef` devuelve un componente de React que puedes renderizar en JSX. A diferencia de los componentes de React definidos como funciones simples, un componente devuelto por `forwardRef` también puede recibir una prop `ref`.
 
 #### Advertencias {/*caveats*/}
 
-* En el modo estricto, React **llamará a su función de renderizado dos veces** para [ayudarte a encontrar impurezas accidentales.](#my-initializer-or-updater-function-runs-twice) Este es un comportamiento sólo de desarrollo y no afecta a la producción. Si tu función de renderizado es pura (como debería ser), esto no debería afectar a la lógica de tu componente. El resultado de una de las llamadas será ignorado.
+* En el modo estricto, React **llamará a tu función de renderizado dos veces** para [ayudarte a encontrar impurezas accidentales.](#my-initializer-or-updater-function-runs-twice) Este es un comportamiento sólo de desarrollo y no ocurre en producción. Si tu función de renderizado es pura (como debería ser), esto no debería afectar a la lógica de tu componente. El resultado de una de las llamadas será ignorado.
 
 
 ---
@@ -462,23 +462,23 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 });
 ```
 
-#### Parametros {/*render-parameters*/}
+#### Parámetros {/*render-parameters*/}
 
-* `props`: Los accesorios pasados por el componente padre.
+* `props`: Las props pasadas por el componente padre.
 
-* `ref`:  El atributo `ref` pasado por el componente padre. El `ref` puede ser un objeto o una función. Si el componente padre no ha pasado un ref, será `null`. Deberá pasar el "ref" que reciba a otro componente, o pasarlo a [`useImperativeHandle`.](/apis/react/useImperativeHandle)
+* `ref`:  El atributo `ref` pasado por el componente padre. La `ref` puede ser un objeto o una función. Si el componente padre no ha pasado un ref, será `null`. Deberás pasar la "ref" que recibas o bien a otro componente, o bien a [`useImperativeHandle`.](/apis/react/useImperativeHandle)
 
-#### Returns {/*render-returns*/}
+#### Devuelve {/*render-returns*/}
 
-`forwardRef` devuelve un componente de React que puedes renderizar en JSX. A diferencia de los componentes de React definidos como funciones simples, el componente devuelto por `forwardRef` puede tomar una proposición `ref`.
+`forwardRef` devuelve un componente de React que puedes renderizar en JSX. A diferencia de los componentes de React definidos como funciones simples, el componente devuelto por `forwardRef` puede tomar una prop `ref`.
 
 ---
 
 ## Solución de problemas {/*troubleshooting*/}
 
-### Mi componente está envuelto en `forwardRef`, pero el `ref` a él es siempre `null`. {/*my-component-is-wrapped-in-forwardref-but-the-ref-to-it-is-always-null*/}
+### Mi componente está envuelto en `forwardRef`, pero la `ref` a él es siempre `null`. {/*my-component-is-wrapped-in-forwardref-but-the-ref-to-it-is-always-null*/}
 
-Esto suele significar que se ha olvidado de utilizar el `ref` que ha recibido.
+Esto suele significar que olvidaste utilizar la `ref` que recibiste.
 
 Por ejemplo, este componente no hace nada con su `ref`:
 
@@ -493,7 +493,7 @@ const MyInput = forwardRef(function MyInput({ label }, ref) {
 });
 ```
 
-Para solucionarlo, pasa el `ref` a un nodo DOM o a otro componente que pueda aceptar un ref:
+Para solucionarlo, pasa la `ref` a un nodo DOM o a otro componente que pueda aceptar una ref:
 
 ```js {1,5}
 const MyInput = forwardRef(function MyInput({ label }, ref) {
@@ -506,7 +506,7 @@ const MyInput = forwardRef(function MyInput({ label }, ref) {
 });
 ```
 
-El `ref` a `MyInput` también podría ser `null` si parte de la lógica es condicional:
+La `ref` a `MyInput` también podría ser `null` si parte de la lógica es condicional:
 
 ```js {1,5}
 const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
@@ -519,7 +519,7 @@ const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
 });
 ```
 
-Si `showInput` es `false`, el ref no será reenviado a ningún nodo, y un ref a `MyInput` permanecerá vacío. Esto es particularmente fácil de pasar por alto si la condición está oculta dentro de otro componente, como `Panel` en este ejemplo:
+Si `showInput` es `false`, la ref no será reenviada a ningún nodo, y una ref a `MyInput` permanecerá vacía. Esto es particularmente fácil de pasar por alto si la condición está oculta dentro de otro componente, como `Panel` en este ejemplo:
 
 ```js {5,7}
 const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
@@ -532,4 +532,4 @@ const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
     </label>
   );
 });
-```
\ No newline at end of file
+```