traduzido de useUnmount até Hidratando HTML renderizado pelo servidor

Author: rick-ssa

src/content/reference/react-dom/client/hydrateRoot.md

@@ -62,7 +62,7 @@ React irá anexar o HTML existente dentro do `domNode`, e assumir a gestão do D
 
 ### `root.render(reactNode)` {/*root-render*/}
 
-Chamar `root.render` para atualizar um compoente React dentro de uma raiz hidratada do React em um elemento do DOM do navegador.
+Chame `root.render` para atualizar um compoente React dentro de uma raiz hidratada do React em um elemento do DOM do navegador.
 
 ```js
 root.render(<App />);
@@ -83,57 +83,57 @@ React atualizará `<App />` no `root` hidratado.
 
 #### Ressalvas {/*root-render-caveats*/}
 
-* Se você chamar `root.render` antes da raiz terminar de hidratar, React irá limpar todo o conteúdo HTML existente renderizado no servidor e substituirá por todo conteúdo da raiz renderizada no cliente.
+* Se você chamar `root.render` antes do final da hidratação da raiz, React irá limpar todo o conteúdo HTML existente renderizado no servidor e substituirá por todo conteúdo da raiz renderizada no cliente.
 
 ---
 
 ### `root.unmount()` {/*root-unmount*/}
 
-Call `root.unmount` to destroy a rendered tree inside a React root.
+Chame `root.unmount` para desmontar uma árvore renderizada dentro da raiz do React.
 
 ```js
 root.unmount();
 ```
 
-An app fully built with React will usually not have any calls to `root.unmount`.
+Um aplicativo completamente construído com React usualmente não precisará de nenhuma chamada para `root.unmount`.
 
-This is mostly useful if your React root's DOM node (or any of its ancestors) may get removed from the DOM by some other code. For example, imagine a jQuery tab panel that removes inactive tabs from the DOM. If a tab gets removed, everything inside it (including the React roots inside) would get removed from the DOM as well. You need to tell React to "stop" managing the removed root's content by calling `root.unmount`. Otherwise, the components inside the removed root won't clean up and free up resources like subscriptions.
+Isso é mais útil se o nó DOM da raiz do React (ou qualquer dos seus antecessores) poder ser removido do DOM por outro código. Por examplo, imagine um painel de abas do jQuery que remove abas inativas do DOM. Se a aba for removida, tudo dentro dele (incluindo raízes React internas) seria removido do DOM também. Você precisa dizer para o React "parar" de gerenciar os conteúdos das raízes removidas chamando `root.unmount`. Senão, os components dentro da raiz removida não limpará e liberará os recursos como assinaturas.
 
-Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree. 
+Chamar `root.unmount` desmontará todos os componente da raiz e "desconectaráS" o React do nó raiz do DOM, incluindo quaisquer manipuladores de evento ou state na árvore. 
 
 
-#### Parameters {/*root-unmount-parameters*/}
+#### Parâmetros {/*root-unmount-parameters*/}
 
-`root.unmount` does not accept any parameters.
+`root.unmount` não aceita nenhum parâmetro.
 
 
-#### Returns {/*root-unmount-returns*/}
+#### Retornos {/*root-unmount-returns*/}
 
-`root.unmount` returns `undefined`.
+`root.unmount` retorna `undefined`.
 
-#### Caveats {/*root-unmount-caveats*/}
+#### Ressalvas {/*root-unmount-caveats*/}
 
-* Calling `root.unmount` will unmount all the components in the tree and "detach" React from the root DOM node.
+* Chamar `root.unmount` desmontará todos os componentes na árvore e "desconectará" o React do nó raiz do DOM.
 
-* Once you call `root.unmount` you cannot call `root.render` again on the root. Attempting to call `root.render` on an unmounted root will throw a "Cannot update an unmounted root" error.
+* Depois de chamar `root.unmount` você não pode chamar `root.render` novamente com a raiz. Tentativas de chamar `root.render` com uma raiz desmontada lançará um "Cannot update an unmounted root" erro.
 
 ---
 
-## Usage {/*usage*/}
+## Usos {/*usage*/}
 
-### Hydrating server-rendered HTML {/*hydrating-server-rendered-html*/}
+### Hidratando HTML renderizado pelo servidor {/*hydrating-server-rendered-html*/}
 
-If your app's HTML was generated by [`react-dom/server`](/reference/react-dom/client/createRoot), you need to *hydrate* it on the client.
+Se a sua aplicação HTML foi renderizada por [`react-dom/server`](/reference/react-dom/client/createRoot), você precisa *hidratar* ela no cliente.
 
 ```js [[1, 3, "document.getElementById('root')"], [2, 3, "<App />"]]
 import { hydrateRoot } from 'react-dom/client';
 
 hydrateRoot(document.getElementById('root'), <App />);
 ```
 
-This will hydrate the server HTML inside the <CodeStep step={1}>browser DOM node</CodeStep> with the <CodeStep step={2}>React component</CodeStep> for your app. Usually, you will do it once at startup. If you use a framework, it might do this behind the scenes for you.
+Isso hidratará o HTML do servidor dentro do <CodeStep step={1}>nó DOM do navegador</CodeStep> com o <CodeStep step={2}>componente React</CodeStep> para a sua aplicação. Usualmente, você fará isso uma vez ao iniciar. Se você usa um framework, ele poderá fazer isso para você por trás das cenas.
 
-To hydrate your app, React will "attach" your components' logic to the initial generated HTML from the server. Hydration turns the initial HTML snapshot from the server into a fully interactive app that runs in the browser.
+Para hidratar sua aplicação, React "conectará" a lógica dos seus componentes ao HTML gerado no início pelo servidor. Hidratação transforma o snapshot inicial do HTML do servidor em uma aplicação completa e interativa rodando no navegador.
 
 <Sandpack>
 
@@ -180,22 +180,22 @@ function Counter() {
 
 </Sandpack>
 
-You shouldn't need to call `hydrateRoot` again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will [use state](/reference/react/useState) instead.
+Você não precisará chamar `hydrateRoot` novamente ou chamar em mais lugares. Desse ponto em diante, React gerenciará o DOM de sua aplicação. Para atualizar a UI, seu componente irá [usar state](/reference/react/useState) agora.
 
 <Pitfall>
 
-The React tree you pass to `hydrateRoot` needs to produce **the same output** as it did on the server.
+A árvore react que você passou para `hydrateRoot` precisa produzir **a mesma saída** que produziu no servidor.
 
-This is important for the user experience. The user will spend some time looking at the server-generated HTML before your JavaScript code loads. Server rendering creates an illusion that the app loads faster by showing the HTML snapshot of its output. Suddenly showing different content breaks that illusion. This is why the server render output must match the initial render output on the client.
+Isso é importante para experiência do usuário. O usuário passará algum tempo procurando no HTML gerado pelo servidor antes do seu código JavaScript carregar. A renderização do servidor cria uma ilusão que o aplicativo carregou rápido, mostrando o snapshot HTML da sua saída. Mostrar o conteúdo diferente de repente quebra essa ilusão. Por isso a saída renderizada do servidor precisa ser compatível com a saída inicial renderizada do cliente.
 
-The most common causes leading to hydration errors include:
+As causas mais comuns que levam a erros de hidratação incluem:
 
-* Extra whitespace (like newlines) around the React-generated HTML inside the root node.
-* Using checks like `typeof window !== 'undefined'` in your rendering logic.
-* Using browser-only APIs like [`window.matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) in your rendering logic.
-* Rendering different data on the server and the client.
+* Espaços extras (como caractere de nova linha) ao redor do HTML gerado pelo React na raiz do nó.
+* Usar comparações como `typeof window !== 'undefined'` na sua lógica de renderização.
+* Usar API's específicas do navegador como [`window.matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) na sua lógica de renderização.
+* Renderizar diferentes dados no servidor e no cliente.
 
-React recovers from some hydration errors, but **you must fix them like other bugs.** In the best case, they'll lead to a slowdown; in the worst case, event handlers can get attached to the wrong elements.
+O React se recupera de alguns erros de hidratação, mas **você precisa corrigí-los como os outros erros.** No melhor caso, ele ficará lento; no pior caso, manipuladores de eventos podem ser conectados a elementos errados.
 
 </Pitfall>