diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 251818bc9..d3eb68179 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -1,10 +1,17 @@ --- title: hydrateRoot +translationStatus: ai-draft --- + + +Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/reference/react-dom/client/hydrateRoot.md). + + + -`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` ti permette di visualizzare componenti React all'interno di un nodo DOM del browser il cui contenuto HTML è stato generato in precedenza da [`react-dom/server`.](/reference/react-dom/server) ```js const root = hydrateRoot(domNode, reactNode, options?) @@ -20,7 +27,7 @@ const root = hydrateRoot(domNode, reactNode, options?) ### `hydrateRoot(domNode, reactNode, options?)` {/*hydrateroot*/} -Call `hydrateRoot` to “attach” React to existing HTML that was already rendered by React in a server environment. +Chiama `hydrateRoot` per "collegare" React all'HTML esistente che era già stato renderizzato da React in un ambiente server. ```js import { hydrateRoot } from 'react-dom/client'; @@ -29,102 +36,102 @@ 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 si collegherà all'HTML che esiste all'interno del `domNode` e prenderà in carico la gestione del DOM al suo interno. Un'app interamente costruita con React avrà di solito una sola chiamata a `hydrateRoot` con il suo componente root. -[See more examples below.](#usage) +[Vedi altri esempi sotto.](#usage) #### Parameters {/*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`: Un [elemento DOM](https://developer.mozilla.org/it/docs/Web/API/Element) che era stato renderizzato come elemento root sul server. -* `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`: Il *nodo React* usato per renderizzare l'HTML esistente. Di solito sarà un pezzo di JSX come `` che era stato renderizzato con un metodo `ReactDOM Server` come `renderToPipeableStream()`. -* **optional** `options`: An object with options for this React root. +* **optional** `options`: Un oggetto con opzioni per questa root 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. - * **optional** `formState`: The form state from a form submission handled by a [Server Function](/reference/rsc/server-functions). If the page was rendered on the server in response to a submission of a form that uses [`useActionState`](/reference/react/useActionState) with a `permalink`, pass the resulting form state so that `useActionState` returns the submitted state instead of the `initialState`. Must be the same value as the `formState` passed to the [server renderer.](/reference/react-dom/server/renderToPipeableStream#parameters) This is typically passed through by your framework. + * **optional** `onCaughtError`: Callback chiamata quando React cattura un errore in un contenitore di errori. Viene chiamata con l'`error` catturato dal contenitore di errori e un oggetto `errorInfo` che contiene il `componentStack`. + * **optional** `onUncaughtError`: Callback chiamata quando viene lanciato un errore e non viene catturato da un contenitore di errori. Viene chiamata con l'`error` lanciato e un oggetto `errorInfo` che contiene il `componentStack`. + * **optional** `onRecoverableError`: Callback chiamata quando React recupera automaticamente dagli errori. Viene chiamata con un `error` lanciato da React e un oggetto `errorInfo` che contiene il `componentStack`. Alcuni errori recuperabili possono includere la causa originale dell'errore come `error.cause`. + * **optional** `identifierPrefix`: Un prefisso stringa che React usa per gli ID generati da [`useId`.](/reference/react/useId) Utile per evitare conflitti quando usi più root sulla stessa pagina. Deve essere lo stesso prefisso usato sul server. + * **optional** `formState`: Lo state del form da un invio di form gestito da una [Server Function](/reference/rsc/server-functions). Se la pagina è stata renderizzata sul server in risposta all'invio di un form che usa [`useActionState`](/reference/react/useActionState) con un `permalink`, passa lo state del form risultante così che `useActionState` restituisca lo state inviato invece dell'`initialState`. Deve essere lo stesso valore del `formState` passato al [renderer server.](/reference/react-dom/server/renderToPipeableStream#parameters) Di solito viene passato dal tuo framework. #### Returns {/*returns*/} -`hydrateRoot` returns an object with two methods: [`render`](#root-render) and [`unmount`.](#root-unmount) +`hydrateRoot` restituisce un oggetto con due metodi: [`render`](#root-render) e [`unmount`.](#root-unmount) #### Caveats {/*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()` si aspetta che il contenuto renderizzato sia identico al contenuto renderizzato lato server. Dovresti trattare le discrepanze come bug e correggerle. +* In modalità development, React avvisa sulle discrepanze durante l'idratazione. Non ci sono garanzie che le differenze negli attributi verranno corrette in caso di discrepanze. Questo è importante per motivi di performance perché nella maggior parte delle app le discrepanze sono rare, e quindi validare tutto il markup sarebbe proibitivamente costoso. +* Probabilmente avrai una sola chiamata a `hydrateRoot` nella tua app. Se usi un framework, potrebbe eseguire questa chiamata per te. +* Se la tua app è renderizzata lato client senza HTML già renderizzato, l'uso di `hydrateRoot()` non è supportato. Usa [`createRoot()`](/reference/react-dom/client/createRoot) al suo posto. --- ### `root.render(reactNode)` {/*root-render*/} -Call `root.render` to update a React component inside a hydrated React root for a browser DOM element. +Chiama `root.render` per aggiornare un componente React all'interno di una root React idratata per un elemento DOM del browser. ```js root.render(); ``` -React will update `` in the hydrated `root`. +React aggiornerà `` nella `root` idratata. -[See more examples below.](#usage) +[Vedi altri esempi sotto.](#usage) #### Parameters {/*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`: Un *nodo React* che vuoi aggiornare. Di solito sarà un pezzo di JSX come ``, ma puoi anche passare un elemento React costruito con [`createElement()`](/reference/react/createElement), una stringa, un numero, `null` o `undefined`. #### Returns {/*root-render-returns*/} -`root.render` returns `undefined`. +`root.render` restituisce `undefined`. #### Caveats {/*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 chiami `root.render` prima che la root abbia finito di idratare, React cancellerà il contenuto HTML esistente renderizzato lato server e passerà l'intera root alla renderizzazione lato client. --- ### `root.unmount()` {/*root-unmount*/} -Call `root.unmount` to destroy a rendered tree inside a React root. +Chiama `root.unmount` per distruggere un albero renderizzato all'interno di una root React. ```js root.unmount(); ``` -An app fully built with React will usually not have any calls to `root.unmount`. +Un'app interamente costruita con React di solito non avrà chiamate a `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. +È soprattutto utile se il nodo DOM della tua root React (o uno dei suoi antenati) può essere rimosso dal DOM da altro codice. Ad esempio, immagina un pannello a schede jQuery che rimuove le schede inattive dal DOM. Se una scheda viene rimossa, tutto al suo interno (incluse le root React al suo interno) verrebbe rimosso dal DOM. In quel caso, devi dire a React di "smettere" di gestire il contenuto della root rimossa chiamando `root.unmount`. Altrimenti, i componenti all'interno della root rimossa non saprebbero di dover fare pulizia e liberare risorse globali come le sottoscrizioni. -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. +Chiamare `root.unmount` smonterà tutti i componenti nella root e "scollegherà" React dal nodo DOM root, inclusa la rimozione dei gestori di eventi e dello state nell'albero. #### Parameters {/*root-unmount-parameters*/} -`root.unmount` does not accept any parameters. +`root.unmount` non accetta parametri. #### Returns {/*root-unmount-returns*/} -`root.unmount` returns `undefined`. +`root.unmount` restituisce `undefined`. #### Caveats {/*root-unmount-caveats*/} -* Calling `root.unmount` will unmount all the components in the tree and "detach" React from the root DOM node. +* Chiamare `root.unmount` smonterà tutti i componenti nell'albero e "scollegherà" React dal nodo DOM root. -* 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. +* Una volta chiamato `root.unmount` non puoi chiamare di nuovo `root.render` sulla stessa root. Tentare di chiamare `root.render` su una root smontata lancerà un errore "Cannot update an unmounted root". --- ## Usage {/*usage*/} -### Hydrating server-rendered HTML {/*hydrating-server-rendered-html*/} +### Idratare HTML renderizzato lato server {/*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 l'HTML della tua app è stato generato da [`react-dom/server`](/reference/react-dom/client/createRoot), devi *idratarlo* sul client. ```js [[1, 3, "document.getElementById('root')"], [2, 3, ""]] import { hydrateRoot } from 'react-dom/client'; @@ -132,16 +139,16 @@ 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. +Questo idraterà l'HTML del server all'interno del nodo DOM del browser con il componente React della tua app. Di solito, lo fai una sola volta all'avvio. Se usi un framework, potrebbe farlo dietro le quinte per te. -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. +Per idratare la tua app, React "collegherà" la logica dei tuoi componenti all'HTML iniziale generato dal server. L'idratazione trasforma l'istantanea HTML iniziale dal server in un'app completamente interattiva che gira nel browser. ```html public/index.html

Hello, world!

``` @@ -181,30 +188,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. +Non dovresti aver bisogno di chiamare di nuovo `hydrateRoot` o di chiamarlo in più punti. Da questo momento in poi, React gestirà il DOM della tua applicazione. Per aggiornare l'UI, i tuoi componenti [useranno lo state](/reference/react/useState) al suo posto. -The React tree you pass to `hydrateRoot` needs to produce **the same output** as it did on the server. +L'albero React che passi a `hydrateRoot` deve produrre **lo stesso output** che aveva prodotto sul server. -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. +Questo è importante per l'esperienza utente. L'utente passerà del tempo a guardare l'HTML generato dal server prima che il tuo codice JavaScript venga caricato. La renderizzazione lato server crea l'illusione che l'app si carichi più velocemente mostrando l'istantanea HTML del suo output. Mostrare all'improvviso contenuto diverso rompe quell'illusione. Per questo l'output della renderizzazione lato server deve corrispondere all'output della renderizzazione iniziale sul client. -The most common causes leading to hydration errors include: +Le cause più comuni che portano a errori di idratazione includono: -* 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. +* Spazi bianchi extra (come le newline) attorno all'HTML generato da React all'interno del nodo root. +* Usare controlli come `typeof window !== 'undefined'` nella logica di renderizzazione. +* Usare API disponibili solo nel browser come [`window.matchMedia`](https://developer.mozilla.org/it/docs/Web/API/Window/matchMedia) nella logica di renderizzazione. +* Renderizzare dati diversi sul server e sul client. -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. +React recupera da alcuni errori di idratazione, ma **devi correggerli come qualsiasi altro bug.** Nel caso migliore, causeranno un rallentamento; nel caso peggiore, i gestori di eventi possono essere collegati agli elementi sbagliati. --- -### Hydrating an entire document {/*hydrating-an-entire-document*/} +### Idratare un intero documento {/*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: +Le app interamente costruite con React possono renderizzare l'intero documento come JSX, incluso il tag [``](https://developer.mozilla.org/it/docs/Web/HTML/Element/html): ```js {3,13} function App() { @@ -224,7 +231,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`: +Per idratare l'intero documento, passa la variabile globale [`document`](https://developer.mozilla.org/it/docs/Web/API/Window/document) come primo argomento a `hydrateRoot`: ```js {4} import { hydrateRoot } from 'react-dom/client'; @@ -235,18 +242,18 @@ hydrateRoot(document, ); --- -### Suppressing unavoidable hydration mismatch errors {/*suppressing-unavoidable-hydration-mismatch-errors*/} +### Sopprimere errori inevitabili di discrepanza nell'idratazione {/*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 l'attributo o il contenuto testuale di un singolo elemento è inevitabilmente diverso tra server e client (ad esempio, un timestamp), puoi silenziare l'avviso di discrepanza nell'idratazione. -To silence hydration warnings on an element, add `suppressHydrationWarning={true}`: +Per silenziare gli avvisi di idratazione su un elemento, aggiungi `suppressHydrationWarning={true}`: ```html public/index.html

Current Date: 01/01/2020

``` @@ -271,22 +278,22 @@ export default function App() { -This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. React will **not** attempt to patch mismatched text content. +Funziona solo a un livello di profondità ed è pensato come via di fuga. Non abusarne. React **non** tenterà di correggere il contenuto testuale non corrispondente. --- {/* TODO: Remove this subsection when browser is available in Stable. */} -### Handling different client and server content {/*handling-different-client-and-server-content*/} +### Gestire contenuto diverso tra client e server {/*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 hai intenzionalmente bisogno di renderizzare qualcosa di diverso sul server e sul client, puoi fare una renderizzazione in due passaggi. I componenti che renderizzano qualcosa di diverso sul client possono leggere una [variabile di state](/reference/react/useState) come `isClient`, che puoi impostare su `true` in un [Effetto](/reference/react/useEffect): ```html public/index.html

Is Server

``` @@ -320,32 +327,32 @@ 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. +In questo modo il passaggio di renderizzazione iniziale renderizzerà lo stesso contenuto del server, evitando le discrepanze, ma un passaggio aggiuntivo avverrà in modo sincrono subito dopo l'idratazione. -Use this approach when you want the client-rendered content to be different from the initial server-rendered HTML. +Usa questo approccio quando vuoi che il contenuto renderizzato sul client sia diverso dall'HTML iniziale renderizzato lato server. -If a component should render only in the browser, call [`use(browser())`](/reference/react/use#use-browser) instead of waiting for an Effect. +Se un componente deve renderizzare solo nel browser, chiama [`use(browser())`](/reference/react/use#use-browser) invece di aspettare un Effetto. -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. +Questo approccio rallenta l'idratazione perché i tuoi componenti devono renderizzare due volte. Tieni presente l'esperienza utente su connessioni lente. Il codice JavaScript può caricarsi molto più tardi rispetto alla renderizzazione HTML iniziale, quindi renderizzare un'UI diversa subito dopo l'idratazione può anche risultare brusco per l'utente. --- -### Updating a hydrated root component {/*updating-a-hydrated-root-component*/} +### Aggiornare un componente root idratato {/*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.** +Dopo che la root ha finito di idratare, puoi chiamare [`root.render`](#root-render) per aggiornare il componente React root. **A differenza di [`createRoot`](/reference/react-dom/client/createRoot), di solito non devi farlo perché il contenuto iniziale era già stato renderizzato come 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 chiami `root.render` in un momento successivo all'idratazione, e la struttura dell'albero dei componenti corrisponde a quanto renderizzato in precedenza, React [preserverà lo state.](/learn/preserving-and-resetting-state) Nota come puoi digitare nell'input, il che significa che gli aggiornamenti dalle ripetute chiamate a `render` ogni secondo in questo esempio non sono distruttivi: ```html public/index.html

Hello, world! 0

``` @@ -380,11 +387,11 @@ 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. +È poco comune chiamare [`root.render`](#root-render) su una root idratata. Di solito, [aggiornerai lo state](/reference/react/useState) all'interno di uno dei componenti al suo posto. -### Error logging in production {/*error-logging-in-production*/} +### Registrazione degli errori in produzione {/*error-logging-in-production*/} -By default, React will log all errors to the console. To implement your own error reporting, you can provide the optional error handler root options `onUncaughtError`, `onCaughtError` and `onRecoverableError`: +Per impostazione predefinita, React registrerà tutti gli errori nella console. Per implementare la tua segnalazione errori, puoi fornire le opzioni root opzionali per i gestori di errori `onUncaughtError`, `onCaughtError` e `onRecoverableError`: ```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack", 15]] import { hydrateRoot } from "react-dom/client"; @@ -404,19 +411,19 @@ const root = hydrateRoot(container, , { }); ``` -The onCaughtError option is a function called with two arguments: +L'opzione onCaughtError è una funzione chiamata con due argomenti: -1. The error that was thrown. -2. An errorInfo object that contains the componentStack of the error. +1. L'error che è stato lanciato. +2. Un oggetto errorInfo che contiene il componentStack dell'errore. -Together with `onUncaughtError` and `onRecoverableError`, you can implement your own error reporting system: +Insieme a `onUncaughtError` e `onRecoverableError`, puoi implementare il tuo sistema di segnalazione errori: ```js src/reportError.js function reportError({ type, error, errorInfo }) { - // The specific implementation is up to you. - // `console.error()` is only used for demonstration purposes. + // L'implementazione specifica dipende da te. + // `console.error()` è usato solo a scopo dimostrativo. console.error(type, error, "Component Stack: "); console.error("Component Stack: ", errorInfo.componentStack); } @@ -447,9 +454,9 @@ import { const container = document.getElementById("root"); hydrateRoot(container, , { - // Keep in mind to remove these options in development to leverage - // React's default handlers or implement your own overlay for development. - // The handlers are only specfied unconditionally here for demonstration purposes. + // Tieni presente di rimuovere queste opzioni in development per sfruttare + // i gestori predefiniti di React o implementare il tuo overlay per development. + // I gestori sono specificati incondizionatamente qui solo a scopo dimostrativo. onCaughtError: onCaughtErrorProd, onRecoverableError: onRecoverableErrorProd, onUncaughtError: onUncaughtErrorProd, @@ -472,7 +479,7 @@ class ErrorBoundary extends Component { render() { if (this.state.hasError) { - return

Something went wrong.

; + return

Qualcosa è andato storto.

; } return this.props.children; } @@ -485,11 +492,11 @@ export default function App() { return ( <> {triggerUncaughtError && } {triggerCaughtError && ( @@ -509,7 +516,7 @@ export default function App() {
Server content before hydration.
@@ -520,9 +527,9 @@ export default function App() { ## Troubleshooting {/*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*/} +### Ricevo un errore: "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(...)`: +Un errore comune è passare le opzioni per `hydrateRoot` a `root.render(...)`: @@ -530,11 +537,11 @@ 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(...)`: +Per risolvere, passa le opzioni root a `hydrateRoot(...)`, non a `root.render(...)`: ```js {2,5} -// 🚩 Wrong: root.render only takes one argument. +// 🚩 Sbagliato: root.render accetta un solo argomento. root.render(App, {onUncaughtError}); -// ✅ Correct: pass options to createRoot. +// ✅ Corretto: passa le opzioni a hydrateRoot. const root = hydrateRoot(container, , {onUncaughtError}); ```