diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index cc30ce22c..b6ce279ce 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -4,7 +4,7 @@ title: hydrateRoot -`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 “conectar” o React ao HTML existente que já foi renderizado pelo React do lado do servidor. ```js import { hydrateRoot } from 'react-dom/client'; @@ -29,101 +29,101 @@ 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` para 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/pt-BR/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 `` which was rendered with a `ReactDOM Server` method such as `renderToPipeableStream()`. +* `reactNode`: O "nó do React" usado para renderizar o HTML existente. Frequentemente será uma parte do JSX como `` que foi renderizado com um método `ReactDOM Server` como `renderToPipeableStream()`. -* **optional** `options`: An object with options for this React root. +* **opcional** `options`: Um objeto com opções para a raiz do React. - * **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`. - * **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. + * **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`. + * **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 aplicativos, 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. +Chame `root.render` para atualizar um componente React dentro de uma raiz hidratada do React em um elemento do DOM do navegador. ```js root.render(); ``` -React will update `` in the hydrated `root`. +React atualizará `` 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 ``, 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 do JSX como ``, 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 do final da hidratação da raiz, o 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 ascendentes) pode 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 dela (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 componentes dentro da raiz removida não limpará nem 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á" 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 para a raiz. Tentativas de chamar `root.render` com uma raiz desmontada lançará um "Cannot update an unmounted root" erro. --- -## Usage {/*usage*/} +## Utilização {/*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, ""]] import { hydrateRoot } from 'react-dom/client'; @@ -131,9 +131,9 @@ import { hydrateRoot } from 'react-dom/client'; hydrateRoot(document.getElementById('root'), ); ``` -This will hydrate the server HTML inside the browser DOM node with the React component 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 nó DOM do navegador com o componente React 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. A hidratação transforma o snapshot inicial do HTML do servidor em uma aplicação completa e interativa rodando no navegador. @@ -180,30 +180,30 @@ function Counter() { -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, o React gerenciará o DOM de sua aplicação. Para atualizar a UI, seu componente irá [usar state](/reference/react/useState) agora. -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 de repente um conteúdo diferente 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/pt-BR/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. --- -### Hydrating an entire document {/*hydrating-an-entire-document*/} +### Hidratando um documento inteiro {/*hydrating-an-entire-document*/} -Apps fully built with React can render the entire document as JSX, including the [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) tag: +Aplicações totalmente construídas com React podem renderizar o documento inteiro como JSX, incluindo o [``](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/html) tag: ```js {3,13} function App() { @@ -223,7 +223,7 @@ function App() { } ``` -To hydrate the entire document, pass the [`document`](https://developer.mozilla.org/en-US/docs/Web/API/Window/document) global as the first argument to `hydrateRoot`: +Para hidratar o documento inteiro, passe o [`document`](https://developer.mozilla.org/pt-BR/docs/Web/API/Window/document) global como primeiro argumento para `hydrateRoot`: ```js {4} import { hydrateRoot } from 'react-dom/client'; @@ -234,11 +234,11 @@ hydrateRoot(document, ); --- -### Suppressing unavoidable hydration mismatch errors {/*suppressing-unavoidable-hydration-mismatch-errors*/} +### Suprimindo erros inevitáveis ​​de incompatibilidade de hidratação {/*suppressing-unavoidable-hydration-mismatch-errors*/} -If a single element’s attribute or text content is unavoidably different between the server and the client (for example, a timestamp), you may silence the hydration mismatch warning. +Se um simples atributo do elemento ou conteúdo de texto inevitavelmente conter diferenças entre o servidor e o cliente (por examplo, um timestamp), você poderá silenciar o aviso de diferença de hidratação. -To silence hydration warnings on an element, add `suppressHydrationWarning={true}`: +Para silenciar avisos de hidratação em um elemento, adicione `suppressHydrationWarning={true}`: @@ -270,13 +270,13 @@ export default function App() { -This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. Unless it’s text content, React still won’t attempt to patch it up, so it may remain inconsistent until future updates. +Somente funciona em um nível de profundidade, e é para ser usado como uma saída de emergência. Não abuse desse recurso. A menos que seja conteúdo de texto, o React ainda não tentará corrigi-lo, portanto pode permanecer inconsistente até atualizações futuras. --- -### Handling different client and server content {/*handling-different-client-and-server-content*/} +### Tratando diferenças de conteúdo entre cliente e servidor {/*handling-different-client-and-server-content*/} -If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a [state variable](/reference/react/useState) like `isClient`, which you can set to `true` in an [Effect](/reference/react/useEffect): +Se você intecionalmente precisa renderizar algo diferente no servidor e no cliente, você pode fazer uma renderização de dois passos. Componentes que renderizam algo diferente no cliente pode ler um [state variable](/reference/react/useState) como `isClient`, o qual você pode definir como `true` em um [Effect](/reference/react/useEffect): @@ -316,21 +316,21 @@ export default function App() { -This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration. +Dessa forma a renderização inicial passará a renderizar o mesmo conteúdo do servidor, evitando diferenças, mas um passo adicional acontecerá de forma síncrona logo após a hidratação. -This approach makes hydration slower because your components have to render twice. Be mindful of the user experience on slow connections. The JavaScript code may load significantly later than the initial HTML render, so rendering a different UI immediately after hydration may also feel jarring to the user. +Essa abordagem deixa a hidratação mais vagarosa porque seus componentes terão que renderizar duas vezes. Fique atento a experiência do usuário com conexões lentas. O código JavaScript pode atrasar significantemente seu carregamento comparado com a renderização inicial do HTML, então renderizar uma UI diferente imediatamente após hidratação pode também ser prejudicial para o usuário. --- -### Updating a hydrated root component {/*updating-a-hydrated-root-component*/} +### Atualizando um componente raiz hidratado {/*updating-a-hydrated-root-component*/} -After the root has finished hydrating, you can call [`root.render`](#root-render) to update the root React component. **Unlike with [`createRoot`](/reference/react-dom/client/createRoot), you don't usually need to do this because the initial content was already rendered as HTML.** +Após a finalização da hidratação da raiz, você pode chamar [`root.render`](#root-render) para atualizar o componente raiz do React. **Diferente de [`createRoot`](/reference/react-dom/client/createRoot), você não precisa frequentemente fazer isso porque o conteúdo inicial já renderizou como HTML.** -If you call `root.render` at some point after hydration, and the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second in this example are not destructive: +Se você chamar `root.render` em algum ponto após a hidratação, e a estrutura do componente árvore coincidir com o que foi previamente renderizado, o React [preservará o state.](/learn/preserving-and-resetting-state) Note como você pode escrever no campo de texto, o que significa que a atualização de repetidos `render` chamados cada segundo nesse exemplo não são destrutivos: @@ -372,17 +372,17 @@ export default function App({counter}) { -It is uncommon to call [`root.render`](#root-render) on a hydrated root. Usually, you'll [update state](/reference/react/useState) inside one of the components instead. +É incomum chamar [`root.render`](#root-render) para uma raiz hidratada. Ao invés disso, usualmente, você [atualizará o state](/reference/react/useState) dentro de um dos componentes. -### Show a dialog for uncaught errors {/*show-a-dialog-for-uncaught-errors*/} +### Mostrando diálogo para erros não interceptados {/*show-a-dialog-for-uncaught-errors*/} -`onUncaughtError` is only available in the latest React Canary release. +`onUncaughtError` só está disponível para o último release do React Canary. -By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option: +Por padrão, o React imprimirá no console todos os log's de erros não interceptados. Para implementar seu prórpio relatório de erros, você pode definir o método opcional `onUncaughtError` da raiz: ```js [[1, 7, "onUncaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]] import { hydrateRoot } from 'react-dom/client'; @@ -403,12 +403,12 @@ const root = hydrateRoot( root.render(); ``` -The onUncaughtError option is a function called with two arguments: +O método onUncaughtError é uma função que é chamada com dois argumentos: -1. The error that was thrown. -2. An errorInfo object that contains the componentStack of the error. +1. O error que é lançado. +2. Um objeto errorInfo que contém o componentStack do erro. -You can use the `onUncaughtError` root option to display error dialogs: +Você pode usar o método `onUncaughtError` da raiz para exibir diálogos de erros: @@ -626,15 +626,15 @@ export default function App() { -### Displaying Error Boundary errors {/*displaying-error-boundary-errors*/} +### Mostrando erros de Error Boundary {/*displaying-error-boundary-errors*/} -`onCaughtError` is only available in the latest React Canary release. +`onCaughtError` só está disponível para o último release do React Canary. -By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option for errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary): +Por padrão, React impriirá todos os log's de erros interceptados por um Error Boundary no `console.error`. Para mudar esse comportmento, você pode definir o método opcional `onCaughtError` da raiz para erros interceptados por [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary): ```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]] import { hydrateRoot } from 'react-dom/client'; @@ -655,12 +655,12 @@ const root = hydrateRoot( root.render(); ``` -The onCaughtError option is a function called with two arguments: +O método onCaughtError é uma função que possui dois argumentos: -1. The error that was caught by the boundary. -2. An errorInfo object that contains the componentStack of the error. +1. O error que foi interceptado pelo boundary. +2. Um objeto errorInfo que contém o componentStack do erro. -You can use the `onCaughtError` root option to display error dialogs or filter known errors from logging: +Você pode usar o método `onCaughtError` da raiz para mostrar diálogos de erro ou filtrar erros conhecidos do log: @@ -913,9 +913,9 @@ function Throw({error}) { -### Show a dialog for recoverable hydration mismatch errors {/*show-a-dialog-for-recoverable-hydration-mismatch-errors*/} +### Mostrando um diálogo para erros recuperáveis de diferença de hidratação {/*show-a-dialog-for-recoverable-hydration-mismatch-errors*/} -When React encounters a hydration mismatch, it will automatically attempt to recover by rendering on the client. By default, React will log hydration mismatch errors to `console.error`. To override this behavior, you can provide the optional `onRecoverableError` root option: +Quando o React encontra uma diferença de hidratação, ele automaticamente tentará recuperar renderizando no cliente. Por padrão, o React imprimirá o log de erros de diferença de hidratação no `console.error`. Para mudar esse comportamento, você pode definir o método opcional `onRecoverableError` da raiz: ```js [[1, 7, "onRecoverableError"], [2, 7, "error", 1], [3, 11, "error.cause", 1], [4, 7, "errorInfo"], [5, 12, "componentStack"]] import { hydrateRoot } from 'react-dom/client'; @@ -936,12 +936,12 @@ const root = hydrateRoot( ); ``` -The onRecoverableError option is a function called with two arguments: +O método onRecoverableError é uma função com dois argumentos: -1. The error React throws. Some errors may include the original cause as error.cause. -2. An errorInfo object that contains the componentStack of the error. +1. O error lançado pelo React. Alguns erros podem incluir a causa original como error.cause. +2. Um objeto errorInfo que contém o componentStack do erro. -You can use the `onRecoverableError` root option to display error dialogs for hydration mismatches: +Você pode usar o método `onRecoverableError` da raiz para mostrar diálogos de erro para diferenças de hidratação: @@ -1175,12 +1175,12 @@ function Throw({error}) { -## Troubleshooting {/*troubleshooting*/} +## Solução de problemas {/*troubleshooting*/} -### I'm getting an error: "You passed a second argument to root.render" {/*im-getting-an-error-you-passed-a-second-argument-to-root-render*/} +### Estou recebendo esse erro: "You passed a second argument to root.render" {/*im-getting-an-error-you-passed-a-second-argument-to-root-render*/} -A common mistake is to pass the options for `hydrateRoot` to `root.render(...)`: +Um erro comum é passar as opções de `hydrateRoot` para `root.render(...)`: @@ -1188,7 +1188,7 @@ Warning: You passed a second argument to root.render(...) but it only accepts on -To fix, pass the root options to `hydrateRoot(...)`, not `root.render(...)`: +Para correção, passe as opções da raiz para `hydrateRoot(...)`, e não para `root.render(...)`: ```js {2,5} // 🚩 Wrong: root.render only takes one argument. root.render(App, {onUncaughtError});