You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The `startTransition`function lets you mark a state update as a transition.
23
+
La función `startTransition`te permite marcar una actualización de estado como una transición.
24
24
25
25
```js {7,9}
26
26
import { startTransition } from'react';
27
27
28
28
functionTabContainer() {
29
-
const [tab, setTab] =useState('about');
29
+
const [tab, setTab] =useState('acerca de');
30
30
31
31
functionselectTab(nextTab) {
32
32
startTransition(() => {
@@ -37,43 +37,43 @@ function TabContainer() {
37
37
}
38
38
```
39
39
40
-
[See more examples below.](#usage)
40
+
[Ver más ejemplos a continuación.](#usage)
41
41
42
-
#### Parameters {/*parameters*/}
42
+
#### Parámetros {/*parameters*/}
43
43
44
-
*`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)
44
+
*`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)
45
45
46
46
#### Returns {/*returns*/}
47
47
48
-
`startTransition`does not return anything.
48
+
`startTransition`no devuelve nada.
49
49
50
-
#### Caveats {/*caveats*/}
50
+
#### Advertencias {/*caveats*/}
51
51
52
-
*`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.
52
+
*`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.
53
53
54
-
*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.
54
+
*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.
55
55
56
-
*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.
56
+
*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.
57
57
58
-
*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.
58
+
*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.
59
59
60
-
*Transition updates can't be used to control text inputs.
60
+
*Las actualizaciones de transición no se pueden utilizar para controlar entradas de texto.
61
61
62
-
*If there are multiple ongoing transitions, React currently batches them together. This is a limitation that will likely be removed in a future release.
62
+
*Si hay varias transiciones en curso, React actualmente las agrupa. Esta es una limitación que probablemente se eliminará en una versión futura.
63
63
64
64
---
65
65
66
-
## Usage {/*usage*/}
66
+
## Uso {/*usage*/}
67
67
68
-
### Marking a state update as a non-blocking transition {/*marking-a-state-update-as-a-non-blocking-transition*/}
68
+
### Marcar una actualización de estado como una transición sin bloqueo {/*marking-a-state-update-as-a-non-blocking-transition*/}
69
69
70
-
You can mark a state update as a *transition* by wrapping it in a `startTransition` call:
70
+
Puedes marcar una actualización de estado como una transición envolviéndola en una llamada `startTransition`:
71
71
72
72
```js {7,9}
73
73
import { startTransition } from'react';
74
74
75
75
functionTabContainer() {
76
-
const [tab, setTab] =useState('about');
76
+
const [tab, setTab] =useState('acerca de');
77
77
78
78
functionselectTab(nextTab) {
79
79
startTransition(() => {
@@ -84,14 +84,14 @@ function TabContainer() {
84
84
}
85
85
```
86
86
87
-
Transitions let you keep the user interface updates responsive even on slow devices.
87
+
Las transiciones te permiten mantener la actualización de la interfaz de usuario receptiva incluso en dispositivos lentos.
88
88
89
-
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.
89
+
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.
90
90
91
91
<Note>
92
92
93
-
`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.
93
+
`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.
94
94
95
-
[Learn about transitions and see examples on the `useTransition` page.](/reference/react/useTransition)
95
+
[Aprende sobre las transiciones y ve ejemplos en la página de `useTransition`.](/reference/react/useTransition)
0 commit comments