From 1763a7200958920f47aa00095e94549f74135d3c Mon Sep 17 00:00:00 2001 From: RubenChirino Date: Sat, 18 Feb 2023 12:08:23 -0300 Subject: [PATCH 1/9] Adding translations to the startTransition API --- .../reference/react/startTransition.md | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/beta/src/content/reference/react/startTransition.md b/beta/src/content/reference/react/startTransition.md index 32fef7a97..9a45e6179 100644 --- a/beta/src/content/reference/react/startTransition.md +++ b/beta/src/content/reference/react/startTransition.md @@ -4,7 +4,7 @@ title: startTransition -`startTransition` lets you update the state without blocking the UI. +`startTransition` permite actualizar el estado sin bloquear la UI. ```js startTransition(scope) @@ -16,17 +16,17 @@ startTransition(scope) --- -## Reference {/*reference*/} +## Referencia {/*reference*/} ### `startTransition(scope)` {/*starttransitionscope*/} -The `startTransition` function lets you mark a state update as a transition. +La función `startTransition` le permite marcar una actualización de estado como una transición. ```js {7,9} import { startTransition } from 'react'; function TabContainer() { - const [tab, setTab] = useState('about'); + const [tab, setTab] = useState('acerca de'); function selectTab(nextTab) { startTransition(() => { @@ -37,43 +37,43 @@ function TabContainer() { } ``` -[See more examples below.](#usage) +[Ver más ejemplos a continuación.](#usage) -#### Parameters {/*parameters*/} +#### Parámetros {/*parameters*/} -* `scope`: A function that updates some state by calling one or more [`set` functions.](/reference/react/useState#setstate) React immediately calls `scope` with no parameters and marks all state updates scheduled synchronously during the `scope` function call as transitions. They will be [non-blocking](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators.](/reference/react/useTransition#preventing-unwanted-loading-indicators) +* `scope`: Una función que actualiza algún estado llamando a una o más [funciones `set`](/reference/react/useState#setstate). React llama inmediatamente a `scope` sin parámetros y marca todas las actualizaciones de estado programadas de forma síncrona durante la llamada a la función `scope` como transiciones. Estas serán [sin bloqueo](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) y [no mostrarán indicadores de carga no deseados.](/reference/react/useTransition#preventing-unwanted-loading-indicators) #### Returns {/*returns*/} -`startTransition` does not return anything. +`startTransition` no devuelve nada. -#### Caveats {/*caveats*/} +#### Advertencias {/*caveats*/} -* `startTransition` does not provide a way to track whether a transition is pending. To show a pending indicator while the transition is ongoing, you need [`useTransition`](/reference/react/useTransition) instead. +* `startTransition` no proporciona una forma de rastrear si hay una transición pendiente. Para mostrar un indicador pendiente mientras se produce la transición, debe utilizar [`useTransition`](/reference/react/useTransition) en su lugar. -* You can wrap an update into a transition only if you have access to the `set` function of that state. If you want to start a transition in response to some prop or a custom Hook return value, try [`useDeferredValue`](/reference/react/usedeferredvalue) instead. +* Solo puede envolver una actualización en una transición si tiene acceso a la función `set` de ese estado. Si desea iniciar una transición en respuesta a alguna propiedad o un valor de retorno personalizado de Hook, intente usar [`useDeferredValue`](/reference/react/usedeferredvalue) en su lugar. -* The function you pass to `startTransition` must be synchronous. React immediately executes this function, marking all state updates that happen while it executes as transitions. If you try to perform more state updates later (for example, in a timeout), they won't be marked as transitions. +* La función que pasa a `startTransition` debe ser sincrónica. React ejecuta inmediatamente esta función, marcando todas las actualizaciones de estado que ocurren mientras se ejecuta como transiciones. Si intenta realizar más actualizaciones de estado más tarde (por ejemplo, en un timeout), no se marcarán como transiciones. -* A state update marked as a transition will be interrupted by other state updates. For example, if you update a chart component inside a transition, but then start typing into an input while the chart is in the middle of a re-render, React will restart the rendering work on the chart component after handling the input state update. +* Una actualización de estado marcada como una transición será interrumpida por otras actualizaciones de estado. Por ejemplo, si actualiza un componente de gráfico dentro de una transición, pero luego comienza a escribir en una entrada mientras el gráfico está en medio de una re-renderización, React reiniciará el trabajo de renderizado en el componente de gráfico después de manejar la actualización de estado de entrada. -* Transition updates can't be used to control text inputs. +* Las actualizaciones de transición no se pueden utilizar para controlar entradas de texto. -* If there are multiple ongoing transitions, React currently batches them together. This is a limitation that will likely be removed in a future release. +* Si hay varias transiciones en curso, React actualmente las agrupa. Esta es una limitación que probablemente se eliminará en una versión futura. --- -## Usage {/*usage*/} +## Uso {/*usage*/} -### Marking a state update as a non-blocking transition {/*marking-a-state-update-as-a-non-blocking-transition*/} +### Marcar una actualización de estado como una transición sin bloqueo {/*marking-a-state-update-as-a-non-blocking-transition*/} -You can mark a state update as a *transition* by wrapping it in a `startTransition` call: +Puede marcar una actualización de estado como una transición envolviéndola en una llamada `startTransition`: ```js {7,9} import { startTransition } from 'react'; function TabContainer() { - const [tab, setTab] = useState('about'); + const [tab, setTab] = useState('acerca de'); function selectTab(nextTab) { startTransition(() => { @@ -84,14 +84,14 @@ function TabContainer() { } ``` -Transitions let you keep the user interface updates responsive even on slow devices. +Las transiciones te permiten mantener la actualización de la interfaz de usuario receptiva incluso en dispositivos lentos. -With a transition, your UI stays responsive in the middle of a re-render. For example, if the user clicks a tab but then change their mind and click another tab, they can do that without waiting for the first re-render to finish. +Con una transición, tu interfaz de usuario sigue siendo receptiva en medio de una nueva renderización. Por ejemplo, si el usuario hace clic en una pestaña pero luego cambia de opinión y hace clic en otra pestaña, puede hacerlo sin esperar a que termine la primera renderización. -`startTransition` is very similar to [`useTransition`](/reference/react/useTransition), except that it does not provide the `isPending` flag to track whether a transition is ongoing. You can call `startTransition` when `useTransition` is not available. For example, `startTransition` works outside components, such as from a data library. +`startTransition` es muy similar a [`useTransition`](/reference/react/useTransition), excepto que no proporciona la bandera `isPending` para rastrear si una transición está en curso. Puede llamar a `startTransition` cuando `useTransition` no esté disponible. Por ejemplo, `startTransition` funciona fuera de los componentes, como desde una biblioteca de datos. -[Learn about transitions and see examples on the `useTransition` page.](/reference/react/useTransition) +[Aprenda sobre las transiciones y vea ejemplos en la página de `useTransition`.](/reference/react/useTransition) From 6188399dea7b17229a638e92528d1584771d4b9b Mon Sep 17 00:00:00 2001 From: Ruben Chirino Date: Sat, 1 Apr 2023 11:29:19 -0300 Subject: [PATCH 2/9] Update beta/src/content/reference/react/startTransition.md Co-authored-by: Rainer Martinez --- beta/src/content/reference/react/startTransition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/content/reference/react/startTransition.md b/beta/src/content/reference/react/startTransition.md index 9a45e6179..2d43af40b 100644 --- a/beta/src/content/reference/react/startTransition.md +++ b/beta/src/content/reference/react/startTransition.md @@ -20,7 +20,7 @@ startTransition(scope) ### `startTransition(scope)` {/*starttransitionscope*/} -La función `startTransition` le permite marcar una actualización de estado como una transición. +La función `startTransition` te permite marcar una actualización de estado como una transición. ```js {7,9} import { startTransition } from 'react'; From 206e272047d022d78dc08d3e04ce7514e3d27c49 Mon Sep 17 00:00:00 2001 From: Ruben Chirino Date: Sat, 1 Apr 2023 11:30:07 -0300 Subject: [PATCH 3/9] Update beta/src/content/reference/react/startTransition.md Co-authored-by: Rainer Martinez --- beta/src/content/reference/react/startTransition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/content/reference/react/startTransition.md b/beta/src/content/reference/react/startTransition.md index 2d43af40b..68df7d3e2 100644 --- a/beta/src/content/reference/react/startTransition.md +++ b/beta/src/content/reference/react/startTransition.md @@ -49,7 +49,7 @@ function TabContainer() { #### Advertencias {/*caveats*/} -* `startTransition` no proporciona una forma de rastrear si hay una transición pendiente. Para mostrar un indicador pendiente mientras se produce la transición, debe utilizar [`useTransition`](/reference/react/useTransition) en su lugar. +* `startTransition` no proporciona una forma de rastrear si hay una transición pendiente. Para mostrar un indicador pendiente mientras se produce la transición, debes utilizar [`useTransition`](/reference/react/useTransition) en su lugar. * Solo puede envolver una actualización en una transición si tiene acceso a la función `set` de ese estado. Si desea iniciar una transición en respuesta a alguna propiedad o un valor de retorno personalizado de Hook, intente usar [`useDeferredValue`](/reference/react/usedeferredvalue) en su lugar. From f32ca4749787dca262407e3f661fe796962a9496 Mon Sep 17 00:00:00 2001 From: Ruben Chirino Date: Sat, 1 Apr 2023 11:30:48 -0300 Subject: [PATCH 4/9] Update beta/src/content/reference/react/startTransition.md Co-authored-by: Rainer Martinez --- beta/src/content/reference/react/startTransition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/content/reference/react/startTransition.md b/beta/src/content/reference/react/startTransition.md index 68df7d3e2..685244170 100644 --- a/beta/src/content/reference/react/startTransition.md +++ b/beta/src/content/reference/react/startTransition.md @@ -51,7 +51,7 @@ function TabContainer() { * `startTransition` no proporciona una forma de rastrear si hay una transición pendiente. Para mostrar un indicador pendiente mientras se produce la transición, debes utilizar [`useTransition`](/reference/react/useTransition) en su lugar. -* Solo puede envolver una actualización en una transición si tiene acceso a la función `set` de ese estado. Si desea iniciar una transición en respuesta a alguna propiedad o un valor de retorno personalizado de Hook, intente usar [`useDeferredValue`](/reference/react/usedeferredvalue) en su lugar. +* Solo puedes envolver una actualización en una transición si tienes acceso a la función `set` de ese estado. Si deseas iniciar una transición en respuesta a alguna prop o un valor de retorno de un Hook personalizado, intenta usar [`useDeferredValue`](/reference/react/usedeferredvalue) en su lugar. * La función que pasa a `startTransition` debe ser sincrónica. React ejecuta inmediatamente esta función, marcando todas las actualizaciones de estado que ocurren mientras se ejecuta como transiciones. Si intenta realizar más actualizaciones de estado más tarde (por ejemplo, en un timeout), no se marcarán como transiciones. From 34f7a943b6b879fb172bbc6117e9679d5ee414ac Mon Sep 17 00:00:00 2001 From: Ruben Chirino Date: Sat, 1 Apr 2023 11:31:15 -0300 Subject: [PATCH 5/9] Update beta/src/content/reference/react/startTransition.md Co-authored-by: Rainer Martinez --- beta/src/content/reference/react/startTransition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/content/reference/react/startTransition.md b/beta/src/content/reference/react/startTransition.md index 685244170..b3f16ef1c 100644 --- a/beta/src/content/reference/react/startTransition.md +++ b/beta/src/content/reference/react/startTransition.md @@ -53,7 +53,7 @@ function TabContainer() { * Solo puedes envolver una actualización en una transición si tienes acceso a la función `set` de ese estado. Si deseas iniciar una transición en respuesta a alguna prop o un valor de retorno de un Hook personalizado, intenta usar [`useDeferredValue`](/reference/react/usedeferredvalue) en su lugar. -* La función que pasa a `startTransition` debe ser sincrónica. React ejecuta inmediatamente esta función, marcando todas las actualizaciones de estado que ocurren mientras se ejecuta como transiciones. Si intenta realizar más actualizaciones de estado más tarde (por ejemplo, en un timeout), no se marcarán como transiciones. +* La función que pasas a `startTransition` debe ser sincrónica. React ejecuta inmediatamente esta función, marcando todas las actualizaciones de estado que ocurren mientras se ejecuta como transiciones. Si intentas realizar más actualizaciones de estado más tarde (por ejemplo, en un timeout), no se marcarán como transiciones. * Una actualización de estado marcada como una transición será interrumpida por otras actualizaciones de estado. Por ejemplo, si actualiza un componente de gráfico dentro de una transición, pero luego comienza a escribir en una entrada mientras el gráfico está en medio de una re-renderización, React reiniciará el trabajo de renderizado en el componente de gráfico después de manejar la actualización de estado de entrada. From 16d2922ffa734cdf63aa6900cbbac9ed103dbda9 Mon Sep 17 00:00:00 2001 From: Ruben Chirino Date: Sat, 1 Apr 2023 11:33:20 -0300 Subject: [PATCH 6/9] Update beta/src/content/reference/react/startTransition.md Co-authored-by: Rainer Martinez --- beta/src/content/reference/react/startTransition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/content/reference/react/startTransition.md b/beta/src/content/reference/react/startTransition.md index b3f16ef1c..8e8f51ea7 100644 --- a/beta/src/content/reference/react/startTransition.md +++ b/beta/src/content/reference/react/startTransition.md @@ -55,7 +55,7 @@ function TabContainer() { * La función que pasas a `startTransition` debe ser sincrónica. React ejecuta inmediatamente esta función, marcando todas las actualizaciones de estado que ocurren mientras se ejecuta como transiciones. Si intentas realizar más actualizaciones de estado más tarde (por ejemplo, en un timeout), no se marcarán como transiciones. -* Una actualización de estado marcada como una transición será interrumpida por otras actualizaciones de estado. Por ejemplo, si actualiza un componente de gráfico dentro de una transición, pero luego comienza a escribir en una entrada mientras el gráfico está en medio de una re-renderización, React reiniciará el trabajo de renderizado en el componente de gráfico después de manejar la actualización de estado de entrada. +* Una actualización de estado marcada como una transición será interrumpida por otras actualizaciones de estado. Por ejemplo, si actualizas un componente de gráfico dentro de una transición, pero luego comienzas a escribir en una entrada de texto mientras el gráfico está en medio de una rerenderización, React reiniciará el trabajo de renderizado en el componente de gráfico después de manejar la actualización de estado de la entrada de texto. * Las actualizaciones de transición no se pueden utilizar para controlar entradas de texto. From a1dc13da20d03f4125d5e534ffe7f5cec7232dc0 Mon Sep 17 00:00:00 2001 From: Ruben Chirino Date: Sat, 1 Apr 2023 11:33:29 -0300 Subject: [PATCH 7/9] Update beta/src/content/reference/react/startTransition.md Co-authored-by: Rainer Martinez --- beta/src/content/reference/react/startTransition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/content/reference/react/startTransition.md b/beta/src/content/reference/react/startTransition.md index 8e8f51ea7..a37592f74 100644 --- a/beta/src/content/reference/react/startTransition.md +++ b/beta/src/content/reference/react/startTransition.md @@ -67,7 +67,7 @@ function TabContainer() { ### Marcar una actualización de estado como una transición sin bloqueo {/*marking-a-state-update-as-a-non-blocking-transition*/} -Puede marcar una actualización de estado como una transición envolviéndola en una llamada `startTransition`: +Puedes marcar una actualización de estado como una transición envolviéndola en una llamada `startTransition`: ```js {7,9} import { startTransition } from 'react'; From 212a0ab387ae645166fb40cd0ebf5e1b5ebb6782 Mon Sep 17 00:00:00 2001 From: Ruben Chirino Date: Sat, 1 Apr 2023 11:33:49 -0300 Subject: [PATCH 8/9] Update beta/src/content/reference/react/startTransition.md Co-authored-by: Rainer Martinez --- beta/src/content/reference/react/startTransition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/content/reference/react/startTransition.md b/beta/src/content/reference/react/startTransition.md index a37592f74..b2f7bdc2c 100644 --- a/beta/src/content/reference/react/startTransition.md +++ b/beta/src/content/reference/react/startTransition.md @@ -90,7 +90,7 @@ Con una transición, tu interfaz de usuario sigue siendo receptiva en medio de u -`startTransition` es muy similar a [`useTransition`](/reference/react/useTransition), excepto que no proporciona la bandera `isPending` para rastrear si una transición está en curso. Puede llamar a `startTransition` cuando `useTransition` no esté disponible. Por ejemplo, `startTransition` funciona fuera de los componentes, como desde una biblioteca de datos. +`startTransition` es muy similar a [`useTransition`](/reference/react/useTransition), excepto que no proporciona la bandera `isPending` para rastrear si una transición está en curso. Puedes llamar a `startTransition` cuando `useTransition` no esté disponible. Por ejemplo, `startTransition` funciona fuera de los componentes, como desde una biblioteca de datos. [Aprenda sobre las transiciones y vea ejemplos en la página de `useTransition`.](/reference/react/useTransition) From 07a9f3f5911a24c0cfc8dfae1530a439eeca2320 Mon Sep 17 00:00:00 2001 From: Ruben Chirino Date: Sat, 1 Apr 2023 11:34:06 -0300 Subject: [PATCH 9/9] Update beta/src/content/reference/react/startTransition.md Co-authored-by: Rainer Martinez --- beta/src/content/reference/react/startTransition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/content/reference/react/startTransition.md b/beta/src/content/reference/react/startTransition.md index b2f7bdc2c..5a1cc85a6 100644 --- a/beta/src/content/reference/react/startTransition.md +++ b/beta/src/content/reference/react/startTransition.md @@ -92,6 +92,6 @@ Con una transición, tu interfaz de usuario sigue siendo receptiva en medio de u `startTransition` es muy similar a [`useTransition`](/reference/react/useTransition), excepto que no proporciona la bandera `isPending` para rastrear si una transición está en curso. Puedes llamar a `startTransition` cuando `useTransition` no esté disponible. Por ejemplo, `startTransition` funciona fuera de los componentes, como desde una biblioteca de datos. -[Aprenda sobre las transiciones y vea ejemplos en la página de `useTransition`.](/reference/react/useTransition) +[Aprende sobre las transiciones y ve ejemplos en la página de `useTransition`.](/reference/react/useTransition)