From 9cc13e1d8194dbf82fe6f2978972b145db7352bb Mon Sep 17 00:00:00 2001 From: Coding for Good <109705197+DaveSimoes@users.noreply.github.com> Date: Sat, 13 Jan 2024 01:46:59 -0300 Subject: [PATCH 1/8] Update startTransition.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tradução inicial startTransition.md --- src/content/reference/react/startTransition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/startTransition.md b/src/content/reference/react/startTransition.md index 4773d77c7..39042ee31 100644 --- a/src/content/reference/react/startTransition.md +++ b/src/content/reference/react/startTransition.md @@ -4,7 +4,7 @@ title: startTransition -`startTransition` lets you update the state without blocking the UI. + `startTransition` permite que você atualize o estado sem bloquear a interface do usuário. ```js startTransition(scope) From ec4f9b9b86869e5076b05732ff3b9398b454648f Mon Sep 17 00:00:00 2001 From: Coding for Good <109705197+DaveSimoes@users.noreply.github.com> Date: Sat, 13 Jan 2024 02:14:58 -0300 Subject: [PATCH 2/8] Update startTransition.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tradução startTransition.md --- .../reference/react/startTransition.md | 41 +++++++++---------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/src/content/reference/react/startTransition.md b/src/content/reference/react/startTransition.md index 39042ee31..5bf79c81e 100644 --- a/src/content/reference/react/startTransition.md +++ b/src/content/reference/react/startTransition.md @@ -1,5 +1,5 @@ --- -title: startTransition +título: startTransition --- @@ -16,11 +16,11 @@ startTransition(scope) --- -## Reference {/*reference*/} +## Referência {/*reference*/} ### `startTransition(scope)` {/*starttransitionscope*/} -The `startTransition` function lets you mark a state update as a transition. +A função startTransition permite que você marque uma atualização de state como uma transição. ```js {7,9} import { startTransition } from 'react'; @@ -37,25 +37,24 @@ function TabContainer() { } ``` -[See more examples below.](#usage) +[Ver mais exemplos abaixo](#uso) -#### Parameters {/*parameters*/} +#### Parâmetros {/*parameters*/} -* `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) +* `scope`: Uma função que atualiza algum estado chamando uma ou mais funções [`set`](/reference/react/useState#setstate) O React imediatamente chama `scope` sem parâmetros e marca todas as atualizações de state agendadas sincronizadamente durante a chamada da função `scope` como transições. Elas serão [sem bloqueio](/reference/react/useTransition#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) +#### Retornos {/*returns*/} -#### Returns {/*returns*/} +`startTransition` não retorna nada. -`startTransition` does not return anything. +#### Ressalvas {/*caveats*/} -#### Caveats {/*caveats*/} +* O `startTransition` não fornece uma forma de verificar se uma transição está pendente. Para mostrar um indicador pendente enquanto a transição está em curso, é necessário [`useTransition`](/reference/react/useTransition) instead. -* `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. +Você só pode envolver uma atualização em uma transição se tiver acesso à função `set` desse estado. Se desejar iniciar uma transição em resposta a alguma propriedade ou a um valor de retorno personalizado do Hook, tente [`useDeferredValue`](/reference/react/useDeferredValue) . -* 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. +* A função que você passa para `startTransition` deve ser síncrona. O React executa imediatamente essa função, marcando todas as atualizações de state que acontecem enquanto ela é executada como transições. Se você tentar executar mais atualizações de state depois (por exemplo, em um timeout), elas não serão marcadas como transições. -* 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. - -* 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 estado marcada como uma transição será interrompida por outras atualizações de estado. Por exemplo, se você atualizar um componente de gráfico dentro de uma transição, mas depois começar a digitar em uma entrada enquanto o gráfico estiver no meio de uma nova renderização, o React reiniciará o trabalho de renderização no componente de gráfico depois de lidar com a atualização do estado da entrada. * Transition updates can't be used to control text inputs. @@ -63,11 +62,11 @@ function TabContainer() { --- -## Usage {/*usage*/} +## Uso {/*usage*/} -### Marking a state update as a non-blocking transition {/*marking-a-state-update-as-a-non-blocking-transition*/} +### Marcação de uma atualização de state como uma transição sem bloqueio {/*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: +É possível marcar uma atualização de state como uma transição envolvendo-a em uma chamada `startTransition`: ```js {7,9} import { startTransition } from 'react'; @@ -84,14 +83,14 @@ function TabContainer() { } ``` -Transitions let you keep the user interface updates responsive even on slow devices. +As transições permitem manter a responsividade das atualizações da interface do usuário, 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 transição, a sua IU permanece responsiva durante uma nova apresentação. Por exemplo, se o usuário clicar em uma aba e depois mudar de ideia e clicar em outra, ele pode fazer isso sem esperar que a primeira nova apresentaçã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 à [`useTransition`](/reference/react/useTransition), exceto que não fornece a flag `isPending` para rastrear se uma transição está em andamento. Você pode chamar `startTransition` quando `useTransition` não está disponível. Por exemplo, `startTransition` funciona com componentes externos, por exemplo, a partir de uma biblioteca de dados. -[Learn about transitions and see examples on the `useTransition` page.](/reference/react/useTransition) +[Saiba mais sobre as transições e veja exemplos na `useTransition` page.](/reference/react/useTransition) From 475032946c94acbfc27b09ac37cf766799ec6395 Mon Sep 17 00:00:00 2001 From: David Simoes <109705197+DaveSimoes@users.noreply.github.com> Date: Sat, 16 Mar 2024 19:58:51 -0300 Subject: [PATCH 3/8] Translate of startTransition.md Translate of startTransition to Pt/Br --- .../reference/react/startTransition.md | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/src/content/reference/react/startTransition.md b/src/content/reference/react/startTransition.md index 5bf79c81e..5bcd5b476 100644 --- a/src/content/reference/react/startTransition.md +++ b/src/content/reference/react/startTransition.md @@ -4,7 +4,7 @@ título: startTransition - `startTransition` permite que você atualize o estado sem bloquear a interface do usuário. + `startTransition` permite que você atualize o state sem bloquear a UI ```js startTransition(scope) @@ -20,7 +20,7 @@ startTransition(scope) ### `startTransition(scope)` {/*starttransitionscope*/} -A função startTransition permite que você marque uma atualização de state como uma transição. +A função `startTransition` permite que você marque uma atualização de state como uma transição. ```js {7,9} import { startTransition } from 'react'; @@ -37,28 +37,29 @@ function TabContainer() { } ``` -[Ver mais exemplos abaixo](#uso) +[Veja mais exemplos abaixo](#uso) #### Parâmetros {/*parameters*/} -* `scope`: Uma função que atualiza algum estado chamando uma ou mais funções [`set`](/reference/react/useState#setstate) O React imediatamente chama `scope` sem parâmetros e marca todas as atualizações de state agendadas sincronizadamente durante a chamada da função `scope` como transições. Elas serão [sem bloqueio](/reference/react/useTransition#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) +* `scope`: É uma função que atualiza algum estado chamando uma ou mais [`set` functions.](/reference/react/useState#setstate) O React imediatamente chama `scope` sem parâmetros e marca todas as atualizações de state agendadas sincronizadamente durante a chamada da função `scope` como transições. Elas serão [sem bloqueio](/reference/react/useTransition#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) + #### Retornos {/*returns*/} `startTransition` não retorna nada. #### Ressalvas {/*caveats*/} -* O `startTransition` não fornece uma forma de verificar se uma transição está pendente. Para mostrar um indicador pendente enquanto a transição está em curso, é necessário [`useTransition`](/reference/react/useTransition) instead. +* O `startTransition` não fornece uma forma de verificar se uma transição está pendente. Para mostrar um indicador pendente enquanto a transição está em curso, é necessário usar [`useTransition`](/reference/react/useTransition). -Você só pode envolver uma atualização em uma transição se tiver acesso à função `set` desse estado. Se desejar iniciar uma transição em resposta a alguma propriedade ou a um valor de retorno personalizado do Hook, tente [`useDeferredValue`](/reference/react/useDeferredValue) . +Só é possivel envolver uma atualização em uma transição se você tiver acesso à função `set` desse state. Se desejar iniciar uma transição em resposta a alguma prop ou a um valor de retorno de Hook personalizado, tente [`useDeferredValue`](/reference/react/useDeferredValue) . * A função que você passa para `startTransition` deve ser síncrona. O React executa imediatamente essa função, marcando todas as atualizações de state que acontecem enquanto ela é executada como transições. Se você tentar executar mais atualizações de state depois (por exemplo, em um timeout), elas não serão marcadas como transições. -* Uma atualização de estado marcada como uma transição será interrompida por outras atualizações de estado. Por exemplo, se você atualizar um componente de gráfico dentro de uma transição, mas depois começar a digitar em uma entrada enquanto o gráfico estiver no meio de uma nova renderização, o React reiniciará o trabalho de renderização no componente de gráfico depois de lidar com a atualização do estado da entrada. +* Uma atualização de state marcada como uma transição será interrompida por outras atualizações de state. Por exemplo, se você atualizar um componente de gráfico dentro de uma transição, mas depois começar a digitar em uma entrada enquanto o gráfico estiver no meio de uma nova renderização, o React reiniciará o trabalho de renderização no componente de gráfico depois de lidar com a atualização de state da entrada. -* Transition updates can't be used to control text inputs. +* As atualizações de transição não podem ser utilizadas para controlar entradas de texto. -* If there are multiple ongoing transitions, React currently batches them together. This is a limitation that will likely be removed in a future release. +* Se houver várias transições em andamento, o React atualmente as agrupa em lotes. Essa limitação provavelmente será removida em uma versão futura. --- @@ -83,13 +84,13 @@ function TabContainer() { } ``` -As transições permitem manter a responsividade das atualizações da interface do usuário, mesmo em dispositivos lentos. +As transições ajudam a manter a interface do usuário responsiva, mesmo em dispositivos mais lentos. -Com uma transição, a sua IU permanece responsiva durante uma nova apresentação. Por exemplo, se o usuário clicar em uma aba e depois mudar de ideia e clicar em outra, ele pode fazer isso sem esperar que a primeira nova apresentação termine. +Com uma transição, a sua UI permanece responsiva durante uma nova renderização. Por exemplo, se o usuário clicar em uma guia e depois mudar de ideia e clicar em outra, ele poderá fazê-lo sem precisar esperar que a primeira nova renderização termine. -`startTransition` é muito semelhante à [`useTransition`](/reference/react/useTransition), exceto que não fornece a flag `isPending` para rastrear se uma transição está em andamento. Você pode chamar `startTransition` quando `useTransition` não está disponível. Por exemplo, `startTransition` funciona com componentes externos, por exemplo, a partir de uma biblioteca de dados. +`startTransition` é muito semelhante à [`useTransition`](/reference/react/useTransition), exceto que não fornece a flag `isPending` para monitorar se uma transição está em andamento. Você pode chamar `startTransition` quando `useTransition` não está disponível. Por exemplo, `startTransition` funciona com componentes externos, como por exemplo, a partir de uma biblioteca de dados. [Saiba mais sobre as transições e veja exemplos na `useTransition` page.](/reference/react/useTransition) From f0fc084609585cf008a29c518108fe16ee032f0f Mon Sep 17 00:00:00 2001 From: David Simoes <109705197+DaveSimoes@users.noreply.github.com> Date: Wed, 24 Apr 2024 20:56:33 -0300 Subject: [PATCH 4/8] Update src/content/reference/react/startTransition.md Co-authored-by: Jhon Mike --- src/content/reference/react/startTransition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/startTransition.md b/src/content/reference/react/startTransition.md index a6d631bac..7dffe3b53 100644 --- a/src/content/reference/react/startTransition.md +++ b/src/content/reference/react/startTransition.md @@ -37,7 +37,7 @@ function TabContainer() { } ``` -[Veja mais exemplos abaixo](#uso) +[Veja mais exemplos abaixo](#usage) #### Parâmetros {/*parameters*/} From fd91fb41b55df8c30452df4625f906ede2820bdb Mon Sep 17 00:00:00 2001 From: David Simoes <109705197+DaveSimoes@users.noreply.github.com> Date: Thu, 25 Apr 2024 20:30:38 -0300 Subject: [PATCH 5/8] Initial space removed Initial space removed as suggested --- src/content/reference/react/startTransition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/startTransition.md b/src/content/reference/react/startTransition.md index 7dffe3b53..4bba069d6 100644 --- a/src/content/reference/react/startTransition.md +++ b/src/content/reference/react/startTransition.md @@ -4,7 +4,7 @@ título: startTransition - `startTransition` permite que você atualize o state sem bloquear a UI +`startTransition` permite que você atualize o state sem bloquear a UI ```js startTransition(scope) From 33f2b5e7233f57a4f68b4d161bc20b828a828d6d Mon Sep 17 00:00:00 2001 From: David Simoes <109705197+DaveSimoes@users.noreply.github.com> Date: Thu, 25 Apr 2024 20:37:13 -0300 Subject: [PATCH 6/8] Initial space removed as suggested Initial space removed as suggested in line 46 Co-authored-by: Jhon Mike --- src/content/reference/react/startTransition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/startTransition.md b/src/content/reference/react/startTransition.md index 4bba069d6..feb8efcd8 100644 --- a/src/content/reference/react/startTransition.md +++ b/src/content/reference/react/startTransition.md @@ -43,7 +43,7 @@ function TabContainer() { * `scope`: É uma função que atualiza algum estado chamando uma ou mais [`set` functions.](/reference/react/useState#setstate) O React imediatamente chama `scope` sem parâmetros e marca todas as atualizações de state agendadas sincronizadamente durante a chamada da função `scope` como transições. Elas serão [sem bloqueio](/reference/react/useTransition#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) - #### Retornos {/*returns*/} +#### Retornos {/*returns*/} `startTransition` não retorna nada. From c611e289b3dd547d064e456621e87b30ca8a4ced Mon Sep 17 00:00:00 2001 From: David Simoes <109705197+DaveSimoes@users.noreply.github.com> Date: Thu, 25 Apr 2024 20:40:53 -0300 Subject: [PATCH 7/8] Initial space removed as suggested in line 40 From 797ca7e544056f3be604b0aed575d155184680d7 Mon Sep 17 00:00:00 2001 From: David Simoes <109705197+DaveSimoes@users.noreply.github.com> Date: Thu, 25 Apr 2024 20:43:13 -0300 Subject: [PATCH 8/8] Initial space removed as suggested Initial space removed as suggested in line 7