Skip to content

Translate flushSync.md to pt-br #876

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
NivaldoFarias wants to merge 1 commit into from
Closed

Translate flushSync.md to pt-br #876

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 29 additions & 30 deletions src/content/reference/react-dom/flushSync.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ title: flushSync

<Pitfall>

Using `flushSync` is uncommon and can hurt the performance of your app.
Usar `flushSync` é incomum e pode prejudicar o desempenho do seu aplicativo.

</Pitfall>

<Intro>

`flushSync` lets you force React to flush any updates inside the provided callback synchronously. This ensures that the DOM is updated immediately.
`flushSync` permite que você force o React a processar qualquer atualização dentro do callback fornecido de forma síncrona. Isso garante que o DOM seja atualizado imediatamente.

```js
flushSync(callback)
Expand All @@ -22,11 +22,11 @@ flushSync(callback)

---

## Reference {/*reference*/}
## Referência {/*reference*/}

### `flushSync(callback)` {/*flushsync*/}

Call `flushSync` to force React to flush any pending work and update the DOM synchronously.
Chame `flushSync` para forçar o React a processar qualquer trabalho pendente e atualizar o DOM de forma síncrona.

```js
import { flushSync } from 'react-dom';
Expand All @@ -36,50 +36,49 @@ flushSync(() => {
});
```

Most of the time, `flushSync` can be avoided. Use `flushSync` as last resort.
Na maioria das vezes, `flushSync` pode ser evitado. Use `flushSync` como última alternativa.

[See more examples below.](#usage)
[Veja mais exemplos abaixo.](#usage)

#### Parameters {/*parameters*/}
#### Parâmetros {/*parameters*/}

* `callback`: Uma função. O React chamará imediatamente esse callback e processará qualquer atualização que ele contenha de forma síncrona. Ele também pode processar quaisquer atualizações pendentes, ou Efeitos, ou atualizações dentro dos Efeitos. Se uma atualização suspender como resultado dessa chamada de `flushSync`, os fallbacks podem ser reexibidos.

* `callback`: A function. React will immediately call this callback and flush any updates it contains synchronously. It may also flush any pending updates, or Effects, or updates inside of Effects. If an update suspends as a result of this `flushSync` call, the fallbacks may be re-shown.
#### Retorna {/*returns*/}

#### Returns {/*returns*/}
`flushSync` retorna `undefined`.

`flushSync` returns `undefined`.
#### Ressalvas {/*caveats*/}

#### Caveats {/*caveats*/}

* `flushSync` can significantly hurt performance. Use sparingly.
* `flushSync` may force pending Suspense boundaries to show their `fallback` state.
* `flushSync` may run pending Effects and synchronously apply any updates they contain before returning.
* `flushSync` may flush updates outside the callback when necessary to flush the updates inside the callback. For example, if there are pending updates from a click, React may flush those before flushing the updates inside the callback.
* `flushSync` pode prejudicar significativamente o desempenho. Use com moderação.
* `flushSync` pode forçar limites de Suspense pendentes a mostrar seu estado de `fallback`.
* `flushSync` pode executar Efeitos pendentes e aplicar de forma síncrona quaisquer atualizações que eles contenham antes de retornar.
* `flushSync` pode processar atualizações fora do callback, quando necessário, para processar as atualizações dentro do callback. Por exemplo, se houver atualizações pendentes de um clique, o React pode processá-las antes de processar as atualizações dentro do callback.

---

## Usage {/*usage*/}
## Uso {/*usage*/}

### Flushing updates for third-party integrations {/*flushing-updates-for-third-party-integrations*/}
### Processando atualizações para integrações de terceiros {/*flushing-updates-for-third-party-integrations*/}

When integrating with third-party code such as browser APIs or UI libraries, it may be necessary to force React to flush updates. Use `flushSync` to force React to flush any <CodeStep step={1}>state updates</CodeStep> inside the callback synchronously:
Ao integrar com código de terceiros, como APIs de navegador ou bibliotecas de interface do usuário, pode ser necessário forçar o React a processar atualizações. Use `flushSync` para forçar o React a processar quaisquer <CodeStep step={1}>atualizações de estado</CodeStep> dentro do callback de forma síncrona:

```js [[1, 2, "setSomething(123)"]]
flushSync(() => {
setSomething(123);
});
// By this line, the DOM is updated.
// Até esta linha, o DOM é atualizado.
```

This ensures that, by the time the next line of code runs, React has already updated the DOM.
Isso garante que, quando a próxima linha de código for executada, o React já tenha atualizado o DOM.

**Using `flushSync` is uncommon, and using it often can significantly hurt the performance of your app.** If your app only uses React APIs, and does not integrate with third-party libraries, `flushSync` should be unnecessary.
**Usar `flushSync` é incomum, e usá-lo com frequência pode prejudicar significativamente o desempenho do seu aplicativo.** Se seu aplicativo usa apenas APIs do React e não integra com bibliotecas de terceiros, `flushSync` deve ser desnecessário.

However, it can be helpful for integrating with third-party code like browser APIs.
No entanto, pode ser útil para integrar com código de terceiros, como APIs de navegador.

Some browser APIs expect results inside of callbacks to be written to the DOM synchronously, by the end of the callback, so the browser can do something with the rendered DOM. In most cases, React handles this for you automatically. But in some cases it may be necessary to force a synchronous update.
Algumas APIs de navegador esperam que os resultados dentro dos callbacks sejam escritos no DOM de forma síncrona, até o final do callback, para que o navegador possa fazer algo com o DOM renderizado. Na maioria dos casos, o React cuida disso para você automaticamente. Mas em alguns casos pode ser necessário forçar uma atualização síncrona.

For example, the browser `onbeforeprint` API allows you to change the page immediately before the print dialog opens. This is useful for applying custom print styles that allow the document to display better for printing. In the example below, you use `flushSync` inside of the `onbeforeprint` callback to immediately "flush" the React state to the DOM. Then, by the time the print dialog opens, `isPrinting` displays "yes":
Por exemplo, a API `onbeforeprint` do navegador permite que você mude a página imediatamente antes que o diálogo de impressão seja aberto. Isso é útil para aplicar estilos de impressão personalizados que permitem que o documento seja exibido melhor para impressão. No exemplo abaixo, você usa `flushSync` dentro do callback `onbeforeprint` para imediatamente "processar" o estado do React no DOM. Então, quando o diálogo de impressão abre, `isPrinting` exibe "yes":

<Sandpack>

Expand Down Expand Up @@ -113,7 +112,7 @@ export default function PrintApp() {
<>
<h1>isPrinting: {isPrinting ? 'yes' : 'no'}</h1>
<button onClick={() => window.print()}>
Print
Imprimir
</button>
</>
);
Expand All @@ -122,12 +121,12 @@ export default function PrintApp() {

</Sandpack>

Without `flushSync`, the print dialog will display `isPrinting` as "no". This is because React batches the updates asynchronously and the print dialog is displayed before the state is updated.
Sem `flushSync`, o diálogo de impressão exibirá `isPrinting` como "no". Isso acontece porque o React agrupa as atualizações de forma assíncrona e o diálogo de impressão é exibido antes que o estado seja atualizado.

<Pitfall>

`flushSync` can significantly hurt performance, and may unexpectedly force pending Suspense boundaries to show their fallback state.
`flushSync` pode prejudicar significativamente o desempenho e pode forçar inesperadamente limites de Suspense pendentes a mostrar seu estado de fallback.

Most of the time, `flushSync` can be avoided, so use `flushSync` as a last resort.
Na maioria das vezes, `flushSync` pode ser evitado, portanto, use `flushSync` como última alternativa.

</Pitfall>
</Pitfall>
Loading