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
### Lazy-loading components with Suspense {/*suspense-for-code-splitting*/}
21
+
### Componentes Lazy-loading con Suspense {/*suspense-for-code-splitting*/}
22
22
23
-
Usually, you import components with the static[`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) declaration:
23
+
Por lo general, importas componentes con la declaración estática[`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import):
24
24
25
25
```js
26
26
importMarkdownPreviewfrom'./MarkdownPreview.js';
27
27
```
28
28
29
-
To defer loading this component's code until it's rendered for the first time, replace this import with:
29
+
Para diferir la carga del código de este componente hasta que se renderice por primera vez, reemplaza esta importación con:
This code relies on [dynamic `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import)which might require support from your bundler or framework.
37
+
Este código se basa en [`import()` dinámico,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import)que puede requerir el apoyo del paquete o del framework.
38
38
39
-
Now that your component's code loads on demand, you also need to specify what should be displayed while it is loading. You can do this by wrapping the lazy component or any of its parents into a [`<Suspense>`](/apis/react/Suspense) boundary:
39
+
Ahora que el código de tu componente se carga a demanda, también debes especificar qué debe mostrarse mientras se carga. Puedes hacer esto envolviendo el componente lazy o cualquiera de sus padres en un [`<Suspense>`](/apis/react/Suspense):
40
40
41
41
```js {1,4}
42
42
<Suspense fallback={<Loading />}>
43
43
<h2>Preview</h2>
44
44
<MarkdownPreview />
45
-
</Suspense>
45
+
</Suspense>
46
46
```
47
47
48
-
In this example, the code for`MarkdownPreview`won't be loaded until you attempt to render it. If`MarkdownPreview`hasn't loaded yet, `Loading`will be shown in its place. Try ticking the checkbox:
48
+
En este ejemplo, el código para`MarkdownPreview`no se cargará hasta que intentes renderizarlo. Si`MarkdownPreview`aún no se ha cargado, `Loading`se mostrará en su lugar. Intenta marcar el checkbox:
49
49
50
50
<Sandpack>
51
51
@@ -139,49 +139,49 @@ body {
139
139
140
140
</Sandpack>
141
141
142
-
This demo loads with an artificial delay. The next time you untick and tick the checkbox, `Preview`will be cached, so there will be no loading state displayed. To see the loading state again, click "Reset" on the sandbox.
142
+
Esta demostración se carga con un retraso artificial. La próxima vez que desmarques y marques el checkbox, `Preview`se almacenará en caché, por lo que no se mostrará ningún estado de carga. Para ver nuevamente el estado de carga, haz clic en “ Restablecer ” en el sandbox.
143
143
144
-
[Learn more about managing loading states with Suspense.](/apis/react/Suspense)
144
+
[Obtenga más información sobre cómo administrar los estados de carga con Suspense.](/apis/react/Suspense)
145
145
146
146
---
147
147
148
-
## Reference {/*reference*/}
148
+
## Referencia {/*reference*/}
149
149
150
150
### `lazy(load)` {/*lazy*/}
151
151
152
-
Call `lazy`outside your components to declare a lazy-loaded React component:
152
+
Llama a `lazy`fuera de tus componentes para declarar un componente lazy-loaded:
*`load`: A function that returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)or some other *thenable* (a Promise-like object with a`then` method). React will not call`load`until the first time you attempt to render the returned component. After React first calls `load`, it will wait for it to resolve, and then render the resolved value as a React component. Both the returned Promise and the Promise's resolved value will be cached, so React will not call`load`more than once. If the Promise rejects, React will `throw` the rejection reason to let the closest Error Boundary above handle it.
160
+
-`load`: Una función que devuelve una [Promesa](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise)o algún otro _thenable_ (un objeto tipo Promise con un método`then`). React no llamará a`load`hasta la primera vez que intentes renderizar el componente devuelto. Después de que React llame por primera vez a `load`, esperará a que se resuelva, y entonces renderizará el valor resuelto como un componente React. Tanto la Promesa devuelta como el valor resuelto de la Promesa serán almacenados en caché, por lo que React no llamará a`load`más de una vez. Si la Promesa se rechaza, React `lanza` la razón de rechazo para dejar que el Error Boundary más cercano lo maneje.
161
161
162
162
#### Returns {/*returns*/}
163
163
164
-
`lazy`returns a React component that you can render in your tree. While the code for the lazy component is still loading, attempting to render it will *suspend.* Use[`<Suspense>`](/apis/react/Suspense)to display a loading indicator while it's loading.
164
+
`lazy`devuelve un componente React que puedes renderizar en tu árbol. Mientras el código del componente lazy sigue cargando, el intento de renderizarlo se _suspenderá._ Usa[`<Suspense>`](/apis/react/Suspense)para mostrar un indicador de carga mientras se carga.
165
165
166
166
---
167
167
168
-
### `load` function {/*load*/}
168
+
### Función `load` {/*load*/}
169
169
170
-
#### Parameters {/*load-parameters*/}
170
+
#### Parámetros {/*load-parameters*/}
171
171
172
-
`load`receives no parameters.
172
+
`load` no recibe parámetros.
173
173
174
174
#### Returns {/*load-returns*/}
175
175
176
-
You need to return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)or some other *thenable* (a Promise-like object with a`then` method). It needs to eventually resolve to a valid React component type, such as a function, [`memo`](/api/react/memo), or a [`forwardRef`](/api/react/forwardRef) component.
176
+
Necesitas devolver una [Promesa](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise)o algún otro _thenable_ (un objeto tipo Promise con un método`then`). Eventualmente debes resolver un tipo de componente React válido, como una función, [`memo`](/api/react/memo), o un componente [`forwardRef`](/api/react/forwardRef).
177
177
178
178
---
179
179
180
-
## Troubleshooting {/*troubleshooting*/}
180
+
## Solución de problemas {/*troubleshooting*/}
181
181
182
-
### My `lazy`component's state gets reset unexpectedly {/*my-lazy-components-state-gets-reset-unexpectedly*/}
182
+
### Mi estado del componente `lazy`se restablece inesperadamente {/*my-lazy-components-state-gets-reset-unexpectedly*/}
183
183
184
-
Do not declare`lazy`components *inside* other components:
184
+
No declarar componentes`lazy`_dentro_ de otros componentes:
185
185
186
186
```js {4-5}
187
187
import { lazy } from'react';
@@ -193,7 +193,7 @@ function Editor() {
193
193
}
194
194
```
195
195
196
-
Instead, always declare them at the top level of your module:
196
+
En cambio, declaralos siempre en el nivel superior de tu módulo:
0 commit comments