diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx
index 2716fa2d1..3be1fa7a7 100644
--- a/src/components/MDX/TeamMember.tsx
+++ b/src/components/MDX/TeamMember.tsx
@@ -68,7 +68,7 @@ function GroupBadges({group}: {group: string}) {
);
}
-// TODO: good alt text for images/links
+// TODO: good alt text for images
export function TeamMember({
name,
title,
@@ -113,7 +113,7 @@ export function TeamMember({
aria-label={`${name} on Twitter`}
href={`https://twitter.com/${twitter}`}
className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-
+
{twitter}
@@ -124,7 +124,7 @@ export function TeamMember({
aria-label={`${name} on Threads`}
href={`https://threads.net/${threads}`}
className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-
+
{threads}
@@ -135,7 +135,7 @@ export function TeamMember({
aria-label={`${name} on Bluesky`}
href={`https://bsky.app/profile/${bsky}`}
className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-
+
{bsky}
@@ -143,19 +143,19 @@ export function TeamMember({
{github && (
- {github}
+ {github}
)}
{personal && (
- {personal}
+ {personal}
)}
diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md
index 4f1af129a..ea8fb8cdb 100644
--- a/src/content/blog/2023/03/16/introducing-react-dev.md
+++ b/src/content/blog/2023/03/16/introducing-react-dev.md
@@ -48,8 +48,13 @@ Quando abbiamo rilasciato React Hooks nel 2018, la documentazione sugli Hooks pr
**La nuova documentazione insegna React con gli Hooks fin dall'inizio.** La documentazione è divisa in due sezioni principali:
+<<<<<<< HEAD
* **[Impara React](/learn)** è un corso autogestito che insegna React da zero.
* **[API Reference](/reference)** fornisce i dettagli e gli esempi d'uso per ogni API React.
+=======
+* **[Learn React](/learn)** is a self-paced course that teaches React from scratch.
+* **[API Reference](/reference/react)** provides the details and usage examples for every React API.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
Vediamo più da vicino cosa trovi in ciascuna sezione.
@@ -466,11 +471,19 @@ Abbiamo confermato con i vendor dei browser che questa rappresentazione è scien
Nell'[API Reference](/reference/react), ogni API React ha ora una pagina dedicata. Questo include tutti i tipi di API:
+<<<<<<< HEAD
- Hooks integrati come [`useState`](/reference/react/useState).
- Componenti integrati come [``](/reference/react/Suspense).
- Componenti browser integrati come [``](/reference/react-dom/components/input).
- API orientate ai framework come [`renderToPipeableStream`](/reference/react-dom/server/renderToReadableStream).
- Altre API React come [`memo`](/reference/react/memo).
+=======
+- Built-in Hooks like [`useState`](/reference/react/useState).
+- Built-in components like [``](/reference/react/Suspense).
+- Built-in browser components like [``](/reference/react-dom/components/input).
+- Framework-oriented APIs like [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream).
+- Other React APIs like [`memo`](/reference/react/memo).
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
Noterai che ogni pagina API è divisa in almeno due segmenti: *Reference* e *Usage*.
@@ -614,7 +627,11 @@ button { display: block; margin-top: 10px; }
+<<<<<<< HEAD
Alcune pagine API includono anche [Troubleshooting](/reference/react/useEffect#troubleshooting) (per problemi comuni) e [Alternatives](/reference/react-dom/findDOMNode#alternatives) (per API deprecate).
+=======
+Some API pages also include [Troubleshooting](/reference/react/useEffect#troubleshooting) (for common problems) and [Alternatives](https://18.react.dev/reference/react-dom/findDOMNode#alternatives) (for deprecated APIs).
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
Speriamo che questo approccio renda l'API reference utile non solo per cercare un argomento, ma per vedere tutte le cose diverse che puoi fare con una data API — e come si collega alle altre.
diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
index 8f49d8f4d..ba5f9654c 100644
--- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md
+++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
@@ -646,7 +646,11 @@ const ref = useRef(null);
ref.current = 1;
```
+<<<<<<< HEAD
`MutableRef` è ora deprecato in favore di un unico tipo `RefObject` che `useRef` restituirà sempre:
+=======
+`MutableRefObject` is now deprecated in favor of a single `RefObject` type which `useRef` will always return:
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
```ts
interface RefObject {
diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md
index 115eccc58..a1f010290 100644
--- a/src/content/blog/2024/12/05/react-19.md
+++ b/src/content/blog/2024/12/05/react-19.md
@@ -397,7 +397,11 @@ Per maggiori informazioni, consulta la documentazione delle [Directives](/refere
Le Server Actions possono essere create in Server Components e passate come props a Client Components, oppure possono essere importate e usate in Client Components.
+<<<<<<< HEAD
Per approfondire, consulta la documentazione delle [React Server Actions](/reference/rsc/server-actions).
+=======
+For more, see the docs for [React Server Actions](/reference/rsc/server-functions).
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
## Miglioramenti in React 19 {/*improvements-in-react-19*/}
diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
index ba2d1dcd3..4c8604082 100644
--- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
+++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
@@ -14273,7 +14273,11 @@ Purtroppo, alcuni hooks sono ancora difficili da pensare in termini di funzione
Abbiamo scoperto che spesso la confusione deriva dall'usare un Effetto quando non ne hai bisogno. La guida [You Might Not Need an Effect](/learn/you-might-not-need-an-effect) copre molti casi in cui gli Effetti non sono la soluzione giusta. Tuttavia, anche quando un Effetto è adatto a un problema, gli Effetti possono essere ancora più difficili da capire rispetto ai lifecycle dei componenti classe.
+<<<<<<< HEAD
Crediamo che una delle ragioni della confusione sia che gli sviluppatori pensano agli Effetti dalla prospettiva del _componente_ (come un lifecycle), invece che dal punto di vista degli _Effetti_ (cosa fa l'Effetto).
+=======
+We believe one of the reasons for confusion is that developers tend to think of Effects from the _component's_ perspective (like a lifecycle), instead of the _Effects_ point of view (what the Effect does).
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
Diamo un'occhiata a un esempio [dalla documentazione](/learn/lifecycle-of-reactive-effects#thinking-from-the-effects-perspective):
diff --git a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md
index fd2c0a120..c1f1fcb0a 100644
--- a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md
+++ b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md
@@ -81,7 +81,11 @@ Divulgazioni aggiuntive possono essere frustranti, ma in genere sono segno di un
### Framework e bundler interessati {/*affected-frameworks-and-bundlers*/}
+<<<<<<< HEAD
Alcuni framework e bundler React dipendevano, avevano peer dependency o includevano i pacchetti React vulnerabili. I seguenti framework e bundler React sono interessati: [next](https://www.npmjs.com/package/next), [react-router](https://www.npmjs.com/package/react-router), [waku](https://www.npmjs.com/package/waku), [@parcel/rsc](https://www.npmjs.com/package/@parcel/rsc), [@vite/rsc-plugin](https://www.npmjs.com/package/@vitejs/plugin-rsc) e [rwsdk](https://www.npmjs.com/package/rwsdk).
+=======
+Some React frameworks and bundlers depended on, had peer dependencies for, or included the vulnerable React packages. The following React frameworks & bundlers are affected: [next](https://www.npmjs.com/package/next), [react-router](https://www.npmjs.com/package/react-router), [waku](https://www.npmjs.com/package/waku), [@parcel/rsc](https://www.npmjs.com/package/@parcel/rsc), [@vitejs/plugin-rsc](https://www.npmjs.com/package/@vitejs/plugin-rsc), and [rwsdk](https://www.npmjs.com/package/rwsdk).
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
Consulta [le istruzioni nel post precedente](/blog/2025/12/03/critical-security-vulnerability-in-react-server-components#update-instructions) per i passaggi di aggiornamento.
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index b7e106c45..6e89afaab 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -17,6 +17,7 @@ Conosci una conferenza React.js locale? Aggiungila qui! (Mantieni l'elenco in or
## Prossime conferenze {/*upcoming-conferences*/}
+<<<<<<< HEAD
### ZurichJS Conf 2026 {/*zurichjs-conf-2026*/}
September 10-11, 2026. In presenza a Zurich, Switzerland
@@ -37,6 +38,8 @@ October 23 & 26, 2026. In-person in London, UK + online (hybrid event)
[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) - [LinkedIn](https://www.linkedin.com/showcase/react-advanced-london/)
+=======
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
### React Summit US 2026 {/*react-summit-us-2026*/}
November 17 & 20, 2026. In-person in New York, USA + online (hybrid event)
@@ -52,6 +55,11 @@ April 15 & 19, 2027. In-person in Singapore + online (hybrid event)
[Website](https://reactsummit.asia/) - [Twitter](https://x.com/reactsummit) - [LinkedIn](https://www.linkedin.com/showcase/reactsummit)
+### React Conf Japan 2027 {/*react-conf-japan-2027*/}
+April 24, 2027. In-person in Tokyo, Japan
+
+[Website](https://reactconf.jp/) - [Twitter](https://x.com/reactconfjp)
+
### React Summit 2027 {/*react-summit-2027*/}
May 21 & 25, 2027. In-person in Amsterdam, Netherlands + online (hybrid event)
@@ -60,16 +68,71 @@ May 21 & 25, 2027. In-person in Amsterdam, Netherlands + online (hybrid event)
## Conferenze passate {/*past-conferences*/}
+### React India 2026 {/*react-india-2026*/}
+October 29-31, 2026. In-person in Goa, India
+<<<<<<< HEAD
### React Conf Japan 2027 {/*react-conf-japan-2027*/}
April 24, 2027. In presenza a Tokyo, Japan
[Sito web](https://reactconf.jp/) - [Twitter](https://x.com/reactconfjp)
+=======
+[Website](https://www.reactindia.io/) - [Twitter](https://x.com/react_india)
+
+### React Advanced London 2026 {/*react-advanced-london-2026*/}
+October 23 & 26, 2026. In-person in London, UK + online (hybrid event)
+
+[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) - [LinkedIn](https://www.linkedin.com/showcase/react-advanced-london/)
+
+### CityJS Athens 2026 {/*cityjs-athens-2026*/}
+October 21-23, 2026. In-person in Athens
+
+[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
+### React Alicante 2026 {/*react-alicante-2026*/}
+Sep 24 - 26, 2026. In-person in Alicante
+
+[Website](https://reactalicante.es//) - [Twitter](https://x.com/ReactAlicante)
+
+### React Native Connection 2026 {/*react-native-connection-2026*/}
+September 24, 2026. In-person in Paris, France
+
+[Website](https://reactnativeconnection.io/) - [Twitter](https://x.com/ReactNativeConn) - [Bluesky](https://bsky.app/profile/reactnativeconnect.bsky.social)
+
+### ZurichJS Conf 2026 {/*zurichjs-conf-2026*/}
+September 10-11, 2026. In-person in Zurich, Switzerland
+
+[Website](https://conf.zurichjs.com?utm_campaign=ZurichJS_Conf&utm_source=referral&utm_content=reactjs_community_conferences) - [Twitter](https://x.com/zurichjs) - [LinkedIn](https://www.linkedin.com/company/zurichjs/)
+
+### Render(ATL) 2026 🍑 {/*renderatl-2026-*/}
+August 12-13, 2026. In-person in Atlanta, GA, USA
+
+[Website](https://renderatl.com/) - [Twitter](https://x.com/renderATL) - [LinkedIn](https://www.linkedin.com/company/renderatl)
+
+### React Summit 2026 {/*react-summit-2026*/}
+June 12 & 16, 2026. In-person in Amsterdam, Netherlands + online (hybrid event)
+
+[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit) - [LinkedIn](https://www.linkedin.com/showcase/reactsummit)
+
+### React Norway 2026 {/*react-norway-2026*/}
+June 5, 2026. In-person in Oslo, Norway
+
+[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway)
+
+### React Miami 2026 {/*react-miami-2026*/}
+April 23-24, 2026. In-person in Miami, FL, USA
+
+[Website](https://reactmiami.com/) - [Twitter](https://x.com/ReactMiamiConf)
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
### CityJS London 2026 {/*cityjs-london-2026*/}
April 14-17, 2026. In presenza a London
+<<<<<<< HEAD
[Sito web](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+=======
+[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
### React Paris 2026 {/*react-paris-2026*/}
@@ -86,7 +149,11 @@ February 12-13, 2026. In presenza a New Delhi, India
### CityJS Singapore 2026 {/*cityjs-singapore-2026*/}
February 4-6, 2026. In presenza a Singapore
+<<<<<<< HEAD
[Sito web](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+=======
+[Website](https://singapore.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
### React Advanced London 2025 {/*react-advanced-london-2025*/}
November 28 & December 1, 2025. In presenza a London, UK + remoto (evento ibrido)
diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index aa37d4b82..6ee60ab10 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -529,7 +529,11 @@ React usa gli alberi per modellare le relazioni tra componenti e moduli.
Un albero di renderizzazione di React è una rappresentazione delle relazioni padre e figlio tra i componenti.
+<<<<<<< HEAD
+=======
+
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
Un esempio di albero di rendering React.
diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md
index 3164b540d..103835b5f 100644
--- a/src/content/learn/extracting-state-logic-into-a-reducer.md
+++ b/src/content/learn/extracting-state-logic-into-a-reducer.md
@@ -874,7 +874,11 @@ I reducer non sono privi di svantaggi! Ecco alcuni modi per confrontarli:
- **Testing:** Un reducer è una funzione pura che non dipende dal tuo componente. Questo significa che puoi esportarlo e testarlo separatamente in isolamento. Anche se generalmente è meglio testare i componenti in un ambiente più realistico, per la logica di aggiornamento dello stato complessa può essere utile affermare che il tuo reducer restituisce un particolare stato per un particolare stato iniziale e azione.
- **Preferenza personale:** Ad alcune persone piacciono i reducers, ad altre no. Va bene. È una questione di preferenza. Puoi sempre passare da `useState` a `useReducer` e viceversa: sono equivalenti!
+<<<<<<< HEAD
Raccomandiamo l'uso di un reducer se spesso incontri bug dovuti ad aggiornamenti errati di state in qualche componente, e desideri introdurre più struttura nel suo codice. Non devi usare i reducer per tutto: sentiti libero di combinare e variare! Puoi anche usare `useState` e `useReducer` nello stesso componente.
+=======
+We recommend using a reducer if you often encounter bugs due to incorrect state updates in some component, and want to introduce more structure to its code. You don't have to use reducers for everything: feel free to mix and match! You can even use `useState` and `useReducer` in the same component.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
## Scrivere bene i reducer {/*writing-reducers-well*/}
diff --git a/src/content/learn/index.md b/src/content/learn/index.md
index e5cd4b0ee..48fa0d6fe 100644
--- a/src/content/learn/index.md
+++ b/src/content/learn/index.md
@@ -336,7 +336,11 @@ function MyButton() {
}
```
+<<<<<<< HEAD
React chiamerà di nuovo la tua funzione componente. Questa volta, `count` sarà `1`. Poi sarà `2`. E così via.
+=======
+Calling `setCount` tells React to call your component function again. This is called a *re-render*. This time, `count` will be `1`. Then it will be `2`. And so on.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
Se esegui il rendering dello stesso componente più volte, ognuno avrà il proprio state. Fai clic su ogni pulsante separatamente:
diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md
index 47405f343..c010a153e 100644
--- a/src/content/learn/lifecycle-of-reactive-effects.md
+++ b/src/content/learn/lifecycle-of-reactive-effects.md
@@ -1382,7 +1382,7 @@ export default function App() {
```
```js {expectedErrors: {'react-compiler': [8]}} src/ChatRoom.js active
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
export default function ChatRoom({ roomId, createConnection }) {
useEffect(() => {
@@ -1480,7 +1480,7 @@ export default function App() {
```
```js src/ChatRoom.js active
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
export default function ChatRoom({ roomId, createConnection }) {
useEffect(() => {
@@ -1568,7 +1568,7 @@ export default function App() {
```
```js src/ChatRoom.js active
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
import {
createEncryptedConnection,
createUnencryptedConnection,
diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index 7237d1f91..dc5570864 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -25,7 +25,11 @@ Lo state è isolato tra i componenti. React tiene traccia di quale state apparti
## Lo state è legato a una posizione nell'albero di renderizzazione {/*state-is-tied-to-a-position-in-the-tree*/}
+<<<<<<< HEAD
React costruisce [alberi di renderizzazione](/learn/understanding-your-ui-as-a-tree#the-render-tree) per la struttura dei componenti nella tua UI.
+=======
+React builds [render trees](/learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
Quando dai state a un componente, potresti pensare che lo state "viva" dentro il componente. Ma lo state è in realtà conservato dentro React. React associa ogni pezzo di state che conserva al componente corretto in base a dove quel componente si trova nell'albero di renderizzazione.
diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md
index ff5d6eae4..2b6b26d38 100644
--- a/src/content/learn/react-compiler/introduction.md
+++ b/src/content/learn/react-compiler/introduction.md
@@ -144,7 +144,7 @@ However, if `expensivelyProcessAReallyLargeArrayOfObjects` is truly an expensive
- React Compiler only memoizes React components and hooks, not every function
- React Compiler's memoization is not shared across multiple components or hooks
-So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated.
+So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated.
## Should I try out the compiler? {/*should-i-try-out-the-compiler*/}
diff --git a/src/content/learn/setup.md b/src/content/learn/setup.md
index 2c46ee148..b93155cc1 100644
--- a/src/content/learn/setup.md
+++ b/src/content/learn/setup.md
@@ -17,7 +17,7 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. [Le
## React Developer Tools {/*react-developer-tools*/}
-React Developer Tools is a browser extension that can inspect React components, edit props and state, and identify performance problems. Learn how to install it [here](learn/react-developer-tools).
+React Developer Tools is a browser extension that can inspect React components, edit props and state, and identify performance problems. Learn how to install it [here](/learn/react-developer-tools).
## React Compiler {/*react-compiler*/}
diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md
index 294cdc518..13d3bbbd5 100644
--- a/src/content/learn/synchronizing-with-effects.md
+++ b/src/content/learn/synchronizing-with-effects.md
@@ -739,8 +739,13 @@ Scrivere chiamate `fetch` all'interno degli Effetti è un [modo popolare per rec
Questo elenco di svantaggi non è specifico di React. Si applica al recupero dati al mount con qualsiasi libreria. Come per il routing, il recupero dati non è banale da fare bene, quindi consigliamo i seguenti approcci:
+<<<<<<< HEAD
- **Se usi un [framework](/learn/creating-a-react-app#full-stack-frameworks), usa il suo meccanismo di recupero dati integrato.** I framework React moderni hanno meccanismi di recupero dati integrati che sono efficienti e non soffrono dei problemi sopra.
- **Altrimenti, considera di usare o costruire una cache client-side.** Soluzioni open source popolari includono [TanStack Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/) e [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) Puoi costruire anche la tua soluzione, nel qual caso useresti gli Effetti sotto il cofano, ma aggiungeresti logica per deduplicare le richieste, mettere in cache le risposte ed evitare network waterfall (precaricando i dati o spostando i requisiti di dati alle route).
+=======
+- **If you use a [framework](/learn/creating-a-react-app#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
+- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [TanStack Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router](https://reactrouter.com/). You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
Puoi continuare a recuperare dati direttamente negli Effetti se nessuno di questi approcci ti soddisfa.
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 4c5188467..bf1e847cc 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -1138,7 +1138,11 @@ JavaScript supporta le [closures](https://developer.mozilla.org/en-US/docs/Web/J
+<<<<<<< HEAD
Ora puoi aggiungere X al tabellone... ma solo al quadrato in alto a sinistra. La tua funzione `handleClick` è hardcoded per aggiornare l'indice del quadrato in alto a sinistra (`0`). Aggiorniamo `handleClick` per poter aggiornare qualsiasi quadrato. Aggiungi un argomento `i` alla funzione `handleClick` che accetta l'indice del quadrato da aggiornare:
+=======
+Now you can add X's to the board... but only to the upper left square. Your `handleClick` function is hardcoded to update the index for the upper left square (`0`). Let's update `handleClick` to be able to update any square. Add a parameter `i` to the `handleClick` function that takes the index of the square to update:
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
```js {4,6}
export default function Board() {
diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index 2e6f7edc5..739efe366 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -335,7 +335,7 @@ function MyComponent() {
-The [`useMemo`](/reference/react/useMemo) Hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the Hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the Hook.
+The [`useMemo`](/reference/react/useMemo) Hooks will create/re-access a memoized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the Hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the Hook.
```ts
// The type of visibleTodos is inferred from the return value of filterTodos
diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md
index afc38cd33..497eb48de 100644
--- a/src/content/learn/understanding-your-ui-as-a-tree.md
+++ b/src/content/learn/understanding-your-ui-as-a-tree.md
@@ -135,7 +135,7 @@ The root node in a React render tree is the [root component](/learn/importing-an
#### Where are the HTML tags in the render tree? {/*where-are-the-html-elements-in-the-render-tree*/}
-You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](learn/your-first-component#components-ui-building-blocks).
+You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](/learn/your-first-component#components-ui-building-blocks).
React, as a UI framework, is platform agnostic. On react.dev, we showcase examples that render to the web, which uses HTML markup as its UI primitives. But a React app could just as likely render to a mobile or desktop platform, which may use different UI primitives like [UIView](https://developer.apple.com/documentation/uikit/uiview) or [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0).
diff --git a/src/content/reference/dev-tools/react-devtools-cdt-mcp.md b/src/content/reference/dev-tools/react-devtools-cdt-mcp.md
new file mode 100644
index 000000000..9c966a0ff
--- /dev/null
+++ b/src/content/reference/dev-tools/react-devtools-cdt-mcp.md
@@ -0,0 +1,407 @@
+---
+title: React DevTools for agents
+version: experimental
+---
+
+
+
+**`react-devtools-cdt-mcp` is experimental.** It is built on the [experimental third-party developer tools API](https://developer.chrome.com/blog/devtools-for-agents-3p-tools) in [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp), and both its tools and their output may change between releases.
+
+
+
+
+
+`react-devtools-cdt-mcp` gives AI coding agents the same view of your app that React DevTools gives you: the component tree, props, hooks, owners, source locations, and render timing.
+
+```js
+import 'react-devtools-cdt-mcp/register';
+```
+
+
+
+
+
+---
+
+## Overview {/*overview*/}
+
+Coding agents that drive a browser through [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp) can click, take snapshots, and read the DOM, but the DOM doesn't tell them which component rendered a button, what state it holds, or why an interaction was slow.
+
+`react-devtools-cdt-mcp` is a small browser library that you import into the page you're debugging. It registers a group of React tools with the page. When Chrome DevTools MCP connects to that page, it discovers the tools automatically, and your agent can call them like any other MCP tool.
+
+
+
+`react-devtools-cdt-mcp` is **not** an MCP server, and it doesn't go in your MCP client config. It runs inside your page. The only MCP server you configure is Chrome DevTools MCP.
+
+
+
+---
+
+## Setup {/*setup*/}
+
+#### Install the package {/*install-the-package*/}
+
+
+
+npm install --save-dev react-devtools-cdt-mcp
+
+
+
+#### Import it before React {/*import-it-before-react*/}
+
+Import the `register` entry point at the very top of your app's entry file, **before** anything imports `react-dom`:
+
+```js {1}
+import 'react-devtools-cdt-mcp/register';
+
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+createRoot(document.getElementById('root')).render();
+```
+
+`react-devtools-cdt-mcp` has to load before React does. If you import it after React, the tools won't see your components.
+
+
+
+`react-devtools-cdt-mcp` connects to React the same way the React DevTools extension does, and makes React report every commit to it. This slows down your app, so only include it in development builds.
+
+
+
+#### Set up Chrome DevTools MCP {/*set-up-chrome-devtools-mcp*/}
+
+Your agent needs [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp) with [third-party developer tools](https://developer.chrome.com/blog/devtools-for-agents-3p-tools) enabled. Follow the [Chrome DevTools MCP docs](https://github.com/ChromeDevTools/chrome-devtools-mcp#getting-started) to set it up. Once your agent opens a page that imports `react-devtools-cdt-mcp/register`, it can list and call the React tools.
+
+---
+
+## Try it {/*try-it*/}
+
+You don't need an agent to see what the tools return. The sandbox below imports `react-devtools-cdt-mcp/register` exactly as you would in your app, and adds a small **tool console** under the app. The console discovers the React tools the same way Chrome DevTools MCP does, by dispatching the `devtoolstooldiscovery` event, and lets you call them by hand.
+
+Pick a tool, edit the JSON parameters, and press **Run tool**. Here's a debugging session to follow, playing the agent's part:
+
+1. **Find a component.** Run `react_find_components` with `{"name": "Row"}`. Each result has a `uid`, like `"r12"`, that the other tools accept.
+2. **Inspect it.** Run `react_get_component_by_uid` with one of those uids and `"includeHooks": true` to see its props and hooks.
+3. **Start from the screen.** Choose `react_get_component_by_dom_element`, press **Pick element**, and click a product in the list to get the host component that rendered it.
+4. **Profile an interaction.** Run `react_start_profiling`, click **Add to cart** in the app, then run `react_stop_profiling`.
+5. **See what rendered.** Run `react_get_trace_overview`, then `react_get_commit_report` for commit `0` to see which components rendered in that commit and how long each one took.
+
+
+
+```js src/App.js active
+import { useState } from 'react';
+
+const PRODUCTS = Array.from({ length: 20 }, (_, i) => ({
+ id: i,
+ name: 'Product ' + (i + 1),
+ price: 10 + i,
+}));
+
+export default function App() {
+ const [query, setQuery] = useState('');
+ const visibleProducts = PRODUCTS.filter((product) =>
+ product.name.toLowerCase().includes(query.toLowerCase())
+ );
+ return (
+
+
+ setQuery(e.target.value)}
+ placeholder="Filter products"
+ />
+
+
+ );
+}
+
+function Cart() {
+ const [count, setCount] = useState(0);
+ return (
+
+
+
+
+ );
+}
+
+function CartBadge({ count }) {
+ return Cart: {count};
+}
+
+function ProductList({ products }) {
+ return (
+
+ );
+}
+```
+
+```js src/index.js
+import 'react-devtools-cdt-mcp/register';
+
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+import App from './App';
+import { mountToolConsole } from './ToolConsole';
+
+createRoot(document.getElementById('root')).render();
+mountToolConsole();
+```
+
+```js src/ToolConsole.js hidden
+// A tiny stand-in for chrome-devtools-mcp. It discovers the React tool group
+// the same way chrome-devtools-mcp does (the `devtoolstooldiscovery` event)
+// and lets you call the tools by hand.
+function discoverToolGroup() {
+ let toolGroup = null;
+ const event = new Event('devtoolstooldiscovery');
+ event.respondWith = group => {
+ toolGroup = group;
+ };
+ window.dispatchEvent(event);
+ return toolGroup;
+}
+
+function firstUid(tools, name) {
+ const find = tools.find(t => t.name === 'react_find_components');
+ const result = find.execute({name});
+ return result.results && result.results[0] ? result.results[0].uid : 'r0';
+}
+
+function exampleParams(tools, toolName) {
+ switch (toolName) {
+ case 'react_get_component_tree':
+ return {depth: 4};
+ case 'react_find_components':
+ return {name: 'Row'};
+ case 'react_get_component_by_uid':
+ return {uid: firstUid(tools, 'App'), includeHooks: true};
+ case 'react_get_component_by_dom_element':
+ return {element: '(click "Pick element", then click the page)'};
+ case 'react_get_component_source':
+ case 'react_get_owner_stack_trace':
+ case 'react_get_parent_stack':
+ case 'react_get_owner_stack':
+ return {uid: firstUid(tools, 'CartBadge')};
+ case 'react_start_profiling':
+ return {traceName: 'add-to-cart'};
+ case 'react_stop_profiling':
+ return {};
+ case 'react_get_trace_overview':
+ return {traceName: 'add-to-cart'};
+ case 'react_get_commit_report':
+ return {traceName: 'add-to-cart', commitIndex: 0};
+ default:
+ return {};
+ }
+}
+
+export function mountToolConsole() {
+ const toolGroup = discoverToolGroup();
+ const container = document.createElement('section');
+ container.className = 'tool-console';
+ document.body.appendChild(container);
+ if (toolGroup === null) {
+ container.textContent =
+ 'No tools found. Import react-devtools-cdt-mcp/register before React.';
+ return;
+ }
+ const {tools} = toolGroup;
+ container.innerHTML = `
+
Tool console
+
+
+
+
+
+
+
+
+ `;
+ const select = container.querySelector('select');
+ const description = container.querySelector('.description');
+ const textarea = container.querySelector('textarea');
+ const runButton = container.querySelector('.run');
+ const pickButton = container.querySelector('.pick');
+ const output = container.querySelector('pre');
+ let pickedElement = null;
+
+ for (const tool of tools) {
+ const option = document.createElement('option');
+ option.value = tool.name;
+ option.textContent = tool.name;
+ select.appendChild(option);
+ }
+
+ function selectTool() {
+ const tool = tools.find(t => t.name === select.value);
+ description.textContent = tool.description;
+ textarea.value = JSON.stringify(exampleParams(tools, tool.name));
+ pickButton.hidden = tool.name !== 'react_get_component_by_dom_element';
+ pickedElement = null;
+ }
+
+ function run() {
+ const tool = tools.find(t => t.name === select.value);
+ let params;
+ try {
+ params = JSON.parse(textarea.value || '{}');
+ } catch (error) {
+ output.textContent = 'Invalid JSON: ' + error.message;
+ return;
+ }
+ if (tool.name === 'react_get_component_by_dom_element') {
+ params.element = pickedElement;
+ }
+ const result = tool.execute(params);
+ output.textContent = JSON.stringify(result, null, 2);
+ }
+
+ pickButton.addEventListener('click', () => {
+ output.textContent = 'Click any element in the app above...';
+ document.addEventListener(
+ 'click',
+ event => {
+ if (container.contains(event.target)) {
+ return;
+ }
+ event.preventDefault();
+ event.stopPropagation();
+ pickedElement = event.target;
+ textarea.value = JSON.stringify({
+ element: '<' + event.target.tagName.toLowerCase() + '>',
+ });
+ run();
+ },
+ {capture: true, once: true},
+ );
+ });
+ select.addEventListener('change', selectTool);
+ runButton.addEventListener('click', run);
+ selectTool();
+}
+```
+
+```css src/styles.css hidden
+header { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
+.badge { padding: 2px 8px; border-radius: 10px; background: #087ea4; color: white; }
+ul { padding-left: 20px; max-height: 160px; overflow: auto; }
+.tool-console { margin-top: 20px; padding-top: 12px; border-top: 1px solid #ddd; }
+.tool-console select, .tool-console textarea { width: 100%; font-family: monospace; }
+.tool-console .actions { display: flex; gap: 8px; margin: 8px 0; }
+.tool-console pre { background: #f6f7f9; padding: 8px; max-height: 300px; overflow: auto; }
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "latest",
+ "react-dom": "latest",
+ "react-scripts": "latest",
+ "react-devtools-cdt-mcp": "0.0.1"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+
+
+
+
+The tool console in this sandbox stands in for Chrome DevTools MCP so you can try the tools on this page. In your own app, you don't write any of this code: Chrome DevTools MCP discovers the tools and your agent decides which ones to call.
+
+
+
+---
+
+## Reference {/*reference*/}
+
+### Tools {/*tools*/}
+
+`react-devtools-cdt-mcp` registers a tool group called `react`. Your agent calls these tools through Chrome DevTools MCP.
+
+* `react_get_component_tree`: Returns a snapshot of the component tree.
+* `react_find_components`: Finds components by name.
+* `react_get_component_by_uid`: Returns a component's props and Hooks.
+* `react_get_component_by_dom_element`: Returns the React host component for a DOM element.
+* `react_get_parent_stack`: Returns where a component is mounted in the tree.
+* `react_get_owner_stack`: Returns the components that created a component in their JSX.
+* `react_get_owner_stack_trace`: Returns the owner stack of a component as a stack trace.
+* `react_get_component_source`: Returns where a component is defined.
+* `react_start_profiling`: Starts recording render timing.
+* `react_stop_profiling`: Stops recording render timing.
+* `react_get_trace_overview`: Returns a summary of every commit in a recording.
+* `react_get_commit_report`: Returns which components rendered in a commit and how long each took.
+
+Components are identified by short, stable uids like `"r5"`. A uid stays the same across every tool and across re-renders, but not across page reloads.
+
+Every tool returns a plain, serializable object. If a tool fails, it returns an object with an `error` message instead.
+
+---
+
+### `register(target?)` {/*register*/}
+
+Call `register` to install the React DevTools hook and register the React tools with Chrome DevTools MCP yourself, instead of importing `react-devtools-cdt-mcp/register`.
+
+```js
+import { register } from 'react-devtools-cdt-mcp';
+
+register();
+```
+
+#### Parameters {/*register-parameters*/}
+
+* **optional** `target`: The global object to install the hook on. Defaults to `globalThis`.
+
+#### Returns {/*register-returns*/}
+
+`register` returns an object with two properties:
+
+* `facade`: The installed React DevTools hook and the state the tools read from.
+* `unregister`: A function that stops registering the React tools with Chrome DevTools MCP.
+
+#### Caveats {/*register-caveats*/}
+
+* Call `register` before React initializes, or React won't connect to the hook.
+* Calling `register` again for the same `target` returns the existing registration.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+#### My agent doesn't see any React tools {/*my-agent-doesnt-see-any-react-tools*/}
+
+Check that [third-party developer tools](https://developer.chrome.com/blog/devtools-for-agents-3p-tools) are enabled in your Chrome DevTools MCP setup. Then check that the page selected in Chrome DevTools MCP imports `react-devtools-cdt-mcp/register`. The tools are discovered per page, when the page loads or is selected.
+
+#### The component tree is empty {/*the-component-tree-is-empty*/}
+
+`react-devtools-cdt-mcp/register` was imported after React initialized. Move the import to the very first line of your entry file, before any import that loads `react-dom`.
+
+#### I'm getting an error about a browser-like environment {/*im-getting-an-error-about-a-browser-like-environment*/}
+
+`react-devtools-cdt-mcp/register` throws if it's imported outside a browser, for example during server rendering or in tests. Import it only from client-side code, or call `register()` from the package root yourself where it's safe.
+
+#### Source locations and owner stacks are empty {/*source-locations-and-owner-stacks-are-empty*/}
+
+This data only exists in development builds of React. Make sure you're running your app's development server rather than a production build.
+
+#### A uid stopped working {/*a-uid-stopped-working*/}
+
+Uids don't survive page reloads. After a reload, get fresh uids with `react_get_component_tree` or `react_find_components`.
diff --git a/src/content/reference/dev-tools/react-performance-tracks.md b/src/content/reference/dev-tools/react-performance-tracks.md
index d4757b9ec..1c10823d3 100644
--- a/src/content/reference/dev-tools/react-performance-tracks.md
+++ b/src/content/reference/dev-tools/react-performance-tracks.md
@@ -140,7 +140,7 @@ In development builds, when you click on a component render entry, you can inspe
The Server Requests track visualized all Promises that eventually end up in a React Server Component. This includes any `async` operations like calling `fetch` or async Node.js file operations.
-React will try to combine Promises that are started from inside third-party code into a single span representing the the duration of the entire operation blocking 1st party code.
+React will try to combine Promises that are started from inside third-party code into a single span representing the duration of the entire operation blocking 1st party code.
For example, a third party library method called `getUser` that calls `fetch` internally multiple times will be represented as a single span called `getUser`, instead of showing multiple `fetch` spans.
Clicking on spans will show you a stack trace of where the Promise was created as well as a view of the value that the Promise resolved to, if available.
@@ -155,5 +155,5 @@ If you await a Promise, React will display duration of that Promise. To see all
Different colors are used to indicate the duration of the component render. The darker the color, the longer the duration.
-The Server Components track group will always contain a "Primary" track. If React is able to render Server Components concurrently, it will display addititional "Parallel" tracks.
+The Server Components track group will always contain a "Primary" track. If React is able to render Server Components concurrently, it will display additional "Parallel" tracks.
If more than 8 Server Components are rendered concurrently, React will associate them with the last "Parallel" track instead of adding more tracks.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
index 7517d5f92..87262949d 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
@@ -107,4 +107,4 @@ function Counter({max}) {
Now the setter only runs in response to the click, React finishes the render normally, and `count` never crosses `max`.
-In rare cases, you may need to adjust state based on information from previous renders. For those, follow [this pattern](https://react.dev/reference/react/useState#storing-information-from-previous-renders) of setting state conditionally.
+In rare cases, you may need to adjust state based on information from previous renders. For those, follow [this pattern](/reference/react/useState#storing-information-from-previous-renders) of setting state conditionally.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md
index a5a77e5f6..56810c359 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md
@@ -79,7 +79,7 @@ function Component({user}) {
}
```
-If the side effect sychronizes React state with some external state (or vice versa), use `useEffect`:
+If the side effect synchronizes React state with some external state (or vice versa), use `useEffect`:
```js
// ✅ Good: Synchronization in useEffect
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index 68a67a958..58d07be3f 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -97,7 +97,11 @@ React visualizzerà `` nella `root` e prenderà in carico la gestione del
* Se chiami `render` sulla stessa root più di una volta, React aggiornerà il DOM secondo necessità per riflettere l'ultimo JSX che hai passato. React deciderà quali parti del DOM possono essere riutilizzate e quali devono essere ricreate ["confrontandole"](/learn/preserving-and-resetting-state) con l'albero renderizzato in precedenza. Chiamare `render` sulla stessa root di nuovo è simile a chiamare la [funzione `set`](/reference/react/useState#setstate) sul componente root: React evita aggiornamenti DOM non necessari.
+<<<<<<< HEAD
* Sebbene la renderizzazione sia sincrona una volta avviata, `root.render(...)` non lo è. Ciò significa che il codice dopo `root.render()` può essere eseguito prima che vengano attivati gli Effetti (`useLayoutEffect`, `useEffect`) di quella specifica renderizzazione. Di solito va bene e raramente richiede aggiustamenti. Nei rari casi in cui il timing degli Effetti è importante, puoi avvolgere `root.render(...)` in [`flushSync`](/reference/react-dom/flushSync) per assicurarti che la renderizzazione iniziale avvenga completamente in modo sincrono.
+=======
+* Although rendering is synchronous once it starts, `root.render(...)` is not. This means code after `root.render()` may run before any effects (`useLayoutEffect`, `useEffect`) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap `root.render(...)` in [`flushSync`](/reference/react-dom/flushSync) to ensure the initial render runs fully synchronously.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
```js
const root = createRoot(document.getElementById('root'));
@@ -386,7 +390,11 @@ L'opzione onCaughtError è una funzione chiamata c
1. L'error che è stato lanciato.
2. Un oggetto errorInfo che contiene il componentStack dell'errore.
+<<<<<<< HEAD
Insieme a `onUncaughtError` e `onRecoverableError`, puoi implementare il tuo sistema di segnalazione errori:
+=======
+Together with `onUncaughtError` and `onRecoverableError`, you can implement your own error reporting system:
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
@@ -424,9 +432,15 @@ import {
const container = document.getElementById("root");
const root = createRoot(container, {
+<<<<<<< HEAD
// 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.
+=======
+ // 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 specified unconditionally here for demonstration purposes.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
onCaughtError: onCaughtErrorProd,
onRecoverableError: onRecoverableErrorProd,
onUncaughtError: onUncaughtErrorProd,
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
index d3eb68179..3553fb6cc 100644
--- a/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -131,7 +131,11 @@ Chiamare `root.unmount` smonterà tutti i componenti nella root e "scollegherà"
### Idratare HTML renderizzato lato server {/*hydrating-server-rendered-html*/}
+<<<<<<< HEAD
Se l'HTML della tua app è stato generato da [`react-dom/server`](/reference/react-dom/client/createRoot), devi *idratarlo* sul client.
+=======
+If your app's HTML was generated by [`react-dom/server`](/reference/react-dom/server), you need to *hydrate* it on the client.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
```js [[1, 3, "document.getElementById('root')"], [2, 3, ""]]
import { hydrateRoot } from 'react-dom/client';
@@ -454,9 +458,15 @@ import {
const container = document.getElementById("root");
hydrateRoot(container, , {
+<<<<<<< HEAD
// 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.
+=======
+ // 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 specified unconditionally here for demonstration purposes.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
onCaughtError: onCaughtErrorProd,
onRecoverableError: onRecoverableErrorProd,
onUncaughtError: onUncaughtErrorProd,
diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index 3f141ba77..44e855cb8 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -264,9 +264,15 @@ Invece di un oggetto ref (come quello restituito da [`useRef`](/reference/react/
[Vedi un esempio di utilizzo della callback `ref`.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
+<<<<<<< HEAD
Quando il nodo DOM `
` viene aggiunto allo schermo, React chiamerà la tua callback `ref` con il `node` DOM come argomento. Quando quel nodo DOM `
` viene rimosso, React chiamerà la funzione di cleanup restituita dalla callback.
React chiamerà anche la tua callback `ref` ogni volta che passi una callback `ref` *diversa*. Nell'esempio sopra, `(node) => { ... }` è una funzione diversa a ogni renderizzazione. Quando il tuo componente viene ri-renderizzato, la funzione *precedente* verrà chiamata con `null` come argomento, e la funzione *successiva* verrà chiamata con il nodo DOM.
+=======
+When the `
` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `
` DOM node is removed, React will call the cleanup function returned from the callback.
+
+React will also call your `ref` callback whenever you pass a *different* `ref` callback. In the above example, `(node) => { ... }` is a different function on every render. When your component re-renders, the cleanup function returned by the *previous* function will be called, and the *next* function will be called with the DOM node. If no cleanup function is returned, the *previous* function will be called with `null` as the argument instead.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
#### Parameters {/*ref-callback-parameters*/}
diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index 10e9c6794..459c27e0b 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -38,21 +38,27 @@ To create interactive controls for submitting information, render the [built-in
`