diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index db99daa11..7f285fccc 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -4,7 +4,7 @@ title: lazy -`lazy` lets you defer loading component's code until it is rendered for the first time. +`lazy` permite que você adie o carregamento do código do componente até que ele seja renderizado pela primeira vez. ```js const SomeComponent = lazy(load) @@ -16,11 +16,11 @@ const SomeComponent = lazy(load) --- -## Reference {/*reference*/} +## Referência {/*reference*/} ### `lazy(load)` {/*lazy*/} -Call `lazy` outside your components to declare a lazy-loaded React component: +Chame `lazy` fora dos seus componentes para declarar um componente React carregado de forma preguiçosa: ```js import { lazy } from 'react'; @@ -28,41 +28,41 @@ import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ``` -[See more examples below.](#usage) +[Veja mais exemplos abaixo.](#usage) -#### Parameters {/*parameters*/} +#### Parâmetros {/*parameters*/} -* `load`: A function that returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or another *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's `.default` 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 for the nearest Error Boundary to handle. +* `load`: Uma função que retorna uma [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) ou outro *thenable* (um objeto semelhante a uma Promise com um método `then`). O React não chamará `load` até a primeira vez que você tentar renderizar o componente retornado. Depois que o React chama `load` pela primeira vez, ele aguardará a resolução e, em seguida, renderizará o valor resolvido como um componente React. Tanto a Promise retornada quanto o valor resolvido da Promise serão armazenados em cache, de modo que o React não chamará `load` mais de uma vez. Se a Promise for rejeitada, o React irá `throw` a razão da rejeição para o mais próximo Error Boundary manipular. -#### Returns {/*returns*/} +#### Retornos {/*returns*/} -`lazy` returns a React component you can render in your tree. While the code for the lazy component is still loading, attempting to render it will *suspend.* Use [``](/reference/react/Suspense) to display a loading indicator while it's loading. +`lazy` retorna um componente React que você pode renderizar em sua árvore. Enquanto o código do componente preguiçoso ainda estiver carregando, tentar renderizá-lo irá *suspender.* Use [``](/reference/react/Suspense) para exibir um indicador de carregamento enquanto ele está carregando. --- -### `load` function {/*load*/} +### Função `load` {/*load*/} -#### Parameters {/*load-parameters*/} +#### Parâmetros {/*load-parameters*/} -`load` receives no parameters. +`load` não recebe parâmetros. -#### Returns {/*load-returns*/} +#### Retornos {/*load-returns*/} -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 an object whose `.default` property is a valid React component type, such as a function, [`memo`](/reference/react/memo), or a [`forwardRef`](/reference/react/forwardRef) component. +Você precisa retornar uma [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) ou algum outro *thenable* (um objeto semelhante a uma Promise com um método `then`). Ele precisa eventualmente resolver para um objeto cuja propriedade `.default` é um tipo de componente React válido, como uma função, [`memo`](/reference/react/memo), ou um componente [`forwardRef`](/reference/react/forwardRef). --- -## Usage {/*usage*/} +## Uso {/*usage*/} -### Lazy-loading components with Suspense {/*suspense-for-code-splitting*/} +### Carregamento preguiçoso de componentes com Suspense {/*suspense-for-code-splitting*/} -Usually, you import components with the static [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) declaration: +Geralmente, você importa componentes com a declaração estática [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import): ```js import MarkdownPreview from './MarkdownPreview.js'; ``` -To defer loading this component's code until it's rendered for the first time, replace this import with: +Para adiar o carregamento do código desse componente até que ele seja renderizado pela primeira vez, substitua essa importação por: ```js import { lazy } from 'react'; @@ -70,9 +70,9 @@ import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ``` -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. Using this pattern requires that the lazy component you're importing was exported as the `default` export. +Este código depende do [import() dinâmico,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) que pode exigir suporte do seu bundler ou framework. Usar este padrão exige que o componente preguiçoso que você está importando tenha sido exportado como a exportação `default`. -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 [``](/reference/react/Suspense) boundary: +Agora que o código do seu componente é carregado sob demanda, você também precisa especificar o que deve ser exibido enquanto ele está carregando. Você pode fazer isso encapsulando o componente preguiçoso ou qualquer um de seus pais em um limite [``](/reference/react/Suspense): ```js {1,4} }> @@ -81,7 +81,7 @@ Now that your component's code loads on demand, you also need to specify what sh ``` -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: +Neste exemplo, o código para `MarkdownPreview` não será carregado até que você tente renderizá-lo. Se `MarkdownPreview` ainda não tiver carregado, `Loading` será exibido em seu lugar. Tente marcar a caixa de seleção: @@ -99,12 +99,12 @@ export default function MarkdownEditor() {