diff --git a/src/content/reference/react/startTransition.md b/src/content/reference/react/startTransition.md index fba28f6d1..c1df63650 100644 --- a/src/content/reference/react/startTransition.md +++ b/src/content/reference/react/startTransition.md @@ -4,7 +4,7 @@ title: startTransition -`startTransition` lets you render a part of the UI in the background. +`startTransition` permite que você renderize uma parte da UI em background. ```js startTransition(action) @@ -16,11 +16,11 @@ startTransition(action) --- -## Reference {/*reference*/} +## Referência {/*reference*/} ### `startTransition(action)` {/*starttransition*/} -The `startTransition` function lets you mark a state update as a Transition. +A função `startTransition` permite que você marque uma atualização de estado como uma Transition. ```js {7,9} import { startTransition } from 'react'; @@ -37,39 +37,39 @@ function TabContainer() { } ``` -[See more examples below.](#usage) +[Veja mais exemplos abaixo.](#usage) -#### Parameters {/*parameters*/} +#### Parâmetros {/*parameters*/} -* `action`: A function that updates some state by calling one or more [`set` functions](/reference/react/useState#setstate). React calls `action` immediately with no parameters and marks all state updates scheduled synchronously during the `action` function call as Transitions. Any async calls awaited in the `action` will be included in the transition, but currently require wrapping any `set` functions after the `await` in an additional `startTransition` (see [Troubleshooting](/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition)). State updates marked as Transitions will be [non-blocking](#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators.](/reference/react/useTransition#preventing-unwanted-loading-indicators). +* `action`: Uma função que atualiza algum `state` chamando uma ou mais funções [`set`](/reference/react/useState#setstate). React chama `action` imediatamente sem parâmetros e marca todas as atualizações de `state` agendadas de forma síncrona durante a chamada da função `action` como Transitions. Quaisquer chamadas assíncronas aguardadas no `action` serão incluídas na transition, mas atualmente requerem encapsular quaisquer funções `set` após o `await` em um `startTransition` adicional (veja [Solução de problemas](/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition)). Atualizações de `state` marcadas como Transitions serão [não bloqueantes](#marking-a-state-update-as-a-non-blocking-transition) e [não exibirão indicadores de carregamento indesejados.](/reference/react/useTransition#preventing-unwanted-loading-indicators). -#### Returns {/*returns*/} +#### Retorna {/*returns*/} -`startTransition` does not return anything. +`startTransition` não retorna nada. -#### Caveats {/*caveats*/} +#### Ressalvas {/*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` não fornece uma maneira de rastrear se uma Transition está pendente. Para mostrar um indicador pendente enquanto a Transition está em andamento, você precisa de [`useTransition`](/reference/react/useTransition) em vez disso. -* 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. +* Você pode encapsular uma atualização em uma Transition somente se tiver acesso à função `set` desse `state`. Se você deseja iniciar uma Transition em resposta a alguma `prop` ou um valor de retorno de um Hook customizado, tente [`useDeferredValue`](/reference/react/useDeferredValue) em vez disso. -* The function you pass to `startTransition` is called immediately, marking all state updates that happen while it executes as Transitions. If you try to perform state updates in a `setTimeout`, for example, they won't be marked as Transitions. +* A função que você passa para `startTransition` é chamada imediatamente, marcando todas as atualizações de `state` que acontecem enquanto ela é executada como Transitions. Se você tentar executar atualizações de `state` em um `setTimeout`, por exemplo, elas não serão marcadas como Transitions. -* You must wrap any state updates after any async requests in another `startTransition` to mark them as Transitions. This is a known limitation that we will fix in the future (see [Troubleshooting](/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition)). +* Você deve encapsular quaisquer atualizações de `state` após quaisquer solicitações assíncronas em outro `startTransition` para marcá-las como Transitions. Esta é uma limitação conhecida que corrigiremos no futuro (veja [Solução de problemas](/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition)). -* 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. +* Uma atualização de `state` marcada como uma Transition será interrompida por outras atualizações de `state`. Por exemplo, se você atualizar um componente de gráfico dentro de uma Transition, mas depois começar a digitar em uma entrada enquanto o gráfico está no meio de uma re-renderização, React reiniciará o trabalho de renderização no componente de gráfico após manipular a atualização de `state` da entrada. -* Transition updates can't be used to control text inputs. +* Atualizações de Transition não podem ser usadas para controlar entradas de texto. -* If there are multiple ongoing Transitions, React currently batches them together. This is a limitation that may be removed in a future release. +* Se houver várias Transitions em andamento, React atualmente as agrupa. Esta é uma limitação que pode ser removida em uma versão futura. --- -## Usage {/*usage*/} +## Uso {/*usage*/} -### Marking a state update as a non-blocking Transition {/*marking-a-state-update-as-a-non-blocking-transition*/} +### Marcando uma atualização de `state` como uma Transition não bloqueante {/*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: +Você pode marcar uma atualização de `state` como uma *Transition* encapsulando-a em uma chamada `startTransition`: ```js {7,9} import { startTransition } from 'react'; @@ -86,14 +86,14 @@ function TabContainer() { } ``` -Transitions let you keep the user interface updates responsive even on slow devices. +Transitions permitem que você mantenha as atualizações da interface do usuário responsivas, mesmo em 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. +Com uma Transition, sua UI permanece responsiva no meio de uma re-renderização. Por exemplo, se o usuário clicar em uma aba, mas depois mudar de ideia e clicar em outra aba, ele pode fazê-lo sem esperar que a primeira re-renderização termine. -`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` é muito semelhante ao [`useTransition`](/reference/react/useTransition), exceto que não fornece a flag `isPending` para rastrear se uma Transition está em andamento. Você pode chamar `startTransition` quando `useTransition` não estiver disponível. Por exemplo, `startTransition` funciona fora dos componentes, como de uma biblioteca de dados. -[Learn about Transitions and see examples on the `useTransition` page.](/reference/react/useTransition) +[Saiba mais sobre Transitions e veja exemplos na página `useTransition`.](/reference/react/useTransition) - + \ No newline at end of file