From 102f1efb2924a73884c1c6ff431003d2ab1d9d59 Mon Sep 17 00:00:00 2001
From: Isaias Yafar <abdel07noguera@gmail.com>
Date: Fri, 14 Oct 2022 17:53:46 -0300
Subject: [PATCH 1/2] Translation from English to Spanish

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

diff --git a/beta/src/content/apis/react/useId.md b/beta/src/content/apis/react/useId.md
index 0a3488709..c792146b8 100644
--- a/beta/src/content/apis/react/useId.md
+++ b/beta/src/content/apis/react/useId.md
@@ -4,7 +4,8 @@ title: useId
 
 <Intro>
 
-`useId` is a React Hook for generating unique IDs that can be passed to accessibility attributes.
+`useId` es un Hook de React para generar IDs unicos que se puede pasar a los atributos de accesibilidad.
+
 
 ```js
 const id = useId()
@@ -16,17 +17,17 @@ const id = useId()
 
 ---
 
-## Usage {/*usage*/}
+## Uso {/*usage*/}
 
 <Pitfall>
 
-**Do not call `useId` to generate keys in a list.** [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key)
+**No utilices `useId` para generar keys en una lista.** [Las keys deben generarse a partir de sus datos.](/learn/rendering-lists#where-to-get-your-key)
 
 </Pitfall>
 
-### Generating unique IDs for accessibility attributes {/*generating-unique-ids-for-accessibility-attributes*/}
+### Generación de ID únicos para atributos de accesibilidad {/*generating-unique-ids-for-accessibility-attributes*/}
 
-Call `useId` at the top level of your component to generate a unique ID:
+Llame a `useId` en el nivel superior de su componente para generar una ID única:
 
 ```js [[1, 4, "passwordHintId"]]
 import { useId } from 'react';
