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
title: Concurrent Mode API Reference (Experimental)
3
+
title: Referencia del API del modo concurrente (Experimental)
4
4
permalink: docs/concurrent-mode-reference.html
5
5
prev: concurrent-mode-adoption.html
6
6
---
7
7
8
-
>Caution:
8
+
>Advertencia:
9
9
>
10
-
>This page describes**experimental features that are [not yet available](/docs/concurrent-mode-adoption.html)in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React.
10
+
>Esta página describe**funcionalidades experimentales que [aún no están disponibles](/docs/concurrent-mode-adoption.html)en una versión estable**. No dependas de compilados experimentales de React en aplicaciones en producción. Estas funcionalidades pueden cambiar significativamente y sin previo aviso antes de formar parte de React.
11
11
>
12
-
>This documentation is aimed at early adopters and people who are curious. If you're new to React, don't worry about these features -- you don't need to learn them right now.
12
+
>Esta documentación está dirigida a usuarios pioneros y personas curiosas. Si te estás iniciando en React, no te preocupes por estas funcionalidades, no necesitas aprenderlas inmediatamente.
13
13
14
-
This page is an API reference for the React [Concurrent Mode](/docs/concurrent-mode-intro.html). If you're looking for a guided introduction instead, check out [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html).
14
+
Esta página es una referencia del API del [Modo concurrente](/docs/concurrent-mode-intro.html) de React. Si estás buscando una guía de introducción, revisa [Patrones concurrentes en interfaces de usuario](/docs/concurrent-mode-patterns.html).
15
15
16
-
**Note: This is a Community Preview and not the final stable version. There will likely be future changes to these APIs. Use at your own risk!**
16
+
**Nota: Esto es un una vista previa de la comunidad y no es la versión final estable. Es probable que existan futuros cambios a estas APIs. ¡Úsalas bajo tu propio riesgo!**
17
17
18
-
-[Enabling Concurrent Mode](#concurrent-mode)
18
+
-[Habilitando el modo concurrente](#concurrent-mode)
19
19
-[`createRoot`](#createroot)
20
20
-[`createBlockingRoot`](#createblockingroot)
21
21
-[Suspense](#suspense)
@@ -24,31 +24,31 @@ This page is an API reference for the React [Concurrent Mode](/docs/concurrent-m
24
24
-[`useTransition`](#usetransition)
25
25
-[`useDeferredValue`](#usedeferredvalue)
26
26
27
-
## Enabling Concurrent Mode {#concurrent-mode}
27
+
## Habilitando el modo concurrente {#concurrent-mode}
Reemplaza`ReactDOM.render(<App />, rootNode)`y habilita el [Modo de bloqueo](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode).
46
46
47
-
Opting into Concurrent Mode introduces semantic changes to how React works. This means that you can't use Concurrent Mode in just a few components. Because of this, some apps may not be able to migrate directly to Concurrent Mode.
47
+
Optar por el Modo concurrente introduce cambios semánticos en como React funciona. Esto siginifca que no puedes usar el Modo concurrente en solo algunos componentes. Por lo tanto, algunas aplicaciones no estarían aptas de realizar una migración directa hacia el Modo concurrente.
48
48
49
-
Blocking Mode only contains a small subset of Concurrent Mode features and is intended as an intermediary migration step for apps that are unable to migrate directly.
49
+
El Modo de bloqueo solo contiene pequeños subconjuntos de las características del Modo concurrente y está pensado como un paso de migración intermedia para aplicaciones que no puedan migrar directamente.
50
50
51
-
## Suspense API {#suspense}
51
+
## API de Suspense {#suspense}
52
52
53
53
### `Suspense` {#suspensecomponent}
54
54
@@ -59,13 +59,13 @@ Blocking Mode only contains a small subset of Concurrent Mode features and is in
59
59
</Suspense>
60
60
```
61
61
62
-
`Suspense`lets your components "wait" for something before they can render, showing a fallback while waiting.
62
+
`Suspense`permite que tus componentes "esperen" algo antes de que puedan renderizar, mostrando un contenido de respaldo mientras esperan.
63
63
64
-
In this example, `ProfileDetails`is waiting for an asynchronous API call to fetch some data. While we wait for `ProfileDetails`and`ProfilePhoto`, we will show the`Loading...`fallback instead. It is important to note that until all children inside `<Suspense>`has loaded, we will continue to show the fallback.
64
+
En este ejemplo, `ProfileDetails`está esperando una llamada asíncrona del API para obtener algunos datos. Mientras esperamos a `ProfileDetails`y`ProfilePhoto`, vamos a ir mostrando`Loading...`como contenido de respaldo mientras tanto. Es importante tener en cuenta que hasta que todos los hijos de `<Suspense>`hayan cargado, continuaremos mostrando el contenido de respaldo.
65
65
66
-
`Suspense`takes two props:
67
-
***fallback**takes a loading indicator. The fallback is shown until all of the children of the `Suspense`component have finished rendering.
68
-
***unstable_avoidThisFallback**takes a boolean. It tells React whether to "skip" revealing this boundary during the initial load. This API will likely be removed in a future release.
66
+
`Suspense`lleva dos props:
67
+
***fallback**lleva un indicador de carga. El contenido de respaldo es mostrado hasta que todos los hijos de `Suspense`hayan terminado de renderizar.
68
+
***unstable_avoidThisFallback**lleva un booleano. Le dice a React si debe "omitir" revelar este límite durante la carga inicial. Es probable que esta API sea eliminada en una versión futura.
69
69
70
70
### `<SuspenseList>` {#suspenselist}
71
71
@@ -84,19 +84,19 @@ In this example, `ProfileDetails` is waiting for an asynchronous API call to fet
84
84
</SuspenseList>
85
85
```
86
86
87
-
`SuspenseList`helps coordinate many components that can suspend by orchestrating the order in which these components are revealed to the user.
87
+
`SuspenseList`ayuda a coordinar muchos componentes que pueden suspenderse organizando el orden en que estos componentes se muestran al usuario.
88
88
89
-
When multiple components need to fetch data, this data may arrive in an unpredictable order. However, if you wrap these items in a `SuspenseList`, React will not show an item in the list until previous items have been displayed (this behavior is adjustable).
89
+
Cuando varios componentes necesitan obtener datos, estos datos pueden llegar en un orden impredecible. Sin embargo, si envuelves estos elementos en un `SuspenseList`, React no mostrará un elemento de la lista hasta que todos los elementos anteriores se hayan mostrado (este comportamiente es ajustable).
90
90
91
-
`SuspenseList`takes two props:
92
-
***revealOrder (forwards, backwards, together)**defines the order in which the `SuspenseList`children should be revealed.
93
-
*`together`reveals *all* of them when they're ready instead of one by one.
94
-
***tail (collapsed, hidden)**dictates how unloaded items in a `SuspenseList`is shown.
95
-
*By default, `SuspenseList`will show all fallbacks in the list.
96
-
*`collapsed`shows only the next fallback in the list.
97
-
*`hidden`doesn't show any unloaded items.
91
+
`SuspenseList`lleva dos props:
92
+
***revealOrder (forwards, backwards, together)**define el orden en el cual los hijos de `SuspenseList`deberían ser mostrados.
93
+
*`together`muestra *todos* ellos cuando estén listos en lugar de uno por uno.
94
+
***tail (collapsed, hidden)**decide como los contenidos de respaldo en un `SuspenseList`son mostrados.
95
+
*Por defecto, `SuspenseList`va a mostrar todos los contenidos de respaldo en la lista.
96
+
*`collapsed`solo muestra el siguiente contenido de respaldo en la lista.
97
+
*`hidden`no muestra ningun contenido de respaldo.
98
98
99
-
Note that `SuspenseList`only operates on the closest`Suspense`and`SuspenseList`components below it. It does not search for boundaries deeper than one level. However, it is possible to nest multiple `SuspenseList`components in each other to build grids.
99
+
Tener en cuenta que `SuspenseList`solo funciona en los componentes`Suspense`y`SuspenseList`más cercanos debajo de él. No busca límites más profundos que un nivel. Sin embargo, es posible anidar múltiples componentes `SuspenseList`entre sí para construir grillas.
`useTransition`allows components to avoid undesirable loading states by waiting for content to load before **transitioning to the next screen**. It also allows components to defer slower, data fetching updates until subsequent renders so that more crucial updates can be rendered immediately.
109
+
`useTransition`permite a los componentes evitar estados de carga no deseada al esperar que se cargue el contenido antes de **transicionar hacia la siguiente pantalla**. También permite que los componentes difieran las actualizaciones de datos obtenidos más lentas hasta la siguiente renderización, de modo que se puedan presentar actualizaciones más cruciales de inmediato.
110
110
111
-
The `useTransition`hook returns two values in an array.
112
-
*`startTransition`is a function that takes a callback. We can use it to tell React which state we want to defer.
113
-
*`isPending`is a boolean. It's React's way of informing us whether we're waiting for the transition to finish.
111
+
El hook `useTransition`retorna dos valores en un array.
112
+
*`startTransition`es una función que toma un callback. Nosotros podemos usarlo para decirle a React cual estado queremos diferir.
113
+
*`isPending`es un booleano. Es la manera en que React nos informa si estamos esperando que la transición termine.
114
114
115
-
**If some state update causes a component to suspend, that state update should be wrapped in a transition.**
115
+
**Si alguna actualización de estado causa que un componente se suspenda, esa actualización de estado debería estar envuelta en una transición.**
116
116
117
117
```js
118
118
constSUSPENSE_CONFIG= {timeoutMs:2000 };
@@ -142,21 +142,21 @@ function App() {
142
142
}
143
143
```
144
144
145
-
In this code, we've wrapped our data fetching with`startTransition`. This allows us to start fetching the profile data right away, while deferring the render of the next profile page and its associated`Spinner`for 2 seconds (the time shown in`timeoutMs`).
145
+
En este código, envolvimos nuestra obtención de datos con`startTransition`. Esto nos permite empezar a obtener los datos del perfil de inmediato, mientras diferimos el renderizado de la siguiente página de perfil y su`Spinner`asociado durante 2 segundos (el tiempo mostrado en`timeoutMs`).
146
146
147
-
The `isPending`boolean lets React know that our component is transitioning, so we are able to let the user know this by showing some loading text on the previous profile page.
147
+
El booleano `isPending`le permite a React saber si nuestro componente está transicionando, por lo que somos capaces de informar al usuario esto mostrando algun texto de carga en la página de perfil anterior.
148
148
149
-
**For an in-depth look at transitions, you can read [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html#transitions).**
149
+
**Para una mirada a profundidad en transiciones, puedes leer [Patrones concurrentes en interfaces de usuario](/docs/concurrent-mode-patterns.html#transitions).**
150
150
151
-
#### useTransition Config {#usetransition-config}
151
+
#### Configuración de useTransition {#usetransition-config}
152
152
153
153
```js
154
154
constSUSPENSE_CONFIG= { timeoutMs:2000 };
155
155
```
156
156
157
-
`useTransition`accepts an**optional Suspense Config**with a`timeoutMs`. This timeout (in milliseconds) tells React how long to wait before showing the next state (the new Profile Page in the above example).
157
+
`useTransition`acepta una**Configuración de suspenso opcional**con un`timeoutMs`. Este tiempo de espera (en milisegundos) le dice a React cuánto tiempo esperar antes de mostrar el siguiente estado (la nueva página de perfil en el ejemplo anterior).
158
158
159
-
**Note: We recommend that you share Suspense Config between different modules.**
159
+
**Nota: Recomendamos que compartas tu Configuración de suspenso entre diferentes módulos.**
Returns a deferred version of the value that may "lag behind" it for at most`timeoutMs`.
168
+
Retorna una versión diferida del valor que puede "quedarse atrás" con un máximo de`timeoutMs`.
169
169
170
-
This is commonly used to keep the interface responsive when you have something that renders immediately based on user input and something that needs to wait for a data fetch.
170
+
Esto se usa comúnmente para mantener la interfaz responsiva cuando tienes algo que se renderiza inmediatamente basado en la entrada del usuario y algo que necesita esperar para obtener un dato.
171
171
172
-
A good example of this is a text input.
172
+
Un buen ejemplo de esto es una entrada de texto.
173
173
174
174
```js
175
175
functionApp() {
@@ -178,26 +178,26 @@ function App() {
178
178
179
179
return (
180
180
<div className="App">
181
-
{/*Keep passing the current text to the input*/}
181
+
{/*Sigue pasando el texto actual a la entrada*/}
182
182
<input value={text} onChange={handleChange} />
183
183
...
184
-
{/*But the list is allowed to "lag behind" when necessary*/}
184
+
{/*Pero la lista tiene permitido "quedarse atrás" cuando sea necesario*/}
185
185
<MySlowList text={deferredText} />
186
186
</div>
187
187
);
188
188
}
189
189
```
190
190
191
-
This allows us to start showing the new text for the`input`immediately, which allows the webpage to feel responsive. Meanwhile, `MySlowList` "lag behind" for up to 2 seconds according to the`timeoutMs`before updating, allowing it to render with the current text in the background.
191
+
Esto nos permite empezar a mostrar el nuevo texto para el`input`inmediatamente, lo que permite que la página se sienta responsiva. Mientras tanto, `MySlowList` "se queda atrás" por hasta 2 segundos de acuerdo con`timeoutMs`antes de actualizar, permitiendo renderizar con el texto actual en segundo plano.
192
192
193
-
**For an in-depth look at deferring values, you can read [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html#deferring-a-value).**
193
+
**Para una mirada a profundidad en valores diferidos, puedes leer [Patrones concurrentes en interfaces de usuario](/docs/concurrent-mode-patterns.html#deferring-a-value).**
#### Configuración de useDeferredValue {#usedeferredvalue-config}
196
196
197
197
```js
198
198
constSUSPENSE_CONFIG= { timeoutMs:2000 };
199
199
```
200
200
201
-
`useDeferredValue`accepts an**optional Suspense Config**with a`timeoutMs`. This timeout (in milliseconds) tells React how long the deferred value is allowed to lag behind.
201
+
`useDeferredValue`acepta una**Configuración de suspenso opcional**con un`timeoutMs`. Este tiempo de espera (en milisegundos) le dice a React cuánto tiempo se puede retrasar el valor diferido.
202
202
203
-
React will always try to use a shorter lag when network and device allows it.
203
+
React siempre intentará usar un retraso más corto cuando la red y el dispositivo se lo permitan.
0 commit comments