From ee75b03863a9ce9affe2e663cd400aaa38c8b54a Mon Sep 17 00:00:00 2001 From: luiserdef Date: Mon, 20 Nov 2023 23:14:27 -0500 Subject: [PATCH 1/4] translate use --- src/content/reference/react/use.md | 135 ++++++++++++++--------------- 1 file changed, 67 insertions(+), 68 deletions(-) diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index 8e1a8f213..5404e4dd3 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -5,13 +5,13 @@ canary: true -The `use` Hook is currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). +El Hook `use` está actualmente disponible solo en React Canary y canales experimentales. Aprende más sobre los [canales de lanzamiento de React aquí](/community/versioning-policy#all-release-channels). -`use` is a React Hook that lets you read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context). +`use` es un Hook de React que te permite leer el valor de un recurso como una [Promesa](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise) o [contexto](/learn/passing-data-deeply-with-context). ```js const value = use(resource); @@ -23,11 +23,11 @@ const value = use(resource); --- -## Reference {/*reference*/} +## Referencia {/*reference*/} ### `use(resource)` {/*use*/} -Call `use` in your component to read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context). +Llama a `use` en tu componente para leer el valor de un recurso como una [Promesa](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise) o [contexto](/learn/passing-data-deeply-with-context). ```jsx import { use } from 'react'; @@ -38,33 +38,34 @@ function MessageComponent({ messagePromise }) { // ... ``` -Unlike all other React Hooks, `use` can be called within loops and conditional statements like `if`. Like other React Hooks, the function that calls `use` must be a Component or Hook. +A diferencia de otros Hooks de React, `use` puede ser llamado dentro de bucles y condicionales como `if`. Al igual que otros Hooks de React, la función que llama a `use` tiene que ser un componente o Hook. -When called with a Promise, the `use` Hook integrates with [`Suspense`](/reference/react/Suspense) and [error boundaries](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). The component calling `use` *suspends* while the Promise passed to `use` is pending. If the component that calls `use` is wrapped in a Suspense boundary, the fallback will be displayed. Once the Promise is resolved, the Suspense fallback is replaced by the rendered components using the data returned by the `use` Hook. If the Promise passed to `use` is rejected, the fallback of the nearest Error Boundary will be displayed. +Cuando es llamado con una Promesa, el Hook de `use` se integra con [`Suspense`](/reference/react/Suspense) y [barreras de error](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). El componente que llama a `use` *se suspende* mientras que la Promesa pasada a `use` es pendiente. Si el componente que llama a `use` es envuelto en una barrera de Suspense, el fallback será mostrado. Una vez que la Promesa es resuelta, el fallback de Suspense es remplazada por los componentes renderizados usando los datos devueltos por el Hook `use`. Si la Promesa pasada a `use` es rechazada, se mostrará el fallback del error mas cercano a la barrera de error. -[See more examples below.](#usage) -#### Parameters {/*parameters*/} +[Ver más ejemplos abajo.](#usage) -* `resource`: this is the source of the data you want to read a value from. A resource can be a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or a [context](/learn/passing-data-deeply-with-context). +#### Parámetros {/*parameters*/} -#### Returns {/*returns*/} +* `resource`: esta es la fuente de los datos de los que quieres leer un valor. Un recurso puede ser una [Promesa](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise) o un [contexto](/learn/passing-data-deeply-with-context). -The `use` Hook returns the value that was read from the resource like the resolved value of a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context). +#### Devuelve {/*returns*/} -#### Caveats {/*caveats*/} +El Hook `use` devuelve el valor que se leyó del recurso como el valor resuelto de una [Promesa](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise) o [contexto](/learn/passing-data-deeply-with-context). -* The `use` Hook must be called inside a Component or a Hook. -* When fetching data in a [Server Component](/reference/react/use-server), prefer `async` and `await` over `use`. `async` and `await` pick up rendering from the point where `await` was invoked, whereas `use` re-renders the component after the data is resolved. -* Prefer creating Promises in [Server Components](/reference/react/use-server) and passing them to [Client Components](/reference/react/use-client) over creating Promises in Client Components. Promises created in Client Components are recreated on every render. Promises passed from a Server Component to a Client Component are stable across re-renders. [See this example](#streaming-data-from-server-to-client). +#### Advertencias {/*caveats*/} + +* El Hook `use` debe ser llamado dentro de un componente o un Hook. +* Cuando se recupera datos en un [Server Component](/reference/react/use-server), se prefiere el uso de `async` y `await` por encima de `use`. `async` y `await` retoman la renderización desde el punto donde se invocó `await`, mientras que `use` vuelve a renderizar el componente después de que se resuelvan los datos. +* Se prefiere la creación de Promesas en los [Server Components](/reference/react/use-server) y pasarlos a los [Client Components](/reference/react/use-client) por encima de crear Promesas en los Client Components. Las Promesas creadas en los Client Components son recreadas en cada renderización. Las Promesas que son pasadas de un Server Component a un Client Component son estables en todas las renderizaciones. [Ver este ejemplo](#streaming-data-from-server-to-client). --- -## Usage {/*usage*/} +## Uso {/*usage*/} -### Reading context with `use` {/*reading-context-with-use*/} +### Leer contexto con `use` {/*reading-context-with-use*/} -When a [context](/learn/passing-data-deeply-with-context) is passed to `use`, it works similarly to [`useContext`](/reference/react/useContext). While `useContext` must be called at the top level of your component, `use` can be called inside conditionals like `if` and loops like `for`. `use` is preferred over `useContext` because it is more flexible. +Cuando un [contexto](/learn/passing-data-deeply-with-context) se pasa a `use`, funciona de manera similar a [`useContext`](/reference/react/useContext). Mientras `useContext` debe ser llamado en el nivel mas alto de tu componente, `use` puede ser llamado dentro de condicionales como `if` y en bucles como `for`. Se prefiere `use` por encima de `useContext` porque es más flexible. ```js [[2, 4, "theme"], [1, 4, "ThemeContext"]] import { use } from 'react'; @@ -73,10 +74,9 @@ function Button() { const theme = use(ThemeContext); // ... ``` +`use` devuelve el valor de contexto para el contexto que pasas. Para determinar el valor del contexto, React busca en el árbol de componentes y encuentra **el proveedor de contexto más cercano arriba** para ese contexto en particular. -`use` returns the context value for the context you passed. To determine the context value, React searches the component tree and finds **the closest context provider above** for that particular context. - -To pass context to a `Button`, wrap it or one of its parent components into the corresponding context provider. +Para pasar el contexto a un `Button`, envuélvalo en uno de sus componentes padres en el proveedor de contexto correspondiente. ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]] function MyPage() { @@ -88,13 +88,13 @@ function MyPage() { } function Form() { - // ... renders buttons inside ... + // ... renderiza botones adentro ... } ``` -It doesn't matter how many layers of components there are between the provider and the `Button`. When a `Button` *anywhere* inside of `Form` calls `use(ThemeContext)`, it will receive `"dark"` as the value. +No importa cuántas capas de componentes hay entre el proveedor y el `Button`. Cuando un `Button` *en cualquier lugar* dentro de un `Form` llama a `use(ThemeContext)`, recibirá `"dark"` como valor. -Unlike [`useContext`](/reference/react/useContext), `use` can be called in conditionals and loops like `if`. +A diferencia de [`useContext`](/reference/react/useContext), `use` se puede llamar en condicionales y bucles como `if`. ```js [[1, 2, "if"], [2, 3, "use"]] function HorizontalRule({ show }) { @@ -106,11 +106,10 @@ function HorizontalRule({ show }) { } ``` -`use` is called from inside a `if` statement, allowing you to conditionally read values from a Context. - +`use` se llama desde dentro de una declaración `if`, lo que te permite leer valores condicionalmente de un contexto. -Like `useContext`, `use(context)` always looks for the closest context provider *above* the component that calls it. It searches upwards and **does not** consider context providers in the component from which you're calling `use(context)`. +Al igual que `useContext`, `use(context)` siempre busca el proveedor de contexto más cercano *arriba* del componente que lo llama. Busca hacia arriba y no considera los proveedores de contexto en el componente desde el cual llamas `use(context)`. @@ -131,9 +130,9 @@ export default function MyApp() { function Form() { return ( - - - + + + ); } @@ -212,9 +211,9 @@ function Button({ show, children }) { -### Streaming data from the server to the client {/*streaming-data-from-server-to-client*/} +### Transmitir datos del servidor al cliente {/*streaming-data-from-server-to-client*/} -Data can be streamed from the server to the client by passing a Promise as a prop from a Server Component to a Client Component. +Los datos pueden ser transmitidos del servidor al cliente pasándole una Promesa como un prop desde un Server Component a un Client Component. ```js [[1, 4, "App"], [2, 2, "Message"], [3, 7, "Suspense"], [4, 8, "messagePromise", 30], [4, 5, "messagePromise"]] import { fetchMessage } from './lib.js'; @@ -223,14 +222,14 @@ import { Message } from './message.js'; export default function App() { const messagePromise = fetchMessage(); return ( - waiting for message...

}> + Esperando mensaje...

}> ); } ``` -The Client Component then takes the Promise it received as a prop and passes it to the `use` Hook. This allows the Client Component to read the value from the Promise that was initially created by the Server Component. +El Client Component toma la Promesa que ha recibido como un prop y lo pasa al Hook `use`. Esto permite al Client Component leer el valor de la Promesa que fue inicialmente creada por el Server Component. ```js [[2, 6, "Message"], [4, 6, "messagePromise"], [4, 7, "messagePromise"], [5, 7, "use"]] // message.js @@ -240,10 +239,10 @@ import { use } from 'react'; export function Message({ messagePromise }) { const messageContent = use(messagePromise); - return

