Merge pull request #322 from reactjs/sync-9b3c3f4e

Sync with reactjs.org @ 9b3c3f4

Author: deblasis

content/community/conferences.md

@@ -12,11 +12,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {#upcoming-conferences}
 
-### render(ATL) 2021 {#render-atlanta-2021} 
-September 13-15, 2021. Atlanta, GA, USA
-
-[Website](https://renderatl.com) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl)
-
 ### React Brussels 2021 {#react-brussels-2021} 
 October 15, 2021 - remote event
 
@@ -38,7 +33,7 @@ November 3-4, 2021 - remote event
 
 [Website](https://geekle.us/react) - [LinkedIn](https://www.linkedin.com/events/javascriptglobalsummit6721691514176720896/) 
 
-## React Advanced London 2021 {#react-advanced-2021} 
+### React Advanced London 2021 {#react-advanced-2021} 
 October 20-22, 2021. London, UK & remote
 
 [Website](https://reactadvanced.com) - [Twitter](https://twitter.com/reactadvanced)
@@ -50,6 +45,11 @@ November 12-14, 2021 - remote event
 
 ## Past Conferences {#past-conferences}
 
+### render(ATL) 2021 {#render-atlanta-2021} 
+September 13-15, 2021. Atlanta, GA, USA
+
+[Website](https://renderatl.com) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl)
+
 ### React Native EU 2021 {#react-native-eu-2021}
 September 1-2, 2021 - remote event
 

content/community/support.md

@@ -28,7 +28,6 @@ Each community consists of many thousands of React users.
 * [Hashnode's React community](https://hashnode.com/n/reactjs)
 * [Reactiflux online chat](https://discord.gg/reactiflux)
 * [Reddit's React community](https://www.reddit.com/r/reactjs/)
-* [Spectrum's React community](https://spectrum.chat/react)
 
 ## News {#news}
 

content/docs/add-react-to-a-website.md

@@ -149,7 +149,7 @@ return (
 
 Questi due frammenti di codice sono equivalenti. Anche se **JSX è [completamente opzionale](/docs/react-without-jsx.html)**, molte persone trovano che sia utile per scrivere il codice della UI -- non solo con React ma anche con altre librerie!
 
-Puoi fare esperimenti con JSX utilizzando [questo convertitore online](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3).
+Puoi fare esperimenti con JSX utilizzando [questo convertitore online](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.15.7).
 
 ### Prova JSX Velocemente {#quickly-try-jsx}
 

content/docs/error-boundaries.md

@@ -47,7 +47,7 @@ class ErrorBoundary extends React.Component {
       return <h1>Something went wrong.</h1>;
     }
 
-    return this.props.children; 
+    return this.props.children;
   }
 }
 ```
@@ -126,7 +126,7 @@ I contenitori di errore preservano la natura dichiarativa di React e si comporta
 
 ## Che dire del gestore degli eventi? {#how-about-event-handlers}
 
-I contenitori di errori **non catturano** gli errori all'interno dei gestori degli eventi. 
+I contenitori di errori **non catturano** gli errori all'interno dei gestori degli eventi.
 
 React non ha necessità di contenitori di errori per i gestori degli eventi. A differenza dei metodi di render e dei metodi del ciclo di vita, i gestori degli eventi non si hanno durante il rendering. Quindi se questi lanciano un errore, React continua comunque a sapere cosa visualizzare sullo schermo.
 

content/docs/hooks-faq.md

@@ -914,8 +914,6 @@ Note that you can still choose whether to pass the application *state* down as p
 >Note
 >
 >We recommend to [pass `dispatch` down in context](#how-to-avoid-passing-callbacks-down) rather than individual callbacks in props. The approach below is only mentioned here for completeness and as an escape hatch.
->
->Also note that this pattern might cause problems in the [concurrent mode](/blog/2018/03/27/update-on-async-rendering.html). We plan to provide more ergonomic alternatives in the future, but the safest solution right now is to always invalidate the callback if some value it depends on changes.
 
 In some rare cases you might need to memoize a callback with [`useCallback`](/docs/hooks-reference.html#usecallback) but the memoization doesn't work very well because the inner function has to be re-created too often. If the function you're memoizing is an event handler and isn't used during rendering, you can use [ref as an instance variable](#is-there-something-like-instance-variables), and save the last committed value into it manually:
 

content/docs/testing-environments.md

@@ -55,4 +55,4 @@ Sometimes, you may not want to mock timers. For example, maybe you're testing an
 
 End-to-end tests are useful for testing longer workflows, especially when they're critical to your business (such as payments or signups). For these tests, you'd probably want to test how a real browser renders the whole app, fetches data from the real API endpoints, uses sessions and cookies, navigates between different links. You might also likely want to make assertions not just on the DOM state, but on the backing data as well (e.g. to verify whether the updates have been persisted to the database).
 
-In this scenario, you would use a framework like [Cypress](https://www.cypress.io/) or a library like [puppeteer](https://github.com/GoogleChrome/puppeteer) so you can navigate between multiple routes and assert on side effects not just in the browser, but potentially on the backend as well.
+In this scenario, you would use a framework like [Cypress](https://www.cypress.io/), [Playwright](https://playwright.dev) or a library like [Puppeteer](https://pptr.dev/) so you can navigate between multiple routes and assert on side effects not just in the browser, but potentially on the backend as well.

content/docs/thinking-in-react.md

@@ -129,15 +129,15 @@ Bene, abbiamo deciso che il nostro stato vive in `TabellaProdottiRicercabile`. P
 
 Puoi cominciare a vedere come si comporta l'applicazione: imposta `testoRicerca` a `"Palla"` e aggiornala. Vedrai che la tabella dati è stata aggiornata correttamente.
 
-## Step 5: Invertire il Flusso Dati {#step-5-add-inverse-data-flow}
+## Passo 5: Invertire il Flusso Dati {#step-5-add-inverse-data-flow}
 
 [Prova su CodeSandbox](embedded-codesandbox://thinking-in-react/3?view=split&editorsize=70)
 
 Fino ad ora, abbiamo implementato una applicazione che renderizza correttamente con props e state che fluiscono in basso nella gerarchia. Adesso è il momento di supportare il flusso inverso: dobbiamo fare in modo che i componenti form più in basso nella gerarchia, possano aggiornare lo stato in `TabellaProdottiRicercabile`.
 
 React rende questo flusso dati esplicito in modo da facilitare la comprensione del funzionamento del programma, tuttavia richiede la scrittura di un po' più codice rispetto ad altre soluzioni con flusso dati bidirezionale (*two-way data binding*).
 
-Se provi a scrivere qualcosa o a selezionare la casella nella versione vista nel passo precedente, noterai che React ignora completamente il tuo input. Si tratta di un fatto intenzionale, abbiamo infatti impostato la prop `value` dell'`input` per essere sempre uguale allo `state` che riceve da da `TabellaProdottiRicercabile`.
+Se provi a scrivere qualcosa o a selezionare la casella nella precedente versione (passo 4), noterai che React ignora completamente il tuo input. Si tratta di un fatto intenzionale, abbiamo infatti impostato la prop `value` dell'`input` per essere sempre uguale allo `state` che riceve da da `TabellaProdottiRicercabile`.
 
 Proviamo a pensare a cosa vogliamo far sì che avvenga. Vogliamo fare in modo che a seconda di come l'utente alteri il form, lo stato verrà alterato di conseguenza. Dato che i componenti possono alterare solamente il proprio stato, `TabellaProdottiRicercabile` passerà [callbacks](https://it.wikipedia.org/wiki/Callback) a `BarraRicerca` che verranno invocate ogni qual volta lo stato deve essere aggiornato. Possiamo utilizzare l'evento `onChange` degli input per ricevere tale notifica. Le callbacks passate da `TabellaProdottiRicercabile` chiameranno `setState()` facendo sì che la applicazione venga aggiornata.
 

content/images/team/salazarm.jpeg

@@ -78,7 +78,7 @@ Questo setup richiede qualche piccolo sforzo aggiuntivo ma ti permette di comple
 npx create-react-app my-app
 ```
 
-3. Elimina tutti i files nella cartella `src/` del nuovo progetto 
+3. Elimina tutti i files nella cartella `src/` del nuovo progetto
 
 > Nota Bene:
 >
@@ -228,7 +228,7 @@ Congratulazioni! Hai appena "passato una prop" da un componente genitore Board a
 
 ### Creare un Componente Interattivo {#making-an-interactive-component}
 
-Andiamo a riempire il componente Square con una "X" quando lo clicchiamo. 
+Andiamo a riempire il componente Square con una "X" quando lo clicchiamo.
 Prima di tutto, modifichiamo il tag `button` che è ritornato dalla funzione `render()` del componente Square:
 
 ```javascript{4}
@@ -357,7 +357,7 @@ Possiamo pensare che Board debba solo richiedere ad ogni Square il relativo stat
 
 **Per recuperare dati dai componenti figli a partire dal componente padre, o per far comunicare tra di loro due componenti figli, bisogna definire uno stato condiviso nel componente padre. Quest'ultimo può passare di nuovo lo stato in basso, ai figli, usando props; ciò mantiene i componenti figli in sincronia tra di loro ed ovviamente con il componente padre.**
 
-Elevare lo stato nel componente padre è un processo comune quando i componenti React vengono rifattorizzati -- proviamo già che ci siamo. 
+Elevare lo stato nel componente padre è un processo comune quando i componenti React vengono rifattorizzati -- proviamo già che ci siamo.
 
 Cominciamo aggiungendo un costruttore a Board ed impostandone lo stato iniziale così da contenere un array di 9 nulls. Questi 9 nulls corrispondono ai 9 quadrati:
 
@@ -455,7 +455,7 @@ Quando uno Square viene cliccato, viene richiamata la funzione `onClick` provvis
 2. Quando il bottone viene cliccato, React richiama l'event handler `onClick` che è definito nel metodo `render()` di Square.
 3. Questo event handler chiama a sua volta `this.props.onClick()`. La prop `onClick` di Square è stata però specificata da Board.
 4. Dato che Board ha passato `onClick={() => this.handleClick(i)}` a Square, di conseguenza Square richiama `handleClick(i)` di Board quando viene cliccato.
-5. Non abbiamo ancora definito alcun metodo `handleClick()`, per questo il nostro codice non funziona al momento. Infatti, se clicchi su uno Square adesso, dovresti ricevere un messaggio di errore che dice qualcosa del tipo: "this.handleClick is not a function". 
+5. Non abbiamo ancora definito alcun metodo `handleClick()`, per questo il nostro codice non funziona al momento. Infatti, se clicchi su uno Square adesso, dovresti ricevere un messaggio di errore che dice qualcosa del tipo: "this.handleClick is not a function".
 
 >Nota Bene
 >
@@ -544,7 +544,7 @@ var nuovoGiocatore = Object.assign({}, giocatore, {punti: 2});
 
 // In alternativa potremmo usare la sintassi "spread" (vedi nota di seguito), con la quale scriveremmo:
 // var nuovoGiocatore = {...giocatore, punti: 2};
-// 
+//
 ```
 >Per maggiori informazioni sulla sintassi [spread](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
 
@@ -590,7 +590,7 @@ Abbiamo cambiato `this.props` in `props` in entrambi i casi.
 
 >Nota Bene
 >
->Quando abbiamo convertito Square in un componente funzione, abbiamo anche cambiato `onClick={() => this.props.onClick()}` nella versione più corta `onClick={props.onClick}` (nota l'assenza delle parentesi da *entrambi* i lati). 
+>Quando abbiamo convertito Square in un componente funzione, abbiamo anche cambiato `onClick={() => this.props.onClick()}` nella versione più corta `onClick={props.onClick}` (nota l'assenza delle parentesi da *entrambi* i lati).
 
 ### Turni {#taking-turns}
 
@@ -998,7 +998,7 @@ In JavaScript, gli array hanno un [metodo `map()`](https://developer.mozilla.org
 ```js
 const numeri = [1, 2, 3];
 const raddoppiati = numeri.map(x => x * 2); // [2, 4, 6]
-``` 
+```
 
 Usando il metodo `map`, possiamo mappare il nostro storico delle mosse in elementi React che rappresentano i bottoni sullo schermo, e visualizzare una lista di bottoni per "saltare" alle mosse precedenti.
 
@@ -1047,6 +1047,8 @@ Usiamo `map` su `history` nel metodo `render` di Game:
 
 **[Visualizza tutto il codice scritto finora](https://codepen.io/gaearon/pen/EmmGEa?editors=0010)**
 
+Man mano che iteriamo l'array `history`, la variabile `step` si riferisce al valore corrente dell'elemento `history`, mentre `move` si riferisce all'indice dell'elemento `history`. Qui siamo interessati solo a `move`, per questo `step` non viene assegnato a nulla.
+
 Per ogni mossa nello storico delle mosse, creeremo una lista di elementi `<li>` che contengono un bottone `<button>`. Il bottone avrà un handler `onClick` che richiama un metodo chiamato `this.jumpTo()`. Non abbiamo ancora implementato `jumpTo()`. Per adesso, dovremmo essere in grado di vedere una lista delle mosse avvenute oltre ad un messaggio di errore nella console dei [developer tools](#developer-tools) che dice:
 
 > Attenzione:
@@ -1150,7 +1152,7 @@ Poi, definitiamo il metodo `jumpTo` in Game per aggiornare quello `stepNumber`.
 
 È ora di apportare qualche cambiamento al metodo `handleClick` di Game che verrà richiamato quando si clicca su un quadrato.
 
-Lo stato `stepNumber` che abbiamo appena aggiunto adesso riflette la mossa visualizzata. Dopo ogni nuova mossa, dobbiamo aggiornare `stepNumber` aggiungendo `stepNumber: history.length` come parte del parametro alla chiamata `this.setState`. Ciò farà in modo di non restare bloccati nella stessa mossa ogni qual volta ne viene effettuata una nuova. 
+Lo stato `stepNumber` che abbiamo appena aggiunto adesso riflette la mossa visualizzata. Dopo ogni nuova mossa, dobbiamo aggiornare `stepNumber` aggiungendo `stepNumber: history.length` come parte del parametro alla chiamata `this.setState`. Ciò farà in modo di non restare bloccati nella stessa mossa ogni qual volta ne viene effettuata una nuova.
 
 Sostituiremo anche `this.state.history` con `this.state.history.slice(0, this.state.stepNumber + 1)`. Ciò farà in modo che nel caso in cui volessimo "andare indietro nel tempo" e poi fare una nuova mossa da quel punto, possiamo buttare via tutta la storia "futura" che diverrebbe incorretta visto che in un certo senso la stiamo riscrivendo.
 

content/tutorial/tutorial.md

@@ -3,6 +3,8 @@
   "trailingSlash": false,
   "redirects": [
     { "source": "/tips/controlled-input-null-value.html", "destination": "/docs/forms.html#controlled-input-null-value", "permanent": false },
+    { "source": "/link/switch-to-createroot", "destination": "https://github.com/reactwg/react-18/discussions/5", "permanent": false },
+    { "source": "/server-components", "destination": "/blog/2020/12/21/data-fetching-with-react-server-components.html", "permanent": false },
     { "source": "/concurrent", "destination": "/docs/concurrent-mode-intro.html", "permanent": false },
     { "source": "/hooks", "destination": "/docs/hooks-intro.html", "permanent": false },
     { "source": "/tutorial", "destination": "/tutorial/tutorial.html", "permanent": false },