diff --git a/beta/src/content/apis/react/useRef.md b/beta/src/content/apis/react/useRef.md index f76818cb1..d66670e54 100644 --- a/beta/src/content/apis/react/useRef.md +++ b/beta/src/content/apis/react/useRef.md @@ -4,7 +4,7 @@ title: useRef -`useRef` is a React Hook that lets you reference a value that's not needed for rendering. +`useRef` es un React Hook que te permite referenciar un valor que no es necesario para el renderizado. ```js const ref = useRef(initialValue) @@ -16,11 +16,11 @@ const ref = useRef(initialValue) --- -## Usage {/*usage*/} +## Uso {/*usage*/} -### Referencing a value with a ref {/*referencing-a-value-with-a-ref*/} +### Referenciar un valor con una referencia {/*referencing-a-value-with-a-ref*/} -Call `useRef` at the top level of your component to declare one or more [refs.](/learn/referencing-values-with-refs) +Llame a `useRef` en el nivel superior de su componente para declarar uno o más [referencias.](/learn/referencing-values-with-refs) ```js [[1, 4, "intervalRef"], [3, 4, "0"]] import { useRef } from 'react'; @@ -30,11 +30,11 @@ function Stopwatch() { // ... ``` -`useRef` returns a ref object with a single `current` property initially set to the initial value you provided. +`useRef` devuelve una referencia al objeto con una sola propiedad `actual` Establecida inicialmente con el Valor inicial que usted proporcionó. -On the next renders, `useRef` will return the same object. You can change its `current` property to store information and read it later. This might remind you of [state](/apis/react/useState), but there is an important difference. +En los siguientes renderizados, `useRef` devolverá el mismo objeto. Puedes cambiar su propiedad `actual` para almacenar información y leerla más tarde. Esto puede recordarte a [estado](/apis/react/useState), pero hay una diferencia importante. -**Changing a ref does not trigger a re-render.** This means refs are perfect for storing information that doesn't affect the visual output of your component. For example, if you need to store an [interval ID](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) and retrieve it later, you can put it in a ref. To update the value inside the ref, you need to manually change its `current` property: +**El cambio de una referencia no provoca una nueva renderización.** Esto significa que las referencias son perfectas para almacenar información que no afecta a la salida visual de su componente. Por ejemplo, si necesita almacenar un [ID de intervalo](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) y recuperarlo más tarde, puedes ponerlo en una referencia. Para actualizar el valor dentro de la referencia, es necesario cambiar manualmente supropiedad `actual`: ```js [[2, 5, "intervalRef.current"]] function handleStartClick() { @@ -45,7 +45,7 @@ function handleStartClick() { } ``` -Later, you can read that interval ID from the ref so that you can call [clear that interval](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval): +Más tarde, puedes leer el ID de ese intervalo desde la referencia para poder llamar a [borrar ese intervalo](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval): ```js [[2, 2, "intervalRef.current"]] function handleStopClick() { @@ -54,19 +54,19 @@ function handleStopClick() { } ``` -By using a ref, you ensure that: +Al utilizar una referencia, te aseguras de que: -- You can **store information** between re-renders (unlike regular variables, which reset on every render). -- Changing it **does not trigger a re-render** (unlike state variables, which trigger a re-render). -- The **information is local** to each copy of your component (unlike the variables outside, which are shared). +- Puedes **almacenar información** entre renderizados (a diferencia de las variables regulares, que se reinician en cada renderizado). +- El cambio de la misma **no desencadena un renderizado** (a diferencia de las variables de estado, que desencadenan un renderizado). +- La **información es local** para cada copia de su componente (a diferencia de las variables externas, que son compartidas). -Changing a ref does not trigger a re-render, so refs are not appropriate for storing information that you want to display on the screen. Use state for that instead. Read more about [choosing between `useRef` and `useState`.](/learn/referencing-values-with-refs#differences-between-refs-and-state) +El cambio de una referencia no desencadena un renderizado, por lo que las referencias no son apropiadas para almacenar información que se quiere mostrar en la pantalla. Utiliza el estado para eso. Leer más sobre [elegir entre `useRef` y `useState`].(/learn/referencing-values-with-refs#differences-between-refs-and-state) - + -#### Click counter {/*click-counter*/} +#### Contador de clics {/*click-counter*/} -This component uses a ref to keep track of how many times the button was clicked. Note that it's okay to use a ref instead of state here because the click count is only read and written in an event handler. +Este componente utiliza una referencia para llevar la cuenta de las veces que se ha pulsado el botón. Tenga en cuenta que está bien usar una referencia en lugar de un estado aquí porque el recuento de clics sólo se lee y se escribe en un controlador de eventos. @@ -83,7 +83,7 @@ export default function Counter() { return ( ); } @@ -91,13 +91,13 @@ export default function Counter() { -If you show `{ref.current}` in the JSX, the number won't update on click. This is because setting `ref.current` does not trigger a re-render. Information that's used for rendering should be state instead. +Si muestra `{ref.current}` en el JSX, el número no se actualizará al hacer clic. Esto se debe a que el establecimiento de `ref.current` no desencadena un renderizado. La información que se utiliza para el renderizado debe ser el estado en su lugar. -#### A stopwatch {/*a-stopwatch*/} +#### Un cronómetro {/*a-stopwatch*/} -This example uses a combination of state and refs. Both `startTime` and `now` are state variables because they are used for rendering. But we also need to hold an [interval ID](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) so that we can stop the interval on button press. Since the interval ID is not used for rendering, it's appropriate to keep it in a ref, and manually update it. +Este ejemplo utiliza una combinación de estado y referencias. Tanto `startTime` como `now` son variables de estado porque se utilizan para la renderización. Pero también necesitamos mantener un [ID de intervalo](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) para que podamos detener el intervalo al pulsar el botón. Dado que el ID del intervalo no se utiliza para el renderizado, es conveniente mantenerlo en una referencia, y actualizarlo manualmente. @@ -130,12 +130,12 @@ export default function Stopwatch() { return ( <> -

Time passed: {secondsPassed.toFixed(3)}

+

El tiempo transcurre: {secondsPassed.toFixed(3)}

); @@ -150,57 +150,57 @@ export default function Stopwatch() { -**Do not write _or read_ `ref.current` during rendering.** +**No escriba _ni lea_ `ref.current` durante la renderización.** -React expects that the body of your component [behaves like a pure function](/learn/keeping-components-pure): +React espera que el cuerpo de tu componente [se comporte como una función pura](/learn/keeping-components-pure): -- If the inputs ([props](/learn/passing-props-to-a-component), [state](/learn/state-a-components-memory), and [context](/learn/passing-data-deeply-with-context)) are the same, it should return exactly the same JSX. -- Calling it in a different order or with different arguments should not affect the results of other calls. +- Si las entradas ([props](/learn/passing-props-to-a-component), [state](/learn/state-a-components-memory), y [context](/learn/passing-data-deeply-with-context)) son iguales, debería devolver exactamente el mismo JSX. +- Llamarla en un orden diferente o con argumentos diferentes no debería afectar a los resultados de otras llamadas. -Reading or writing a ref **during rendering** breaks these expectations. +Leer o escribir una referencia **durante el renderizado** rompe estas expectativas. ```js {3-4,6-7} function MyComponent() { // ... - // 🚩 Don't write a ref during rendering + // 🚩 No escriba una referencia durante el renderizado myRef.current = 123; // ... - // 🚩 Don't read a ref during rendering + // 🚩 No leer una referencia durante el renderizado return

{myOtherRef.current}

; } ``` -You can read or write refs **from event handlers or effects instead**. +Puedes leer o escribir referencias **desde manejadores de eventos o efectos en su lugar**. ```js {4-5,9-10} function MyComponent() { // ... useEffect(() => { - // ✅ You can read or write refs in effects + // ✅ Se pueden leer o escribir referencias en efectos myRef.current = 123; }); // ... function handleClick() { - // ✅ You can read or write refs in event handlers + // ✅ Puedes leer o escribir referencias en los manejadores de eventos doSomething(myOtherRef.current); } // ... } ``` -If you *have to* read [or write](/apis/react/useState#storing-information-from-previous-renders) something during rendering, [use state](/apis/react/useState) instead. +Si tiene que leer [o escribir](/apis/react/useState#storing-information-from-previous-renders) algo durante la renderizacion, [utilice el estado](/apis/react/useState) en su lugar. -When you break these rules, your component might still work, but most of the newer features we're adding to React will rely on these expectations. Read more about [keeping your components pure.](/learn/keeping-components-pure#where-you-can-cause-side-effects) +Si rompes estas reglas, tu componente puede seguir funcionando, pero la mayoría de las nuevas características que estamos añadiendo a React se basarán en estas expectativas. Lee más sobre [mantener tus componentes puros.](/learn/keeping-components-pure#where-you-can-cause-side-effects) --- -### Manipulating the DOM with a ref {/*manipulating-the-dom-with-a-ref*/} +### Manipulación del DOM con una referencia {/*manipulating-the-dom-with-a-ref*/} -It's particularly common to use a ref to manipulate the [DOM.](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) React has built-in support for this. +Es particularmente común utilizar una referencia para manipular el [DOM].(https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) React tiene soporte incorporado para esto. -First, declare a ref object with an initial value of `null`: +En primer lugar, declare una referencia al objeto con un valor inicial de `null`: ```js [[1, 4, "inputRef"], [3, 4, "null"]] import { useRef } from 'react'; @@ -210,14 +210,14 @@ function MyComponent() { // ... ``` -Then pass your ref object as the `ref` attribute to the JSX of the DOM node you want to manipulate: +Entonces pasa tu objeto de referencia como el atributo `ref` al JSX del nodo DOM que quieres manipular: ```js [[1, 2, "inputRef"]] // ... return ; ``` -After React creates the DOM node and puts it on the screen, React will set the `current` property of your ref object to that DOM node. Now you can access the ``'s DOM node and call methods like [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus): +Después de que React cree el nodo DOM y lo ponga en la pantalla, React establecerá la propiedad `actual` de su objeto de referencia a ese nodo DOM. Ahora puedes acceder al nodo DOM de `` y llamar a métodos como [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus): ```js [[2, 2, "inputRef.current"]] function handleClick() { @@ -225,15 +225,15 @@ After React creates the DOM node and puts it on the screen, React will set the < } ``` -React will set the `current` property back to `null` when the node is removed from the screen. +React devolverá la propiedad `actual` a `null` cuando el nodo sea eliminado de la pantalla. -Read more about [manipulating the DOM with refs.](/learn/manipulating-the-dom-with-refs) +Más información sobre la[manipulación del DOM con referencias.](/learn/manipulating-the-dom-with-refs) - + -#### Focusing a text input {/*focusing-a-text-input*/} +#### Enfocar una entrada de texto {/*focusing-a-text-input*/} -In this example, clicking the button will focus the input: +En este ejemplo, al hacer clic en el botón se centrará la entrada: @@ -251,7 +251,7 @@ export default function Form() { <> ); @@ -262,9 +262,9 @@ export default function Form() { -#### Scrolling an image into view {/*scrolling-an-image-into-view*/} +#### Desplazamiento de una imagen a la vista {/*scrolling-an-image-into-view*/} -In this example, clicking the button will scroll an image into view. It uses a ref to the list DOM node, and then calls DOM [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) API to find the image we want to scroll to. +En este ejemplo, al hacer clic en el botón se desplazará una imagen a la vista. Utiliza una referencia al nodo DOM de la lista, y luego llama al DOM [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) API para encontrar la imagen a la que queremos desplazarnos. @@ -276,7 +276,7 @@ export default function CatFriends() { function scrollToIndex(index) { const listNode = listRef.current; - // This line assumes a particular DOM structure: + // Esta línea asume una estructura DOM particular: const imgNode = listNode.querySelectorAll('li > img')[index]; imgNode.scrollIntoView({ behavior: 'smooth', @@ -355,9 +355,9 @@ li { -#### Playing and pausing a video {/*playing-and-pausing-a-video*/} +#### Reproducir y pausar un vídeo {/*playing-and-pausing-a-video*/} -This example uses a ref to 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 `