@@ -36,7 +37,7 @@ function PasswordField() {
   // ...
 ```
 
-You can then pass the <CodeStep step={1}>generated ID</CodeStep> to different attributes:
+A continuación, puedes pasar el <CodeStep step={1}>ID generado</CodeStep> a los diferentes atributos:
 
 ```js [[1, 2, "passwordHintId"], [1, 3, "passwordHintId"]]
 <>
@@ -45,11 +46,11 @@ You can then pass the <CodeStep step={1}>generated ID</CodeStep> to different at
 </>
 ```
 
-**Let's walk through an example to see when this is useful.**
+**Veamos un ejemplo para ver cuándo es útil.**
 
-[HTML accessibility attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) like [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) let you specify that two tags are related to each other. For example, you can specify that a certain element (like an input) is described by another element (like a paragraph).
+[Atrbutos de accesibilidad HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) como [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) le permite especificar que dos etiquetas están relacionadas entre sí. Por ejemplo, puede especificar que un determinado elemento (como una entrada) sea descrito por otro elemento (como un párrafo).
 
-In regular HTML, you would write it like this:
+En HTML normal, lo escribirías así:
 
 ```html {5,8}
 <label>
@@ -64,7 +65,7 @@ In regular HTML, you would write it like this:
 </p>
 ```
 
-However, hardcoding IDs like this is not a good practice in React. A component may be rendered more than once on the page--but IDs have to be unique! Instead of hardcoding an ID, you can generate a unique ID with `useId`:
+Sin embargo, utliziar identificaciones como este no es una buena práctica en React. Un componente puede representarse más de una vez en la página, ¡pero las ID tienen que ser únicas! En lugar de utliziar una ID, puede generar una ID única con `useId`:
 
 ```js {4,11,14}
 import { useId } from 'react';
@@ -88,7 +89,7 @@ function PasswordField() {
 }
 ```
 
-Now, even if `PasswordField` appears multiple times on the screen, the generated IDs won't clash.
+Ahora, incluso si `PasswordField` aparece varias veces en la pantalla, las identificaciones generadas no chocarán.
 
 <Sandpack>
 
@@ -131,31 +132,31 @@ input { margin: 5px; }
 
 </Sandpack>
 
-[Watch this video](https://www.youtube.com/watch?v=0dNzNcuEuOo) to see the difference in the user experience with assistive technologies.
+[Mira este video](https://www.youtube.com/watch?v=0dNzNcuEuOo) para ver la diferencia en la experiencia del usuario con tecnologías de asistencia.
 
 <Pitfall>
 
-**`useId` requires an identical component tree on the server and the client** when you use [server rendering](/apis/react-dom/server). If the trees you render on the server and the client don't match exactly, the generated IDs won't match.
+**`useId` requiere un árbol de componentes idéntico en el servidor y el cliente** cuando cuando utiliza [server rendering](/apis/react-dom/server). Si los árboles que se representan en el servidor y el cliente no coinciden exactamente, las ID generadas no coincidirán.
 
 </Pitfall>
 
-<DeepDive title="Why is useId better than an incrementing counter?">
+<DeepDive title="Por qué useId es mejor que un contador incremental?">
 
-You might be wondering why `useId` is better than incrementing a global variable like `nextId++`.
+Quizás se pregunte por qué `useId` es mejor que incrementar una variable global como `nextId++`.
 
-The primary benefit of `useId` is that React ensures that it works with [server rendering.](/apis/react-dom/server) During server rendering, your components generate HTML output. Later, on the client, [hydration](/apis/react-dom/client/hydrateRoot) attaches your event handlers to the generated HTML. For hydration to work, the client output must match the server HTML.
+El principal beneficio de `useId` es que React asegura que funciona con [server rendering.](/apis/react-dom/server) Durante el server rendering, sus componentes generan salida HTML. Mas tarde, en el cliente [hydrate](/apis/react-dom/client/hydrateRoot) adjunta sus controladores de eventos al HTML generado. Para que la hidratación funcione, la salida del cliente debe coincidir con el HTML del servidor.
 
-This is very difficult to guarantee with an incrementing counter because the order in which the client components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client.
+Esto es muy difícil de garantizar con un contador incremental porque el orden en que se hidratan los componentes del cliente puede no coincidir con el orden en que se emitió el HTML del servidor. Al llamar a `useId`, te aseguras de que la hidratación funcionará y la salida coincidirá entre el servidor y el cliente.
 
-Inside React, `useId` is generated from the "parent path" of the calling component. This is why, if the client and the server tree are the same, the "parent path" will match up regardless of rendering order.
+Dentro de React, `useId` se genera a partir de la "ruta principal" del componente llamado. Esta es la razón por la que, si el cliente y el árbol del servidor son iguales, la "ruta principal" coincidirá independientemente del orden de representación.
 
 </DeepDive>
 
 ---
 
-### Generating IDs for several related elements {/*generating-ids-for-several-related-elements*/}
+### Generar ID para varios elementos relacionados {/*generating-ids-for-several-related-elements*/}
 
-If you need to give IDs to multiple related elements, you can call `useId` to generate a shared prefix for them: 
+Si necesita proporcionar ID a varios elementos relacionados, puede llamar a `useId` para generar un prefijo compartido para ellos:
 
 <Sandpack>
 
@@ -182,13 +183,13 @@ input { margin: 5px; }
 
 </Sandpack>
 
-This lets you avoid calling `useId` for every single element that needs a unique ID.
+Esto le permite evitar llamar a `useId` para cada elemento que necesita una identificación única.
 
 ---
 
-### Specifying a shared prefix for all generated IDs {/*specifying-a-shared-prefix-for-all-generated-ids*/}
+### Especificación de un prefijo compartido para todas las ID generadas {/*specifying-a-shared-prefix-for-all-generated-ids*/}
 
-If you render multiple independent React applications on a single page, you may pass `identifierPrefix` as an option to your [`createRoot`](/apis/react-dom/client/createRoot#parameters) or [`hydrateRoot`](/apis/react-dom/client/hydrateRoot) calls. This ensures that the IDs generated by the two different apps never clash because every identifier generated with `useId` will start with the distinct prefix you've specified.
+Si renderiza varias aplicaciones React independientes en una sola página, puede pasar `identifierPrefix` como una opción para las llamadas [`createRoot`](/apis/react-dom/client/createRoot#parameters) o [`hydrateRoot`](/apis/react-dom/client/hydrateRoot). Esto garantiza que los ID generados por las dos aplicaciones diferentes nunca entren en conflicto porque cada identificador generado con `useId` comenzará con el prefijo distinto que haya especificado.
 
 <Sandpack>
 
@@ -271,11 +272,11 @@ input { margin: 5px; }
 
 ---
 
-## Reference {/*reference*/}
+## Referencia {/*reference*/}
 
 ### `useId()` {/*useid*/}
 
-Call `useId` at the top level of your component to generate a unique ID:
+Llame a `useId` en el nivel superior de su componente para generar una ID única:
 
 ```js
 import { useId } from 'react';
@@ -285,18 +286,18 @@ function PasswordField() {
   // ...
 ```
 
-[See more examples above.](#usage)
+[Vea más ejemplos arriba.](#usage)
 
-#### Parameters {/*parameters*/}
+#### Parametros {/*parameters*/}
 
-`useId` does not take any parameters.
+`useId` no toma ningún parámetro.
 
-#### Returns {/*returns*/}
+#### Retorna {/*returns*/}
 
-`useId` returns a unique ID string associated with this particular `useId` call in this particular component.
+`useId` devuelve una cadena de ID única asociada con esta llamada `useId` llamado en un componente particular.
 
-#### Caveats {/*caveats*/}
+#### Advertencias {/*caveats*/}
 
-* `useId` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
+* `useId` es un Hook, así que solo puedes llamarlo **en el nivel superior de su componente** o en tus propios hooks. No puedes llamarlo dentro de bucles o condiciones. Si lo necesita, extraiga un nuevo componente y mueva el estado a él.
 
-* `useId` **should not be used to generate keys** in a list. [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key)
+* `useId` **no debe usarse para generar keys** en una lista. [Las keys deben generarse a partir de sus datos.](/learn/rendering-lists#where-to-get-your-key)

From 17639795c91f5c8bf84fbb7a1c9a624c84a905a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= <rmartinezfraga@yandex.com>
Date: Sun, 20 Nov 2022 10:57:57 -0500
Subject: [PATCH 2/2] Apply suggestions from code review

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

diff --git a/beta/src/content/apis/react/useId.md b/beta/src/content/apis/react/useId.md
index c792146b8..a8f925fee 100644
--- a/beta/src/content/apis/react/useId.md
+++ b/beta/src/content/apis/react/useId.md
@@ -4,7 +4,7 @@ title: useId
 
 <Intro>
 
-`useId` es un Hook de React para generar IDs unicos que se puede pasar a los atributos de accesibilidad.
+`useId` es un Hook de React para generar IDs únicos que se pueden pasar a los atributos de accesibilidad.
 
 
 ```js
@@ -21,13 +21,13 @@ const id = useId()
 
 <Pitfall>
 
-**No utilices `useId` para generar keys en una lista.** [Las keys deben generarse a partir de sus datos.](/learn/rendering-lists#where-to-get-your-key)
+**No utilices `useId` para generar keys en una lista.** [Las keys deben generarse a partir de tus datos.](/learn/rendering-lists#where-to-get-your-key)
 
 </Pitfall>
 
 ### Generación de ID únicos para atributos de accesibilidad {/*generating-unique-ids-for-accessibility-attributes*/}
 
-Llame a `useId` en el nivel superior de su componente para generar una ID única:
+Llama a `useId` en el nivel superior de tu componente para generar un ID único:
 
 ```js [[1, 4, "passwordHintId"]]
 import { useId } from 'react';
@@ -48,7 +48,7 @@ A continuación, puedes pasar el <CodeStep step={1}>ID generado</CodeStep> a los
 
 **Veamos un ejemplo para ver cuándo es útil.**
 
-[Atrbutos de accesibilidad HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) como [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) le permite especificar que dos etiquetas están relacionadas entre sí. Por ejemplo, puede especificar que un determinado elemento (como una entrada) sea descrito por otro elemento (como un párrafo).
+[Atributos de accesibilidad HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) como [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) te permiten especificar que dos etiquetas están relacionadas entre sí. Por ejemplo, puedes especificar que un determinado elemento (como una entrada de texto) sea descrito por otro elemento (como un párrafo).
 
 En HTML normal, lo escribirías así:
 
@@ -65,7 +65,7 @@ En HTML normal, lo escribirías así:
 </p>
 ```
 
-Sin embargo, utliziar identificaciones como este no es una buena práctica en React. Un componente puede representarse más de una vez en la página, ¡pero las ID tienen que ser únicas! En lugar de utliziar una ID, puede generar una ID única con `useId`:
+Sin embargo, escribir IDs fijos como este no es una buena práctica en React. Un componente puede renderizarse más de una vez en la página, ¡pero los IDs tienen que ser únicos! En lugar de utilizar un ID fijo, puedes generar un ID único con `useId`:
 
 ```js {4,11,14}
 import { useId } from 'react';
@@ -89,7 +89,7 @@ function PasswordField() {
 }
 ```
 
-Ahora, incluso si `PasswordField` aparece varias veces en la pantalla, las identificaciones generadas no chocarán.
+Ahora, incluso si `PasswordField` aparece varias veces en la pantalla, no habrá conflicto entre los IDs generados.
 
 <Sandpack>
 
@@ -132,31 +132,31 @@ input { margin: 5px; }
 
 </Sandpack>
 
-[Mira este video](https://www.youtube.com/watch?v=0dNzNcuEuOo) para ver la diferencia en la experiencia del usuario con tecnologías de asistencia.
+[Mira este video](https://www.youtube.com/watch?v=0dNzNcuEuOo) para ver la diferencia en la experiencia de usuario con tecnologías de asistencia.
 
 <Pitfall>
 
-**`useId` requiere un árbol de componentes idéntico en el servidor y el cliente** cuando cuando utiliza [server rendering](/apis/react-dom/server). Si los árboles que se representan en el servidor y el cliente no coinciden exactamente, las ID generadas no coincidirán.
+**`useId` requiere un árbol de componentes idéntico en el servidor y el cliente** cuando utilizas [renderizado en el servidor](/apis/react-dom/server). Si los árboles que se renderizan en el servidor y el cliente no coinciden exactamente, los IDs generados no coincidirán.
 
 </Pitfall>
 
-<DeepDive title="Por qué useId es mejor que un contador incremental?">
+<DeepDive title="¿Por qué useId es mejor que un contador incremental?">
 
-Quizás se pregunte por qué `useId` es mejor que incrementar una variable global como `nextId++`.
+Puede que te preguntes por qué `useId` es mejor que incrementar una variable global como `nextId++`.
 
-El principal beneficio de `useId` es que React asegura que funciona con [server rendering.](/apis/react-dom/server) Durante el server rendering, sus componentes generan salida HTML. Mas tarde, en el cliente [hydrate](/apis/react-dom/client/hydrateRoot) adjunta sus controladores de eventos al HTML generado. Para que la hidratación funcione, la salida del cliente debe coincidir con el HTML del servidor.
+El principal beneficio de `useId` es que React se asegura de que funcione con el [renderizado en el servidor.](/apis/react-dom/server) Durante el renderizado en el servidos, tus componentes generan salida HTML. Más tarde, en el cliente, [la hidratación](/apis/react-dom/client/hydrateRoot) adjunta tus controladores de eventos al HTML generado. Para que la hidratación funcione, la salida del cliente debe coincidir con el HTML del servidor.
 
 Esto es muy difícil de garantizar con un contador incremental porque el orden en que se hidratan los componentes del cliente puede no coincidir con el orden en que se emitió el HTML del servidor. Al llamar a `useId`, te aseguras de que la hidratación funcionará y la salida coincidirá entre el servidor y el cliente.
 
-Dentro de React, `useId` se genera a partir de la "ruta principal" del componente llamado. Esta es la razón por la que, si el cliente y el árbol del servidor son iguales, la "ruta principal" coincidirá independientemente del orden de representación.
+Dentro de React, `useId` se genera a partir de la "ruta del padre" del componente llamado. Esta es la razón por la que, si el cliente y el árbol del servidor son iguales, la "ruta del padre" coincidirá independientemente del orden del renderizado.
 
 </DeepDive>
 
 ---
 
-### Generar ID para varios elementos relacionados {/*generating-ids-for-several-related-elements*/}
+### Generar IDs para varios elementos relacionados {/*generating-ids-for-several-related-elements*/}
 
-Si necesita proporcionar ID a varios elementos relacionados, puede llamar a `useId` para generar un prefijo compartido para ellos:
+Si necesitas proporcionar IDs a varios elementos relacionados, puedes llamar a `useId` para generar un prefijo compartido para ellos:
 
 <Sandpack>
 
@@ -183,13 +183,13 @@ input { margin: 5px; }
 
 </Sandpack>
 
-Esto le permite evitar llamar a `useId` para cada elemento que necesita una identificación única.
+Esto te permite evitar llamar a `useId` para cada elemento que necesite un ID único.
 
 ---
 
-### Especificación de un prefijo compartido para todas las ID generadas {/*specifying-a-shared-prefix-for-all-generated-ids*/}
+### Especificación de un prefijo compartido para todos los IDs generados {/*specifying-a-shared-prefix-for-all-generated-ids*/}
 
-Si renderiza varias aplicaciones React independientes en una sola página, puede pasar `identifierPrefix` como una opción para las llamadas [`createRoot`](/apis/react-dom/client/createRoot#parameters) o [`hydrateRoot`](/apis/react-dom/client/hydrateRoot). Esto garantiza que los ID generados por las dos aplicaciones diferentes nunca entren en conflicto porque cada identificador generado con `useId` comenzará con el prefijo distinto que haya especificado.
+Si renderizas varias aplicaciones de React independientes en una sola página, puedes pasar `identifierPrefix` como una opción para las llamadas [`createRoot`](/apis/react-dom/client/createRoot#parameters) o [`hydrateRoot`](/apis/react-dom/client/hydrateRoot). Esto garantiza que los IDs generados por las dos aplicaciones diferentes nunca entren en conflicto porque cada identificador generado con `useId` comenzará con el prefijo distinto que hayas especificado.
 
 <Sandpack>
 
@@ -276,7 +276,7 @@ input { margin: 5px; }
 
 ### `useId()` {/*useid*/}
 
-Llame a `useId` en el nivel superior de su componente para generar una ID única:
+Llama a `useId` en el nivel superior de tu componente para generar un ID único:
 
 ```js
 import { useId } from 'react';
@@ -286,9 +286,9 @@ function PasswordField() {
   // ...
 ```
 
-[Vea más ejemplos arriba.](#usage)
+[Ve más ejemplos arriba.](#usage)
 
-#### Parametros {/*parameters*/}
+#### Parámetros {/*parameters*/}
 
 `useId` no toma ningún parámetro.
 
@@ -298,6 +298,6 @@ function PasswordField() {
 
 #### Advertencias {/*caveats*/}
 
-* `useId` es un Hook, así que solo puedes llamarlo **en el nivel superior de su componente** o en tus propios hooks. No puedes llamarlo dentro de bucles o condiciones. Si lo necesita, extraiga un nuevo componente y mueva el estado a él.
+* `useId` es un Hook, así que solo puedes llamarlo **en el nivel superior de tu componente** o en tus propios hooks. No puedes llamarlo dentro de bucles o condiciones. Si necesitas hacerlo, extrae un nuevo componente y mueve allí el estado.
 
-* `useId` **no debe usarse para generar keys** en una lista. [Las keys deben generarse a partir de sus datos.](/learn/rendering-lists#where-to-get-your-key)
+* `useId` **no debe usarse para generar keys** en una lista. [Las keys deben generarse a partir de tus datos.](/learn/rendering-lists#where-to-get-your-key)