From dcf4539c13d9c132926439bc872423e891038c26 Mon Sep 17 00:00:00 2001
From: Luca Nardi <luca.nardi@live.it>
Date: Sat, 16 Feb 2019 09:51:50 +0100
Subject: [PATCH 1/4] Beginning translation of State and Lifecycle page

---
 content/docs/nav.yml                | 2 +-
 content/docs/state-and-lifecycle.md | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index 93c2093ec..7274b507e 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -20,7 +20,7 @@
     - id: components-and-props
       title: Components and Props
     - id: state-and-lifecycle
-      title: State and Lifecycle
+      title: State e Lifecycle
     - id: handling-events
       title: Handling Events
     - id: conditional-rendering
diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 901cbe294..ea61353fd 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -1,6 +1,6 @@
 ---
 id: state-and-lifecycle
-title: State and Lifecycle
+title: State e Lifecycle
 permalink: docs/state-and-lifecycle.html
 redirect_from:
   - "docs/interactivity-and-dynamic-uis.html"
@@ -8,7 +8,7 @@ prev: components-and-props.html
 next: handling-events.html
 ---
 
-This page introduces the concept of state and lifecycle in a React component. You can find a [detailed component API reference here](/docs/react-component.html).
+Questa pagina introduce il concetto di *state* (stato) e *lifecycle* (ciclo di vita) in un componente React. Puoi trovare un [riferimento dettagliato alle API dei componenti qui](/docs/react-component.html).
 
 Consider the ticking clock example from [one of the previous sections](/docs/rendering-elements.html#updating-the-rendered-element). In [Renderizzare Elementi](/docs/rendering-elements.html#rendering-an-element-into-the-dom), we have only learned one way to update the UI. We call `ReactDOM.render()` to change the rendered output:
 

From aa139ea26be0444ef283f4d8bf181d58598d0fd7 Mon Sep 17 00:00:00 2001
From: Luca Nardi <luca.nardi@live.it>
Date: Sat, 23 Feb 2019 10:31:01 +0100
Subject: [PATCH 2/4] Translation complete

---
 content/docs/reference-react-component.md |   6 +-
 content/docs/state-and-lifecycle.md       | 184 +++++++++++-----------
 2 files changed, 95 insertions(+), 95 deletions(-)

diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md
index ecb4d087c..ca7222cab 100644
--- a/content/docs/reference-react-component.md
+++ b/content/docs/reference-react-component.md
@@ -15,7 +15,7 @@ redirect_from:
   - "tips/use-react-with-other-libraries.html"
 ---
 
-This page contains a detailed API reference for the React component class definition. It assumes you're familiar with fundamental React concepts, such as [Components and Props](/docs/components-and-props.html), as well as [State and Lifecycle](/docs/state-and-lifecycle.html). If you're not, read them first.
+This page contains a detailed API reference for the React component class definition. It assumes you're familiar with fundamental React concepts, such as [Components and Props](/docs/components-and-props.html), as well as [State e Lifecycle](/docs/state-and-lifecycle.html). If you're not, read them first.
 
 ## Overview {#overview}
 
@@ -563,7 +563,7 @@ this.setState((state) => {
 
 For more detail, see:
 
-* [State and Lifecycle guide](/docs/state-and-lifecycle.html)
+* [State e Lifecycle](/docs/state-and-lifecycle.html)
 * [In depth: When and why are `setState()` calls batched?](https://stackoverflow.com/a/48610973/458193)
 * [In depth: Why isn't `this.state` updated immediately?](https://github.com/facebook/react/issues/11527#issuecomment-360199710)
 
@@ -637,6 +637,6 @@ The state contains data specific to this component that may change over time. Th
 
 If some value isn't used for rendering or data flow (for example, a timer ID), you don't have to put it in the state. Such values can be defined as fields on the component instance.
 
-See [State and Lifecycle](/docs/state-and-lifecycle.html) for more information about the state.
+See [State e Lifecycle](/docs/state-and-lifecycle.html) for more information about the state.
 
 Never mutate `this.state` directly, as calling `setState()` afterwards may replace the mutation you made. Treat `this.state` as if it were immutable.
diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index ea61353fd..62f1d3583 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -10,14 +10,14 @@ next: handling-events.html
 
 Questa pagina introduce il concetto di *state* (stato) e *lifecycle* (ciclo di vita) in un componente React. Puoi trovare un [riferimento dettagliato alle API dei componenti qui](/docs/react-component.html).
 
-Consider the ticking clock example from [one of the previous sections](/docs/rendering-elements.html#updating-the-rendered-element). In [Renderizzare Elementi](/docs/rendering-elements.html#rendering-an-element-into-the-dom), we have only learned one way to update the UI. We call `ReactDOM.render()` to change the rendered output:
+Considera l'esempio dell'orologio di [una delle sezioni precedenti](/docs/rendering-elements.html#updating-the-rendered-element). In [Renderizzare Elementi](/docs/rendering-elements.html#rendering-an-element-into-the-dom), abbiamo appreso solamente un modo per aggiornare la UI. Chiamiamo `ReactDOM.render()` per cambiare l'output renderizzato:
 
 ```js{8-11}
 function tick() {
   const element = (
     <div>
-      <h1>Hello, world!</h1>
-      <h2>It is {new Date().toLocaleTimeString()}.</h2>
+      <h1>Ciao, mondo!</h1>
+      <h2>Sono le {new Date().toLocaleTimeString()}.</h2>
     </div>
   );
   ReactDOM.render(
@@ -31,16 +31,16 @@ setInterval(tick, 1000);
 
 [**Try it on CodePen**](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)
 
-In this section, we will learn how to make the `Clock` component truly reusable and encapsulated. It will set up its own timer and update itself every second.
+In questa sezione, apprenderemo come rendere il componente `Clock` davvero riutilizzabile ed incapsulato. Esso si occuperà di impostare il proprio timer e di aggiornarsi da solo ogni secondo.
 
-We can start by encapsulating how the clock looks:
+Possiamo iniziare incapsulando l'aspetto dell'orologio:
 
 ```js{3-6,12}
 function Clock(props) {
   return (
     <div>
-      <h1>Hello, world!</h1>
-      <h2>It is {props.date.toLocaleTimeString()}.</h2>
+      <h1>Ciao, mondo!</h1>
+      <h2>Sono le {props.date.toLocaleTimeString()}.</h2>
     </div>
   );
 }
@@ -57,9 +57,9 @@ setInterval(tick, 1000);
 
 [**Try it on CodePen**](http://codepen.io/gaearon/pen/dpdoYR?editors=0010)
 
-However, it misses a crucial requirement: the fact that the `Clock` sets up a timer and updates the UI every second should be an implementation detail of the `Clock`.
+Tuttavia, manca un requisito fondamentale: il fatto che `Clock` imposti un timer ed aggiorni la propria UI ogni secondo dovrebbe essere un dettaglio implementativo di `Clock`.
 
-Ideally we want to write this once and have the `Clock` update itself:
+Idealmente, vorremmo scrivere il seguente codice una volta sola, ed ottenere che `Clock` si aggiorni da solo:
 
 ```js{2}
 ReactDOM.render(
@@ -68,33 +68,33 @@ ReactDOM.render(
 );
 ```
 
-To implement this, we need to add "state" to the `Clock` component.
+Per implementare questo, abbiamo bisogno di aggiungere uno "stato" al componente `Clock`.
 
-State is similar to props, but it is private and fully controlled by the component.
+Lo state (o stato) è simile alle props, ma è privato e completamente controllato dal componente.
 
-We [mentioned before](/docs/components-and-props.html#functional-and-class-components) that components defined as classes have some additional features. Local state is exactly that: a feature available only to classes.
+Abbiamo [detto in precedenza](/docs/components-and-props.html#functional-and-class-components) che i componenti definiti come classi hanno alcune funzionalità aggiuntive. Il local state (stato locale) è esattamente una di queste: una caratteristica disponibile solo nelle classi.
 
-## Converting a Function to a Class {#converting-a-function-to-a-class}
+## Convertire una Funzione in una Classe {#converting-a-function-to-a-class}
 
-You can convert a function component like `Clock` to a class in five steps:
+Puoi convertire un componente funzione come `Clock` in una classe in cinque passaggi:
 
-1. Create an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), with the same name, that extends `React.Component`.
+1. Crea una [classe ES6](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Classes), con lo stesso nome, che estende `React.Component`.
 
-2. Add a single empty method to it called `render()`.
+2. Aggiungi un singolo metodo vuoto chiamato `render()`.
 
-3. Move the body of the function into the `render()` method.
+3. Sposta il corpo della funzione all'interno del metodo `render()`.
 
-4. Replace `props` with `this.props` in the `render()` body.
+4. Sostituisci `props` con `this.props` nel corpo del metodo `render()`.
 
-5. Delete the remaining empty function declaration.
+5. Cancella la dichiarazione della funzione rimasta vuota.
 
 ```js
 class Clock extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
+        <h1>Ciao, mondo!</h1>
+        <h2>Sono le {this.props.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
@@ -103,30 +103,30 @@ class Clock extends React.Component {
 
 [**Try it on CodePen**](http://codepen.io/gaearon/pen/zKRGpo?editors=0010)
 
-`Clock` is now defined as a class rather than a function.
+`Clock` è ora definito da una classe, invece che da una funzione.
 
-The `render` method will be called each time an update happens, but as long as we render `<Clock />` into the same DOM node, only a single instance of the `Clock` class will be used. This lets us use additional features such as local state and lifecycle methods.
+Il metodo `render` viene invocato ogni volta che si verifica un aggiornamento, ma finché renderizziamo `<Clock />` nello stesso nodo del DOM, verrà utilizzata un'unica istanza della classe `Clock`. Questo ci consente di utilizzare funzionalità aggiuntive come il local state e i metodi del lifecycle del componente.
 
-## Adding Local State to a Class {#adding-local-state-to-a-class}
+## Aggiungere il Local State a una Classe {#adding-local-state-to-a-class}
 
-We will move the `date` from props to state in three steps:
+Sposteremo `date` dalle props allo state in tre passaggi:
 
-1) Replace `this.props.date` with `this.state.date` in the `render()` method:
+1) Sostituisci `this.props.date` con `this.state.date` nel metodo `render()`:
 
 ```js{6}
 class Clock extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+        <h1>Ciao, mondo!</h1>
+        <h2>Sono le {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
 }
 ```
 
-2) Add a [class constructor](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor) that assigns the initial `this.state`:
+2) Aggiungi un [costruttore di classe](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Classes#Costruttore) che assegna il valore iniziale di `this.state`:
 
 ```js{4}
 class Clock extends React.Component {
@@ -138,15 +138,15 @@ class Clock extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+        <h1>Ciao, mondo!</h1>
+        <h2>Sono le {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
 }
 ```
 
-Note how we pass `props` to the base constructor:
+Nota come passiamo `props` al costruttore di base:
 
 ```js{2}
   constructor(props) {
@@ -155,9 +155,9 @@ Note how we pass `props` to the base constructor:
   }
 ```
 
-Class components should always call the base constructor with `props`.
+I componenti classe dovrebbero sempre chiamare il costruttore base passando `props` come argomento.
 
-3) Remove the `date` prop from the `<Clock />` element:
+3) Rimuovi la prop `date` dall'elemento `<Clock />`:
 
 ```js{2}
 ReactDOM.render(
@@ -166,9 +166,9 @@ ReactDOM.render(
 );
 ```
 
-We will later add the timer code back to the component itself.
+In seguito ci occuperemo di aggiungere la parte di codice relativa al timer all'interno del componente stesso.
 
-The result looks like this:
+Il risultato dovrebbe avere questo aspetto:
 
 ```js{2-5,11,18}
 class Clock extends React.Component {
@@ -180,8 +180,8 @@ class Clock extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+        <h1>Ciao, mondo!</h1>
+        <h2>Sono le {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
@@ -195,17 +195,17 @@ ReactDOM.render(
 
 [**Try it on CodePen**](http://codepen.io/gaearon/pen/KgQpJd?editors=0010)
 
-Next, we'll make the `Clock` set up its own timer and update itself every second.
+Adesso, faremo in modo che `Clock` imposti il proprio timer e si aggiorni da solo ogni secondo.
 
-## Adding Lifecycle Methods to a Class {#adding-lifecycle-methods-to-a-class}
+## Aggiungere i Metodi del Lifecycle a una Classe {#adding-lifecycle-methods-to-a-class}
 
-In applications with many components, it's very important to free up resources taken by the components when they are destroyed.
+Nelle applicazioni con molti componenti, è molto importante rilasciare le risorse occupate dai componenti quando questi vengono distrutti.
 
-We want to [set up a timer](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) whenever the `Clock` is rendered to the DOM for the first time. This is called "mounting" in React.
+Nel nostro caso, vogliamo [impostare un timer](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) ogni volta che `Clock` è renderizzato nel DOM per la prima volta. Questo è definito "mounting" ("montaggio") in React.
 
-We also want to [clear that timer](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval) whenever the DOM produced by the `Clock` is removed. This is called "unmounting" in React.
+Vogliamo anche [cancellare il timer](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval) ogni volta che il DOM prodotto da `Clock` viene rimosso. Questo è definito "unmounting" ("smontaggio") in React.
 
-We can declare special methods on the component class to run some code when a component mounts and unmounts:
+Possiamo dichiarare alcuni metodi speciali nel componente classe per eseguire del codice quando il componente viene montato e smontato:
 
 ```js{7-9,11-13}
 class Clock extends React.Component {
@@ -225,17 +225,17 @@ class Clock extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+        <h1>Ciao, mondo!</h1>
+        <h2>Sono le {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
 }
 ```
 
-These methods are called "lifecycle methods".
+Questi metodi sono chiamati "metodi del lifecycle" (metodi del ciclo di vita).
 
-The `componentDidMount()` method runs after the component output has been rendered to the DOM. This is a good place to set up a timer:
+Il metodo `componentDidMount()` viene eseguito dopo che l'output del componente è stato renderizzato nel DOM. È un buon punto in cui impostare un timer:
 
 ```js{2-5}
   componentDidMount() {
@@ -246,11 +246,11 @@ The `componentDidMount()` method runs after the component output has been render
   }
 ```
 
-Note how we save the timer ID right on `this`.
+Nota come salviamo l'ID del timer direttamente in `this`.
 
-While `this.props` is set up by React itself and `this.state` has a special meaning, you are free to add additional fields to the class manually if you need to store something that doesn’t participate in the data flow (like a timer ID).
+Mentre `this.props` viene impostato da React stesso e `this.state` ha un significato speciale, sei libero di aggiungere altri campi alla classe se hai bisogno di salvare qualcosa che non partecipa al flusso dei dati (come l'ID di un timer).
 
-We will tear down the timer in the `componentWillUnmount()` lifecycle method:
+Ci occuperemo di cancellare il timer nel metodo del lifecycle `componentWillUnmount()`:
 
 ```js{2}
   componentWillUnmount() {
@@ -258,9 +258,9 @@ We will tear down the timer in the `componentWillUnmount()` lifecycle method:
   }
 ```
 
-Finally, we will implement a method called `tick()` that the `Clock` component will run every second.
+Infine, implementeremo un metodo chiamato `tick()` che verrà invocato dal componente `Clock` ogni secondo.
 
-It will use `this.setState()` to schedule updates to the component local state:
+Il nuovo metodo utilizzerà `this.setState()` per pianificare gli aggiornamenti al local state del componente:
 
 ```js{18-22}
 class Clock extends React.Component {
@@ -289,8 +289,8 @@ class Clock extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+        <h1>Ciao, mondo!</h1>
+        <h2>Sono le {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
@@ -304,49 +304,49 @@ ReactDOM.render(
 
 [**Try it on CodePen**](http://codepen.io/gaearon/pen/amqdNA?editors=0010)
 
-Now the clock ticks every second.
+In questo modo l'orologio scatta ogni secondo.
 
-Let's quickly recap what's going on and the order in which the methods are called:
+Ricapitoliamo velocemente quello che sta succedendo e l'ordine con cui i metodi sono invocati:
 
-1) When `<Clock />` is passed to `ReactDOM.render()`, React calls the constructor of the `Clock` component. Since `Clock` needs to display the current time, it initializes `this.state` with an object including the current time. We will later update this state.
+1) Quando `<Clock />` viene passato a `ReactDOM.render()`, React invoca il costruttore del componente `Clock`. Dal momento che `Clock` ha bisogno di mostrare l'ora corrente, inizializza `this.state` con un oggetto che include l'ora corrente. In seguito, aggiorneremo questo state.
 
-2) React then calls the `Clock` component's `render()` method. This is how React learns what should be displayed on the screen. React then updates the DOM to match the `Clock`'s render output.
+2) In seguito, React invoca il metodo `render()` del componente `Clock`. Questo è il modo in cui React apprende cosa dovrebbe essere visualizzato sullo schermo. React si occupa di aggiornare il DOM in modo da farlo corrispondere all'output della renderizzazione di `Clock`.
 
-3) When the `Clock` output is inserted in the DOM, React calls the `componentDidMount()` lifecycle method. Inside it, the `Clock` component asks the browser to set up a timer to call the component's `tick()` method once a second.
+3) Quando l'output della renderizzazione di `Clock` viene inserito nel DOM, React invoca il metodo del lifecycle `componentDidMount()`. Al suo interno, il componente `Clock` chiede al browser di impostare un timer con cui invocare il metodo `tick()` del componente una volta al secondo.
 
-4) Every second the browser calls the `tick()` method. Inside it, the `Clock` component schedules a UI update by calling `setState()` with an object containing the current time. Thanks to the `setState()` call, React knows the state has changed, and calls the `render()` method again to learn what should be on the screen. This time, `this.state.date` in the `render()` method will be different, and so the render output will include the updated time. React updates the DOM accordingly.
+4) Ogni secondo, il browser invoca il metodo `tick()`. Al suo interno, il componente `Clock` pianifica un aggiornamento della UI invocando `setState()` con un oggetto che contiene la nuova ora corrente. Grazie alla chiamata a `setState()`, React viene informato del fatto che lo state è cambiato e invoca di nuovo il metodo `render()` per sapere che cosa deve essere mostrato sullo schermo. Questa volta, `this.state.date` nel metodo `render()` avrà un valore differente, di conseguenza l'output della renderizzazione includerà l'orario aggiornato. React aggiorna il DOM di conseguenza.
 
-5) If the `Clock` component is ever removed from the DOM, React calls the `componentWillUnmount()` lifecycle method so the timer is stopped.
+5) Se il componente `Clock` dovesse mai essere rimosso dal DOM, React invocherebbe il metodo del lifecycle `componentWillUnmount()` e il timer verrebbe cancellato.
 
-## Using State Correctly {#using-state-correctly}
+## Utilizzare lo Stato Correttamente {#using-state-correctly}
 
-There are three things you should know about `setState()`.
+Ci sono tre cose che devi sapere a proposito di `setState()`.
 
-### Do Not Modify State Directly {#do-not-modify-state-directly}
+### Non Modificare lo Stato Direttamente {#do-not-modify-state-directly}
 
-For example, this will not re-render a component:
+Per esempio, questo codice non farebbe ri-renderizzare un componente:
 
 ```js
 // Wrong
 this.state.comment = 'Hello';
 ```
 
-Instead, use `setState()`:
+Devi invece utilizzare `setState()`:
 
 ```js
 // Correct
 this.setState({comment: 'Hello'});
 ```
 
-The only place where you can assign `this.state` is the constructor.
+L'unico punto in cui puoi assegnare direttamente un valore a `this.state` è nel costruttore.
 
-### State Updates May Be Asynchronous {#state-updates-may-be-asynchronous}
+### Gli Aggiornamenti di Stato Potrebbero Essere Asincroni {#state-updates-may-be-asynchronous}
 
-React may batch multiple `setState()` calls into a single update for performance.
+React potrebbe accorpare più chiamate a `setState()` in un unico aggiornamento per migliorare la performance.
 
-Because `this.props` and `this.state` may be updated asynchronously, you should not rely on their values for calculating the next state.
+Poiché `this.props` e `this.state` potrebbero essere aggiornate in modo asincrono, non dovresti basarti sul loro valore per calcolare lo stato successivo.
 
-For example, this code may fail to update the counter:
+Ad esempio, questo codice potrebbe non riuscire ad aggiornare correttamente il contatore:
 
 ```js
 // Wrong
@@ -355,7 +355,7 @@ this.setState({
 });
 ```
 
-To fix it, use a second form of `setState()` that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument:
+Per effettuare correttamente questa operazione, bisogna utilizzare una seconda forma di `setState()` che accetta in input una funzione invece che un oggetto. Quella funzione riceverà come primo argomento lo stato precedente e come secondo argomento le proprietà, aggiornate al momento in cui l'aggiornamento di stato è applicato:
 
 ```js
 // Correct
@@ -364,7 +364,7 @@ this.setState((state, props) => ({
 }));
 ```
 
-We used an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) above, but it also works with regular functions:
+Qui abbiamo utilizzato una [arrow function](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions), ma puoi utilizzare anche una funzione tradizionale:
 
 ```js
 // Correct
@@ -375,11 +375,11 @@ this.setState(function(state, props) {
 });
 ```
 
-### State Updates are Merged {#state-updates-are-merged}
+### Gli Aggiornamenti di Stato Vengono Applicati Tramite Merge {#state-updates-are-merged}
 
-When you call `setState()`, React merges the object you provide into the current state.
+Quando chiami `setState()`, React effettua il merge dell'oggetto che fornisci nello state corrente.
 
-For example, your state may contain several independent variables:
+Ad esempio, il tuo state potrebbe contenere molte variabili indipendenti:
 
 ```js{4,5}
   constructor(props) {
@@ -391,7 +391,7 @@ For example, your state may contain several independent variables:
   }
 ```
 
-Then you can update them independently with separate `setState()` calls:
+A questo punto puoi aggiornarle indipendentemente con invocazioni separate del metodo `setState()`:
 
 ```js{4,10}
   componentDidMount() {
@@ -409,41 +409,41 @@ Then you can update them independently with separate `setState()` calls:
   }
 ```
 
-The merging is shallow, so `this.setState({comments})` leaves `this.state.posts` intact, but completely replaces `this.state.comments`.
+Quello che viene effettuato è uno ["shallow merge"](https://stackoverflow.com/questions/42731453/deep-and-shallow-merge-in-javascript), quindi `this.setState({comments})` lascia intatto `this.state.posts`, ma sostituisce completamente `this.state.comments`.
 
-## The Data Flows Down {#the-data-flows-down}
+## I Dati Fluiscono Verso il Basso {#the-data-flows-down}
 
-Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn't care whether it is defined as a function or a class.
+Né i componenti genitori né i componenti figli possono sapere se un certo componente è "stateful" o "stateless" (cioè se è dotato o meno di stato) e non dovrebbero preoccuparsi se è definito come funzione o come classe.
 
-This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it.
+Questa è la ragione per cui lo stato è spesso definito locale o incapsulato. Esso non è accessibile a nessun componente a parte quello a cui appartiene.
 
-A component may choose to pass its state down as props to its child components:
+Un componente potrebbe decidere di passare il suo stato ai componenti figli sotto forma di props:
 
 ```js
-<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+<h2>Sono le {this.state.date.toLocaleTimeString()}.</h2>
 ```
 
-This also works for user-defined components:
+Questo funziona anche con i componenti definiti dall'utente:
 
 ```js
 <FormattedDate date={this.state.date} />
 ```
 
-The `FormattedDate` component would receive the `date` in its props and wouldn't know whether it came from the `Clock`'s state, from the `Clock`'s props, or was typed by hand:
+Il componente `FormattedDate` riceve `date` nelle sue props e non può sapere se viene dallo state di `Clock`, dalle proprietà di `Clock` o se è stato inserito a mano:
 
 ```js
 function FormattedDate(props) {
-  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
+  return <h2>Sono le {props.date.toLocaleTimeString()}.</h2>;
 }
 ```
 
 [**Try it on CodePen**](http://codepen.io/gaearon/pen/zKRqNB?editors=0010)
 
-This is commonly called a "top-down" or "unidirectional" data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree.
+Questo è spesso definito flusso di dati "top-down" (dall'alto verso il basso) o "unidirezionale". In questo paradigma, lo stato è sempre posseduto da uno specifico componente, e tutti i dati o la UI derivati da quello stato possono influenzare solamente i componenti "più in basso" nell'albero.
 
-If you imagine a component tree as a waterfall of props, each component's state is like an additional water source that joins it at an arbitrary point but also flows down.
+Se immagini un albero di componenti come una cascata di props, puoi pensare allo stato di ciascun componente come a una sorgente d'acqua aggiuntiva che si unisce alla cascata in un punto qualsiasi e flusice verso il basso insieme al resto dell'acqua.
 
-To show that all components are truly isolated, we can create an `App` component that renders three `<Clock>`s:
+Per mostrare che tutti i componenti sono davvero isolati, possiamo creare un componente `App` che renderizza tre `<Clock>`:
 
 ```js{4-6}
 function App() {
@@ -464,6 +464,6 @@ ReactDOM.render(
 
 [**Try it on CodePen**](http://codepen.io/gaearon/pen/vXdGmd?editors=0010)
 
-Each `Clock` sets up its own timer and updates independently.
+Ciascun `Clock` imposta il proprio timer e si aggiorna indipendentemente dagli altri.
 
-In React apps, whether a component is stateful or stateless is considered an implementation detail of the component that may change over time. You can use stateless components inside stateful components, and vice versa.
+Nelle applicazioni React, il fatto che un componente sia stateful o stateless è considerato un dettaglio implementativo di quel componente, che potrebbe cambiare nel tempo. Puoi utilizzare componenti stateless all'interno di componenti stateful, e viceversa.

From 8715e82a2178a9d2418c29de165bea8cc27be77e Mon Sep 17 00:00:00 2001
From: Alessandro De Blasis <alex@deblasis.net>
Date: Mon, 25 Feb 2019 14:54:03 +0100
Subject: [PATCH 3/4] Apply almost all suggestions from code review

Co-Authored-By: LucaBlackDragon <luca.nardi@live.it>
---
 content/docs/state-and-lifecycle.md | 36 ++++++++++++++---------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 23726a3c8..79eed35ac 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -29,9 +29,9 @@ function tick() {
 setInterval(tick, 1000);
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwoJZk?editors=0010)
+[**Prova su CodePen**](https://codepen.io/gaearon/pen/gwoJZk?editors=0010)
 
-In questa sezione, apprenderemo come rendere il componente `Clock` davvero riutilizzabile ed incapsulato. Esso si occuperà di impostare il proprio timer e di aggiornarsi da solo ogni secondo.
+In questa sezione, apprenderemo come rendere il componente `Clock` davvero riutilizzabile ed incapsulato. Esso si occuperà di impostare il proprio timer e di aggiornarsi ogni secondo.
 
 Possiamo iniziare incapsulando l'aspetto dell'orologio:
 
@@ -55,7 +55,7 @@ function tick() {
 setInterval(tick, 1000);
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/dpdoYR?editors=0010)
+[**Prova su CodePen**](https://codepen.io/gaearon/pen/dpdoYR?editors=0010)
 
 Tuttavia, manca un requisito fondamentale: il fatto che `Clock` imposti un timer ed aggiorni la propria UI ogni secondo dovrebbe essere un dettaglio implementativo di `Clock`.
 
@@ -68,7 +68,7 @@ ReactDOM.render(
 );
 ```
 
-Per implementare questo, abbiamo bisogno di aggiungere uno "stato" al componente `Clock`.
+Per implementare ciò, abbiamo bisogno di aggiungere uno "stato" al componente `Clock`.
 
 Lo state (o stato) è simile alle props, ma è privato e completamente controllato dal componente.
 
@@ -86,7 +86,7 @@ Puoi convertire un componente funzione come `Clock` in una classe in cinque pass
 
 4. Sostituisci `props` con `this.props` nel corpo del metodo `render()`.
 
-5. Cancella la dichiarazione della funzione rimasta vuota.
+5. Rimuovi la dichiarazione della funzione rimasta vuota.
 
 ```js
 class Clock extends React.Component {
@@ -101,13 +101,13 @@ class Clock extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/zKRGpo?editors=0010)
+[**Prova su CodePen**](https://codepen.io/gaearon/pen/zKRGpo?editors=0010)
 
 `Clock` è ora definito da una classe, invece che da una funzione.
 
 Il metodo `render` viene invocato ogni volta che si verifica un aggiornamento, ma finché renderizziamo `<Clock />` nello stesso nodo del DOM, verrà utilizzata un'unica istanza della classe `Clock`. Questo ci consente di utilizzare funzionalità aggiuntive come il local state e i metodi del lifecycle del componente.
 
-## Aggiungere il Local State a una Classe {#adding-local-state-to-a-class}
+## Aggiungere il Local State ad una Classe {#adding-local-state-to-a-class}
 
 Sposteremo `date` dalle props allo state in tre passaggi:
 
@@ -193,11 +193,11 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/KgQpJd?editors=0010)
+[**Prova su CodePen**](https://codepen.io/gaearon/pen/KgQpJd?editors=0010)
 
-Adesso, faremo in modo che `Clock` imposti il proprio timer e si aggiorni da solo ogni secondo.
+Adesso, faremo in modo che `Clock` imposti il proprio timer e si aggiorni ogni secondo.
 
-## Aggiungere i Metodi del Lifecycle a una Classe {#adding-lifecycle-methods-to-a-class}
+## Aggiungere Metodi di Lifecycle ad una Classe {#adding-lifecycle-methods-to-a-class}
 
 Nelle applicazioni con molti componenti, è molto importante rilasciare le risorse occupate dai componenti quando questi vengono distrutti.
 
@@ -302,7 +302,7 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/amqdNA?editors=0010)
+[**Prova su CodePen**](https://codepen.io/gaearon/pen/amqdNA?editors=0010)
 
 In questo modo l'orologio scatta ogni secondo.
 
@@ -316,9 +316,9 @@ Ricapitoliamo velocemente quello che sta succedendo e l'ordine con cui i metodi
 
 4) Ogni secondo, il browser invoca il metodo `tick()`. Al suo interno, il componente `Clock` pianifica un aggiornamento della UI invocando `setState()` con un oggetto che contiene la nuova ora corrente. Grazie alla chiamata a `setState()`, React viene informato del fatto che lo state è cambiato e invoca di nuovo il metodo `render()` per sapere che cosa deve essere mostrato sullo schermo. Questa volta, `this.state.date` nel metodo `render()` avrà un valore differente, di conseguenza l'output della renderizzazione includerà l'orario aggiornato. React aggiorna il DOM di conseguenza.
 
-5) Se il componente `Clock` dovesse mai essere rimosso dal DOM, React invocherebbe il metodo del lifecycle `componentWillUnmount()` e il timer verrebbe cancellato.
+5) Se il componente `Clock` dovesse mai essere rimosso dal DOM, React invocherebbe il metodo del lifecycle `componentWillUnmount()` ed il timer verrebbe cancellato.
 
-## Utilizzare lo Stato Correttamente {#using-state-correctly}
+## Utilizzare Correttamente lo Stato {#using-state-correctly}
 
 Ci sono tre cose che devi sapere a proposito di `setState()`.
 
@@ -349,7 +349,7 @@ Poiché `this.props` e `this.state` potrebbero essere aggiornate in modo asincro
 Ad esempio, questo codice potrebbe non riuscire ad aggiornare correttamente il contatore:
 
 ```js
-// Wrong
+// Sbagliato
 this.setState({
   counter: this.state.counter + this.props.increment,
 });
@@ -358,7 +358,7 @@ this.setState({
 Per effettuare correttamente questa operazione, bisogna utilizzare una seconda forma di `setState()` che accetta in input una funzione invece che un oggetto. Quella funzione riceverà come primo argomento lo stato precedente e come secondo argomento le proprietà, aggiornate al momento in cui l'aggiornamento di stato è applicato:
 
 ```js
-// Correct
+// Giusto
 this.setState((state, props) => ({
   counter: state.counter + props.increment
 }));
@@ -367,7 +367,7 @@ this.setState((state, props) => ({
 Qui abbiamo utilizzato una [arrow function](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions), ma puoi utilizzare anche una funzione tradizionale:
 
 ```js
-// Correct
+// Giusto
 this.setState(function(state, props) {
   return {
     counter: state.counter + props.increment
@@ -437,7 +437,7 @@ function FormattedDate(props) {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/zKRqNB?editors=0010)
+[**Prova su CodePen**](https://codepen.io/gaearon/pen/zKRqNB?editors=0010)
 
 Questo è spesso definito flusso di dati "top-down" (dall'alto verso il basso) o "unidirezionale". In questo paradigma, lo stato è sempre posseduto da uno specifico componente, e tutti i dati o la UI derivati da quello stato possono influenzare solamente i componenti "più in basso" nell'albero.
 
@@ -462,7 +462,7 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/vXdGmd?editors=0010)
+[**Prova su CodePen**](https://codepen.io/gaearon/pen/vXdGmd?editors=0010)
 
 Ciascun `Clock` imposta il proprio timer e si aggiorna indipendentemente dagli altri.
 

From f0af0bff58dd7b287157634d9ff9ae27ee578d47 Mon Sep 17 00:00:00 2001
From: Luca Nardi <luca.nardi@live.it>
Date: Mon, 25 Feb 2019 14:55:50 +0100
Subject: [PATCH 4/4] Rewording of paragraph "I Dati Fluiscono Verso il Basso"

---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 79eed35ac..189281054 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -413,7 +413,7 @@ Quello che viene effettuato è uno ["shallow merge"](https://stackoverflow.com/q
 
 ## I Dati Fluiscono Verso il Basso {#the-data-flows-down}
 
-Né i componenti genitori né i componenti figli possono sapere se un certo componente è "stateful" o "stateless" (cioè se è dotato o meno di stato) e non dovrebbero preoccuparsi se è definito come funzione o come classe.
+Né i componenti genitori né i componenti figli possono sapere se un certo componente è "stateful" o "stateless" (cioè se è dotato o meno di stato) e non dovrebbero preoccuparsi del fatto di essere definiti come funzione o come classe.
 
 Questa è la ragione per cui lo stato è spesso definito locale o incapsulato. Esso non è accessibile a nessun componente a parte quello a cui appartiene.