Here is the message: {messageContent}

; + return

Aquí está el mensaje: {messageContent}

; } ``` -Because `Message` is wrapped in [`Suspense`](/reference/react/Suspense), the fallback will be displayed until the Promise is resolved. When the Promise is resolved, the value will be read by the `use` Hook and the `Message` component will replace the Suspense fallback. +Debido a que `Message` está envuelto en [`Suspense`](/reference/react/Suspense), el fallback se mostrará hasta que la Promesa esté resuelta. Cuando se resuelva la Promesa, el valor va a ser leido por el Hook `use` y el componente `Message` reemplazará el fallback de Suspense. @@ -254,12 +253,12 @@ import { use, Suspense } from "react"; function Message({ messagePromise }) { const messageContent = use(messagePromise); - return

Here is the message: {messageContent}

; + return

Aquí está el mensaje: {messageContent}

; } export function MessageContainer({ messagePromise }) { return ( - ⌛Downloading message...

}> + ⌛Descargando mensaje...

}> ); @@ -285,7 +284,7 @@ export default function App() { if (show) { return ; } else { - return ; + return ; } } ``` @@ -325,16 +324,16 @@ root.render( -When passing a Promise from a Server Component to a Client Component, its resolved value must be serializable to pass between server and client. Data types like functions aren't serializable and cannot be the resolved value of such a Promise. +Al pasar una Promesa de un Server Component a un Client Component, su valor resuelto debe ser serializable para pasar entre el servidor y el cliente. Los tipos de datos como las funciones no son serializables y no pueden ser el valor resuelto de dicha Promesa. -#### Should I resolve a Promise in a Server or Client Component? {/*resolve-promise-in-server-or-client-component*/} +#### ¿Deberia resolver una promesa en un Server Component o en un Client Component? {/*resolve-promise-in-server-or-client-component*/} -A Promise can be passed from a Server Component to a Client Component and resolved in the Client component with the `use` Hook. You can also resolve the Promise in a Server Component with `await` and pass the required data to the Client Component as a prop. +Una Promesa se puede pasar de un Server Component a un Client Component y resolverse en el Client Component con el Hook `use`. También puedes resolver la Promesa en un Server Component con `await` y pasar los datos requeridos al Client Component como un prop. ```js export default function App() { @@ -342,25 +341,25 @@ export default function App() { return } ``` - -But using `await` in a [Server Component](/reference/react/components#server-components) will block its rendering until the `await` statement is finished. Passing a Promise from a Server Component to a Client Component prevents the Promise from blocking the rendering of the Server Component. +Pero el uso de `await` en un [Server Component](/reference/react/components#server-components) bloqueará su renderizado hasta que finalice la declaración de `await`. Pasar una Promesa de un Server Component a un Client Component evita que la Promesa bloquee la representación del Server Component. -### Dealing with rejected Promises {/*dealing-with-rejected-promises*/} +### Lidiar con las promesas rechazadas {/*dealing-with-rejected-promises*/} -In some cases a Promise passed to `use` could be rejected. You can handle rejected Promises by either: - -1. [Displaying an error to users with error boundary.](#displaying-an-error-to-users-with-error-boundary) -2. [Providing an alternative value with `Promise.catch`](#providing-an-alternative-value-with-promise-catch) +En algunas ocaciones una Promesa pasada a `use` puede ser rechazada. Puedes manejar Promesas rechazadas de estas maneras: +1. [Mostrar un error a los usuarios con una barrera de error.](#displaying-an-error-to-users-with-error-boundary) +2. [Proporcionar un valor alternativo con `Promise.catch`](#providing-an-alternative-value-with-promise-catch) -`use` cannot be called in a try-catch block. Instead of a try-catch block [wrap your component in an Error Boundary](#displaying-an-error-to-users-with-error-boundary), or [provide an alternative value to use with the Promise's `.catch` method](#providing-an-alternative-value-with-promise-catch). + +`use` no puede ser llamado en un bloque try-catch. En vez de un bloque try-catch [envuelve tu componente con una barrera de error](#displaying-an-error-to-users-with-error-boundary), o [proporciona un valor alternativo para usar con el método `.catch` de Promise](#providing-an-alternative-value-with-promise-catch). + -#### Displaying an error to users with a error boundary {/*displaying-an-error-to-users-with-error-boundary*/} +#### Mostrar un error a los usuarios con una barrera de error {/*displaying-an-error-to-users-with-error-boundary*/} -If you'd like to display an error to your users when a Promise is rejected, you can use an [error boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). To use an error boundary, wrap the component where you are calling the `use` Hook in an error boundary. If the Promise passed to `use` is rejected the fallback for the error boundary will be displayed. +Si quieres mostrar un error a tus usuarios cuando se rechaza una Promesa, puedes usar una [barrera de error](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). Para usar una barrera de error, envuelve el componente donde estás llamando al Hook `use` en una barrera de error. Si se rechaza la Promesa que fue pasada a `use`, se mostrará el fallback para la barrera de error. @@ -372,8 +371,8 @@ import { ErrorBoundary } from "react-error-boundary"; export function MessageContainer({ messagePromise }) { return ( - ⚠️Something went wrong

}> - ⌛Downloading message...

}> + ⚠️Algo ha salido mal

}> + ⌛Descargando el mensaje...

}> @@ -382,7 +381,7 @@ export function MessageContainer({ messagePromise }) { function Message({ messagePromise }) { const content = use(messagePromise); - return

Here is the message: {content}

; + return

Aquí está el mensaje: {content}

; } ``` @@ -405,7 +404,7 @@ export default function App() { if (show) { return ; } else { - return ; + return ; } } ``` @@ -444,9 +443,9 @@ root.render( ``` -#### Providing an alternative value with `Promise.catch` {/*providing-an-alternative-value-with-promise-catch*/} +#### Proporcionar un valor alternativo con `Promise.catch` {/*providing-an-alternative-value-with-promise-catch*/} -If you'd like to provide an alternative value when the Promise passed to `use` is rejected you can use the Promise's [`catch`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) method. +Si quieres proporcionar un valor alternativo cuando se rechaza la Promesa pasada a `use`, puedes usar el método [`catch`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) de la Promesa. ```js [[1, 6, "catch"],[2, 7, "return"]] import { Message } from './message.js'; @@ -455,42 +454,42 @@ export default function App() { const messagePromise = new Promise((resolve, reject) => { reject(); }).catch(() => { - return "no new message found."; + return "no se encontró ningún mensaje nuevo."; }); return ( - waiting for message...

}> + Esperando mensaje...

}> ); } ``` -To use the Promise's `catch` method, call `catch` on the Promise object. `catch` takes a single argument: a function that takes an error message as an argument. Whatever is returned by the function passed to `catch` will be used as the resolved value of the Promise. +Para usar el método `catch` de la Promesa, llama a `catch` en el objeto de la Promesa. `catch` toma un solo argumento: una función que toma un mensaje de error como un argumento. Lo que sea devuelto por la función pasada a `catch` se utilizará como valor resuelto de la Promesa. --- -## Troubleshooting {/*troubleshooting*/} +## Solución de problemas {/*troubleshooting*/} -### "Suspense Exception: This is not a real error!" {/*suspense-exception-error*/} +### “Excepción de Suspense: ¡Esto no es un error real!” {/*suspense-exception-error*/} -You are either calling `use` outside of a React component or Hook function, or calling `use` in a try–catch block. If you are calling `use` inside a try–catch block, wrap your component in an error boundary, or call the Promise's `catch` to catch the error and resolve the Promise with another value. [See these examples](#dealing-with-rejected-promises). +Estás llamando a `use` fuera de un componente de React o función Hook, o llamando a `use` en un bloque try-catch. Si estás llamando a `use` dentro de un bloque try-catch, envuelve tu componente en una barrera de error o llama al `catch` de la Promesa para detectar el error y resolver la Promesa con otro valor. [Ver estos ejemplos](#dealing-with-rejected-promises). -If you are calling `use` outside a React component or Hook function, move the `use` call to a React component or Hook function. +Si estás llamando a `use` fuera de un componente de React o función Hook, mueve la llamada de `use` a un componente de React o función Hook. ```jsx function MessageComponent({messagePromise}) { function download() { - // ❌ the function calling `use` is not a Component or Hook + // ❌ la función que llama a `use` no es un componente ni un Hook const message = use(messagePromise); // ... ``` -Instead, call `use` outside any component closures, where the function that calls `use` is a component or Hook. +En su lugar, llama a `use` fuera de los cierres de cualquier componente, donde la función que llama a `use` es un componente o gancho. ```jsx function MessageComponent({messagePromise}) { - // ✅ `use` is being called from a component. + // ✅ `use` está siendo llamado desde un componente. const message = use(messagePromise); // ... ``` From 98c57a6e9647dff3d41ed6963450b45c968447c4 Mon Sep 17 00:00:00 2001 From: luiserdef Date: Wed, 22 Nov 2023 22:42:28 -0500 Subject: [PATCH 2/4] Change "deberia" to "debo" --- src/content/reference/react/use.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index 5404e4dd3..27331cf0f 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -331,7 +331,7 @@ Al pasar una Promesa de un Server Component a un Client Component, su valor resu -#### ¿Deberia resolver una promesa en un Server Component o en un Client Component? {/*resolve-promise-in-server-or-client-component*/} +#### ¿Debo resolver una promesa en un Server Component o en un Client Component? {/*resolve-promise-in-server-or-client-component*/} Una Promesa se puede pasar de un Server Component a un Client Component y resolverse en el Client Component con el Hook `use`. También puedes resolver la Promesa en un Server Component con `await` y pasar los datos requeridos al Client Component como un prop. From 5df3e2769ef5191c89e2b500535142a3f98558b8 Mon Sep 17 00:00:00 2001 From: Rainer Martinez Date: Mon, 4 Dec 2023 08:18:22 -0500 Subject: [PATCH 3/4] fix line numbers --- src/content/reference/react/use.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index 27331cf0f..6c4dae44e 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -42,7 +42,6 @@ A diferencia de otros Hooks de React, `use` puede ser llamado dentro de bucles y Cuando es llamado con una Promesa, el Hook de `use` se integra con [`Suspense`](/reference/react/Suspense) y [barreras de error](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). El componente que llama a `use` *se suspende* mientras que la Promesa pasada a `use` es pendiente. Si el componente que llama a `use` es envuelto en una barrera de Suspense, el fallback será mostrado. Una vez que la Promesa es resuelta, el fallback de Suspense es remplazada por los componentes renderizados usando los datos devueltos por el Hook `use`. Si la Promesa pasada a `use` es rechazada, se mostrará el fallback del error mas cercano a la barrera de error. - [Ver más ejemplos abajo.](#usage) #### Parámetros {/*parameters*/} @@ -56,8 +55,8 @@ El Hook `use` devuelve el valor que se leyó del recurso como el valor resuelto #### Advertencias {/*caveats*/} * El Hook `use` debe ser llamado dentro de un componente o un Hook. -* Cuando se recupera datos en un [Server Component](/reference/react/use-server), se prefiere el uso de `async` y `await` por encima de `use`. `async` y `await` retoman la renderización desde el punto donde se invocó `await`, mientras que `use` vuelve a renderizar el componente después de que se resuelvan los datos. -* Se prefiere la creación de Promesas en los [Server Components](/reference/react/use-server) y pasarlos a los [Client Components](/reference/react/use-client) por encima de crear Promesas en los Client Components. Las Promesas creadas en los Client Components son recreadas en cada renderización. Las Promesas que son pasadas de un Server Component a un Client Component son estables en todas las renderizaciones. [Ver este ejemplo](#streaming-data-from-server-to-client). +* Cuando se recupera datos en un [Server Component](/reference/react/use-server), se prefiere el uso de `async` y `await` por encima de `use`. `async` y `await` retoman el renderizado desde el punto donde se invocó `await`, mientras que `use` vuelve a renderizar el componente después de que se resuelvan los datos. +* Se prefiere la creación de Promesas en los [Server Components](/reference/react/use-server) y pasarlos a los [Client Components](/reference/react/use-client) por encima de crear Promesas en los Client Components. Las Promesas creadas en los Client Components son recreadas en cada renderizado. Las Promesas que son pasadas de un Server Component a un Client Component son estables en todos los renderizados. [Ver este ejemplo](#streaming-data-from-server-to-client). --- @@ -74,6 +73,7 @@ function Button() { const theme = use(ThemeContext); // ... ``` + `use` devuelve el valor de contexto para el contexto que pasas. Para determinar el valor del contexto, React busca en el árbol de componentes y encuentra **el proveedor de contexto más cercano arriba** para ese contexto en particular. Para pasar el contexto a un `Button`, envuélvalo en uno de sus componentes padres en el proveedor de contexto correspondiente. @@ -107,6 +107,7 @@ function HorizontalRule({ show }) { ``` `use` se llama desde dentro de una declaración `if`, lo que te permite leer valores condicionalmente de un contexto. + Al igual que `useContext`, `use(context)` siempre busca el proveedor de contexto más cercano *arriba* del componente que lo llama. Busca hacia arriba y no considera los proveedores de contexto en el componente desde el cual llamas `use(context)`. @@ -242,7 +243,7 @@ export function Message({ messagePromise }) { return

Aquí está el mensaje: {messageContent}

; } ``` -Debido a que `Message` está envuelto en [`Suspense`](/reference/react/Suspense), el fallback se mostrará hasta que la Promesa esté resuelta. Cuando se resuelva la Promesa, el valor va a ser leido por el Hook `use` y el componente `Message` reemplazará el fallback de Suspense. +Debido a que `Message` está envuelto en [`Suspense`](/reference/react/Suspense), el fallback se mostrará hasta que la Promesa esté resuelta. Cuando se resuelva la Promesa, el valor va a ser leído por el Hook `use` y el componente `Message` reemplazará el fallback de Suspense. @@ -341,20 +342,20 @@ export default function App() { return } ``` + Pero el uso de `await` en un [Server Component](/reference/react/components#server-components) bloqueará su renderizado hasta que finalice la declaración de `await`. Pasar una Promesa de un Server Component a un Client Component evita que la Promesa bloquee la representación del Server Component. ### Lidiar con las promesas rechazadas {/*dealing-with-rejected-promises*/} -En algunas ocaciones una Promesa pasada a `use` puede ser rechazada. Puedes manejar Promesas rechazadas de estas maneras: +En algunas ocasiones una Promesa pasada a `use` puede ser rechazada. Puedes manejar Promesas rechazadas de estas maneras: + 1. [Mostrar un error a los usuarios con una barrera de error.](#displaying-an-error-to-users-with-error-boundary) 2. [Proporcionar un valor alternativo con `Promise.catch`](#providing-an-alternative-value-with-promise-catch) - `use` no puede ser llamado en un bloque try-catch. En vez de un bloque try-catch [envuelve tu componente con una barrera de error](#displaying-an-error-to-users-with-error-boundary), o [proporciona un valor alternativo para usar con el método `.catch` de Promise](#providing-an-alternative-value-with-promise-catch). - #### Mostrar un error a los usuarios con una barrera de error {/*displaying-an-error-to-users-with-error-boundary*/} From 5d24faff1d0f96b3dee55918b823634be15b05f8 Mon Sep 17 00:00:00 2001 From: Rainer Martinez Date: Mon, 4 Dec 2023 08:31:30 -0500 Subject: [PATCH 4/4] Terms adjustments --- src/content/reference/react/use.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index 6c4dae44e..36487edf6 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -55,8 +55,8 @@ El Hook `use` devuelve el valor que se leyó del recurso como el valor resuelto #### Advertencias {/*caveats*/} * El Hook `use` debe ser llamado dentro de un componente o un Hook. -* Cuando se recupera datos en un [Server Component](/reference/react/use-server), se prefiere el uso de `async` y `await` por encima de `use`. `async` y `await` retoman el renderizado desde el punto donde se invocó `await`, mientras que `use` vuelve a renderizar el componente después de que se resuelvan los datos. -* Se prefiere la creación de Promesas en los [Server Components](/reference/react/use-server) y pasarlos a los [Client Components](/reference/react/use-client) por encima de crear Promesas en los Client Components. Las Promesas creadas en los Client Components son recreadas en cada renderizado. Las Promesas que son pasadas de un Server Component a un Client Component son estables en todos los renderizados. [Ver este ejemplo](#streaming-data-from-server-to-client). +* Cuando se recupera datos en un [Componente del Servidor](/reference/react/use-server), se prefiere el uso de `async` y `await` por encima de `use`. `async` y `await` retoman el renderizado desde el punto donde se invocó `await`, mientras que `use` vuelve a renderizar el componente después de que se resuelvan los datos. +* Se prefiere la creación de Promesas en los [Componente del Servidors](/reference/react/use-server) y pasarlos a los [Componente del Clientes](/reference/react/use-client) por encima de crear Promesas en los Componente del Clientes. Las Promesas creadas en los Componente del Clientes son recreadas en cada renderizado. Las Promesas que son pasadas de un Componente del Servidor a un Componente del Cliente son estables en todos los renderizados. [Ver este ejemplo](#streaming-data-from-server-to-client). --- @@ -212,9 +212,9 @@ function Button({ show, children }) { -### Transmitir datos del servidor al cliente {/*streaming-data-from-server-to-client*/} +### Transmisión de datos del servidor al cliente (streaming) {/*streaming-data-from-server-to-client*/} -Los datos pueden ser transmitidos del servidor al cliente pasándole una Promesa como un prop desde un Server Component a un Client Component. +Se puede transmitir un flujo de datos del servidor al cliente (*streaming*) pasando una Promesa como una prop desde un Componente del Servidor a un Componente del Cliente. ```js [[1, 4, "App"], [2, 2, "Message"], [3, 7, "Suspense"], [4, 8, "messagePromise", 30], [4, 5, "messagePromise"]] import { fetchMessage } from './lib.js'; @@ -230,7 +230,7 @@ export default function App() { } ``` -El Client Component toma la Promesa que ha recibido como un prop y lo pasa al Hook `use`. Esto permite al Client Component leer el valor de la Promesa que fue inicialmente creada por el Server Component. +El Componente del Cliente toma la Promesa que ha recibido como una prop y la pasa al Hook `use`. Esto permite al Componente del Cliente leer el valor de la Promesa que fue inicialmente creada por el Componente del Servidor. ```js [[2, 6, "Message"], [4, 6, "messagePromise"], [4, 7, "messagePromise"], [5, 7, "use"]] // message.js @@ -243,7 +243,7 @@ export function Message({ messagePromise }) { return

Aquí está el mensaje: {messageContent}

; } ``` -Debido a que `Message` está envuelto en [`Suspense`](/reference/react/Suspense), el fallback se mostrará hasta que la Promesa esté resuelta. Cuando se resuelva la Promesa, el valor va a ser leído por el Hook `use` y el componente `Message` reemplazará el fallback de Suspense. +Debido a que `Message` está envuelto en [`Suspense`](/reference/react/Suspense), el fallback se mostrará hasta que la Promesa esté resuelta. Cuando se resuelva la Promesa, el valor será leído por el Hook `use` y el componente `Message` reemplazará el fallback de Suspense. @@ -325,16 +325,16 @@ root.render( -Al pasar una Promesa de un Server Component a un Client Component, su valor resuelto debe ser serializable para pasar entre el servidor y el cliente. Los tipos de datos como las funciones no son serializables y no pueden ser el valor resuelto de dicha Promesa. +Al pasar una Promesa de un Componente del Servidor a un Componente del Cliente, su valor resuelto debe ser serializable para pasar entre el servidor y el cliente. Los tipos de datos como las funciones no son serializables y no pueden ser el valor resuelto de dicha Promesa. -#### ¿Debo resolver una promesa en un Server Component o en un Client Component? {/*resolve-promise-in-server-or-client-component*/} +#### ¿Debo resolver una promesa en un Componente del Servidor o en un Componente del Cliente? {/*resolve-promise-in-server-or-client-component*/} -Una Promesa se puede pasar de un Server Component a un Client Component y resolverse en el Client Component con el Hook `use`. También puedes resolver la Promesa en un Server Component con `await` y pasar los datos requeridos al Client Component como un prop. +Una Promesa se puede pasar de un Componente del Servidor a un Componente del Cliente y resolverse en el Componente del Cliente con el Hook `use`. También puedes resolver la Promesa en un Componente del Servidor con `await` y pasar los datos requeridos al Componente del Cliente como una prop. ```js export default function App() { @@ -343,7 +343,7 @@ export default function App() { } ``` -Pero el uso de `await` en un [Server Component](/reference/react/components#server-components) bloqueará su renderizado hasta que finalice la declaración de `await`. Pasar una Promesa de un Server Component a un Client Component evita que la Promesa bloquee la representación del Server Component. +Pero el uso de `await` en un [Componente del Servidor](/reference/react/components#server-components) bloqueará su renderizado hasta que finalice la declaración de `await`. Pasar una Promesa de un Componente del Servidor a un Componente del Cliente evita que la Promesa bloquee la representación del Componente del Servidor. @@ -486,7 +486,7 @@ function MessageComponent({messagePromise}) { // ... ``` -En su lugar, llama a `use` fuera de los cierres de cualquier componente, donde la función que llama a `use` es un componente o gancho. +En su lugar, llama a `use` fuera de las clausuras de cualquier componente, donde la función que llama a `use` es un componente o un Hook. ```jsx function MessageComponent({messagePromise}) {