traduzido a seção referencias até root.render

Author: rick-ssa

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

@@ -4,7 +4,7 @@ title: hydrateRoot
 
 <Intro>
 
-`hydrateRoot` lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`.](/reference/react-dom/server)
+`hydrateRoot` permite que você integre componentes React em um nó no DOM do navegador, cujo conteúdo HTML foi previamente gerado por [`react-dom/server`.](/reference/react-dom/server)
 
 ```js
 const root = hydrateRoot(domNode, reactNode, options?)
@@ -16,11 +16,11 @@ const root = hydrateRoot(domNode, reactNode, options?)
 
 ---
 
-## Reference {/*reference*/}
+## Referências {/*reference*/}
 
 ### `hydrateRoot(domNode, reactNode, options?)` {/*hydrateroot*/}
 
-Call `hydrateRoot` to “attach” React to existing HTML that was already rendered by React in a server environment.
+Use `hydrateRoot` para “anexar” React a HTML existente que já foi renderizado pelo React no lado do servidor.
 
 ```js
 import { hydrateRoot } from 'react-dom/client';
@@ -29,61 +29,61 @@ const domNode = document.getElementById('root');
 const root = hydrateRoot(domNode, reactNode);
 ```
 
-React will attach to the HTML that exists inside the `domNode`, and take over managing the DOM inside it. An app fully built with React will usually only have one `hydrateRoot` call with its root component.
+React irá anexar o HTML existente dentro do `domNode`, e assumir a gestão do DOM dentro dele. Um aplicativo completamente construído com React comumente só terá uma única chamada do `hydrateRoot` no seu componente raiz.
 
-[See more examples below.](#usage)
+[Veja mais exemplos abaixo.](#usage)
 
-#### Parameters {/*parameters*/}
+#### Parâmetros {/*parameters*/}
 
-* `domNode`: A [DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that was rendered as the root element on the server.
+* `domNode`: Um [elemento DOM](https://developer.mozilla.org/en-US/docs/Web/API/Element) que foi renderizado como elemento raiz no servidor.
 
-* `reactNode`: The "React node" used to render the existing HTML. This will usually be a piece of JSX like `<App />` which was rendered with a `ReactDOM Server` method such as `renderToPipeableStream(<App />)`.
+* `reactNode`: O "nó do React" usado para renderizar o HTML existente. Frequentemente será uma parte do JSX como `<App />` que foi renderizado com um método `ReactDOM Server` como `renderToPipeableStream(<App />)`.
 
-* **optional** `options`: An object with options for this React root.
+* **opcional** `options`: Um objeto com opções para a raiz do React.
 
-  * <CanaryBadge title="This feature is only available in the Canary channel" /> **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
-  * <CanaryBadge title="This feature is only available in the Canary channel" /> **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown and an `errorInfo` object containing the `componentStack`.
-  * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with the `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
-  * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as used on the server.
+  * <CanaryBadge title="Essa funcionalidade está apenas disponível no canal do Canary" /> **opcional** `onCaughtError`: Callback disparado quando o React intercepta um ero no Error Boundary. Vem com o `error` interceptado pelo Error Boundary, e um objeto `errorInfo` contendo o `componentStack`.
+  * <CanaryBadge title="Essa funcionalidade está apenas disponível no canal do Canary" /> **opcional** `onUncaughtError`: Callback disparado quando um erro é lançado e não interceptado por um Error Boundary. Vem com o `error` que foi lançado e um objeto `errorInfo` contendo o `componentStack`.
+  * **opcional** `onRecoverableError`: Callback disparado quando o React se recupera automaticamente de erros. Vem com o `error` que o React lançou, e um objeto `errorInfo` contendo o `componentStack`. Alguns erros recuperáveis podem incluir a causa original do erro como `error.cause`.
+  * **opcional** `identifierPrefix`: um prefixo de texto que o React usa para IDs gerados por [`useId`.](/reference/react/useId) Útil para evitar conflitos quando múltiplas raizes são usadas na mesma página. Precisa ser o mesmo prefixo usado no servidor.
 
 
-#### Returns {/*returns*/}
+#### Retornos {/*returns*/}
 
-`hydrateRoot` returns an object with two methods: [`render`](#root-render) and [`unmount`.](#root-unmount)
+`hydrateRoot` retorna um objeto com dois métodos: [`render`](#root-render) and [`unmount`.](#root-unmount)
 
-#### Caveats {/*caveats*/}
+#### Ressalvas {/*caveats*/}
 
-* `hydrateRoot()` expects the rendered content to be identical with the server-rendered content. You should treat mismatches as bugs and fix them.
-* In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
-* You'll likely have only one `hydrateRoot` call in your app. If you use a framework, it might do this call for you.
-* If your app is client-rendered with no HTML rendered already, using `hydrateRoot()` is not supported. Use [`createRoot()`](/reference/react-dom/client/createRoot) instead.
+* `hydrateRoot()` espera que o conteúdo renderizado seja idêntico ao conteúdo renderizado pelo servidor. Você deve tratar diferenças como erros e corrigí-las.
+* No modo desenvolvedor, o React avisa sobre as diferenças na hidratação. Não há garantias de que as diferenças de atributos serão corrigidas em caso de incompatibilidades. Isso é importante por questões de performance porque na maioria dos apps, diferenças são raras, e, portanto, validar todas as marcações seria proibitivamente caro.
+* Você provavelmente terá apenas uma chamada `hydrateRoot` no seu aplicativo. Se você tiver um framework, ele pode fazer essa chamada para você.
+* Se a sua aplicação é redenrizada pelo cliente sem ter HTML renderizado ainda, usar `hydrateRoot()` não é suportado. Use [`createRoot()`](/reference/react-dom/client/createRoot) alternativamente.
 
 ---
 
 ### `root.render(reactNode)` {/*root-render*/}
 
-Call `root.render` to update a React component inside a hydrated React root for a browser DOM element.
+Chamar `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 />);
 ```
 
-React will update `<App />` in the hydrated `root`.
+React atualizará `<App />` no `root` hidratado.
 
-[See more examples below.](#usage)
+[Veja mais exemplos abaixo.](#usage)
 
-#### Parameters {/*root-render-parameters*/}
+#### Parâmetros {/*root-render-parameters*/}
 
-* `reactNode`: A "React node" that you want to update. This will usually be a piece of JSX like `<App />`, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`.
+* `reactNode`: Um "nó React" que você quer atualizar. Será frequentemente uma parte de JSX como `<App />`, mas vocẽ pode passar também um elemento React construído com [`createElement()`](/reference/react/createElement), uma string, um número, `null`, or `undefined`.
 
 
-#### Returns {/*root-render-returns*/}
+#### Retornos {/*root-render-returns*/}
 
-`root.render` returns `undefined`.
+`root.render` retorna `undefined`.
 
-#### Caveats {/*root-render-caveats*/}
+#### Ressalvas {/*root-render-caveats*/}
 
-* If you call `root.render` before the root has finished hydrating, React will clear the existing server-rendered HTML content and switch the entire root to client rendering.
+* 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.
 
 ---