diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md
index 6fd01da4f..136ffb393 100644
--- a/content/docs/hooks-state.md
+++ b/content/docs/hooks-state.md
@@ -6,49 +6,49 @@ next: hooks-effect.html
prev: hooks-overview.html
---
-*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class.
+Gli *Hooks* sono stati aggiunti in React 16.8. Ti permettono di utilizzare `state` ed altre funzioni di React senza dover scrivere una classe.
-The [introduction page](/docs/hooks-intro.html) used this example to get familiar with Hooks:
+La [pagina di introduzione](/docs/hooks-intro.html) usa questo esempio per familiarizzare con gli Hooks:
```js{4-5}
import React, { useState } from 'react';
-function Example() {
- // Declare a new state variable, which we'll call "count"
- const [count, setCount] = useState(0);
+function Esempio() {
+ // Dichiara una nuova variable di stato, che chiameremo "contatore"
+ const [contatore, setContatore] = useState(0);
return (
-
You clicked {count} times
-
);
}
```
-We'll start learning about Hooks by comparing this code to an equivalent class example.
+Inizieremo a conoscere gli Hooks confrontando questo codice con un esempio con una classe equivalente.
-## Equivalent Class Example {#equivalent-class-example}
+## Esempio Classe Equivalente {#equivalent-class-example}
-If you used classes in React before, this code should look familiar:
+Se hai già utilizzato le classi in React, il seguente codice dovrebbe risultarti familiare:
```js
-class Example extends React.Component {
+class Esempio extends React.Component {
constructor(props) {
super(props);
this.state = {
- count: 0
+ contatore: 0
};
}
render() {
return (
-
You clicked {this.state.count} times
-
);
@@ -56,225 +56,225 @@ class Example extends React.Component {
}
```
-The state starts as `{ count: 0 }`, and we increment `state.count` when the user clicks a button by calling `this.setState()`. We'll use snippets from this class throughout the page.
+Lo stato inizia con `{ contatore: 0 }`, e `state.contatore` viene incrementato quando l'utente clicca il bottone chiamando `this.setState()`. In questa pagina utilizzeremo degli snippets partendo da questa classe.
->Note
+>Nota
>
->You might be wondering why we're using a counter here instead of a more realistic example. This is to help us focus on the API while we're still making our first steps with Hooks.
+>Ti starai chiedendo perché stiamo utilizzando un contatore invece che un esempio più realistico. La ragione è aiutare a concentrarci sulle API durante i nostri primi passi con gli Hooks.
-## Hooks and Function Components {#hooks-and-function-components}
+## Hooks e Componenti Funzione {#hooks-and-function-components}
-As a reminder, function components in React look like this:
+Come promemoria, i componenti funzione in React sono così:
```js
-const Example = (props) => {
- // You can use Hooks here!
+const Esempio = (props) => {
+ // Qui puoi utilizzare gli Hooks!
return ;
}
```
-or this:
+o così:
```js
-function Example(props) {
- // You can use Hooks here!
+function Esempio(props) {
+ // Qui puoi utilizzare gli Hooks!
return ;
}
```
-You might have previously known these as "stateless components". We're now introducing the ability to use React state from these, so we prefer the name "function components".
+Potresti aver precedentemente conosciuto questi come "componenti senza stato". Ora stiamo introducendo la possibilità di utilizzare lo state React, quindi preferiamo il nome di "componenti funzione".
-Hooks **don't** work inside classes. But you can use them instead of writing classes.
+Gli Hooks **non** funzionano nelle classi. Ma puoi utilizzarli invece di scrivere classi.
-## What's a Hook? {#whats-a-hook}
+## Cos'è un Hook? {#whats-a-hook}
-Our new example starts by importing the `useState` Hook from React:
+Il nostro nuovo esempio inizia importando l'Hook `useState` da React:
```js{1}
import React, { useState } from 'react';
-function Example() {
+function Esempio() {
// ...
}
```
-**What is a Hook?** A Hook is a special function that lets you "hook into" React features. For example, `useState` is a Hook that lets you add React state to function components. We'll learn other Hooks later.
+**Cos'è un Hook?** Un Hook è una speciale funzione che ti permette di "agganciare" funzionalità di React. Per esempio, `useState` è un Hook che ti permette di aggiungere lo state React nei componenti funzione. Impareremo altri Hooks più tardi.
-**When would I use a Hook?** If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component. We're going to do that right now!
+**Quando dovrei utilizzare un Hook?** Se scrivi un componente funzione e capisci di aver bisogno dello state, prima avresti dovuto convertirlo in classe. Adesso puoi utilizzare un Hook dentro il componente funzione esistente. Entriamo subito nel dettaglio!
->Note:
+>Nota:
>
->There are some special rules about where you can and can't use Hooks within a component. We'll learn them in [Rules of Hooks](/docs/hooks-rules.html).
+>Ci sono alcune regole speciali su quando puoi e non puoi utilizzare gli Hooks dentro un componente. Le impareremo in [Regole degli Hooks](/docs/hooks-rules.html).
-## Declaring a State Variable {#declaring-a-state-variable}
+## Dichiarare una Variabile di Stato {#declaring-a-state-variable}
-In a class, we initialize the `count` state to `0` by setting `this.state` to `{ count: 0 }` in the constructor:
+In una classe, inizializziamo lo state `contatore` a `0` impostando `this.state` a `{ contatore: 0 }` nel costruttore:
```js{4-6}
-class Example extends React.Component {
+class Esempio extends React.Component {
constructor(props) {
super(props);
this.state = {
- count: 0
+ contatore: 0
};
}
```
-In a function component, we have no `this`, so we can't assign or read `this.state`. Instead, we call the `useState` Hook directly inside our component:
+In un componente funzione, non abbiamo alcun `this`, quindi non possiamo assegnare o leggere `this.state`. Invece, chiamiamo l'Hook `useState` direttamente dentro il nostro componente:
```js{4,5}
import React, { useState } from 'react';
-function Example() {
- // Declare a new state variable, which we'll call "count"
- const [count, setCount] = useState(0);
+function Esempio() {
+ // Dichiara una nuova variabile di stato, che chiameremo "contatore"
+ const [contatore, setContatore] = useState(0);
```
-**What does calling `useState` do?** It declares a "state variable". Our variable is called `count` but we could call it anything else, like `banana`. This is a way to "preserve" some values between the function calls — `useState` is a new way to use the exact same capabilities that `this.state` provides in a class. Normally, variables "disappear" when the function exits but state variables are preserved by React.
+**Cosa succede chiamando `useState`?** Quest'ultimo dichiara una "variabile di stato". La nostra variabile è chiamata `contatore` ma potremmo chiamarla in qualsiasi altro modo, anche `banana`. È un modo per "conservare" qualche valore durante le chiamate di funzione — `useState` è un modo nuovo di usare la stessa esatta funzionalità che `this.state` fornisce ad una classe. Normalmente, le variabili "scompaiono" quando la funzione esce mentre le variabili di stato vengono preservate da React.
-**What do we pass to `useState` as an argument?** The only argument to the `useState()` Hook is the initial state. Unlike with classes, the state doesn't have to be an object. We can keep a number or a string if that's all we need. In our example, we just want a number for how many times the user clicked, so pass `0` as initial state for our variable. (If we wanted to store two different values in state, we would call `useState()` twice.)
+**Cosa passiamo a `useState` come argomento?** L'unico argomento per l'Hook `useState()` è lo stato iniziale. A differenza delle classi, lo state non deve essere un oggetto. Possiamo tenere un numero o una stringa se è quello di cui abbiamo bisogno. Nel nostro esempio, vogliamo solo un numero che conti quante volte l'utente ha cliccato, quindi passiamo `0` come stato iniziale alla nostra variabile. (Se volessimo memorizzare due valori distinti nello stato, dovremmo chiamare `useState()` due volte.)
-**What does `useState` return?** It returns a pair of values: the current state and a function that updates it. This is why we write `const [count, setCount] = useState()`. This is similar to `this.state.count` and `this.setState` in a class, except you get them in a pair. If you're not familiar with the syntax we used, we'll come back to it [at the bottom of this page](/docs/hooks-state.html#tip-what-do-square-brackets-mean).
+**Cosa ritorna `useState`?** Ritorna una coppia di valori: lo stato corrente ed una funzione che lo aggiorna. Questo è il motivo per cui scriviamo `const [contatore, setContatore] = useState()`. E' simile a `this.state.contatore` e `this.setState` in una classe, eccetto per il fatto che li ottieni in coppia. Se non sei familiare con la sintassi che abbiamo utilizzato, ci torneremo [in fondo a questa pagina](/docs/hooks-state.html#tip-what-do-square-brackets-mean).
-Now that we know what the `useState` Hook does, our example should make more sense:
+Adesso che sappiamo cosa fa l'Hook `useState`, il nostro esempio dovrebbe avere più senso:
```js{4,5}
import React, { useState } from 'react';
-function Example() {
- // Declare a new state variable, which we'll call "count"
- const [count, setCount] = useState(0);
+function Esempio() {
+ // Dichiara una nuova variabile di stato, che chiameremo "contatore"
+ const [contatore, setContatore] = useState(0);
```
-We declare a state variable called `count`, and set it to `0`. React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current `count`, we can call `setCount`.
+Dichiariamo una variabile di stato chiamata `contatore`, e la settiamo a `0`. React ricorderà il suo valore corrente durante i re-render, e fornirà il valore più recente alla nostra funzione. Se vogliamo aggiornare l'attuale `contatore`, possiamo chiamare `setContatore`.
->Note
+>Nota
>
->You might be wondering: why is `useState` not named `createState` instead?
+>Potresti chiederti: perchè `useState` non è stato chiamato `createState`?
>
->"Create" wouldn't be quite accurate because the state is only created the first time our component renders. During the next renders, `useState` gives us the current state. Otherwise it wouldn't be "state" at all! There's also a reason why Hook names *always* start with `use`. We'll learn why later in the [Rules of Hooks](/docs/hooks-rules.html).
+>"Create" non sarebbe perfettamente accurato perché lo stato è solo creato la prima volta che il nostro componente viene renderizzato. Durante i successivi render, `useState` ci fornisce lo stato corrente. Altrimenti non sarebbe "stato"! C'è anche una ragione per cui i nomi degli Hook iniziano *sempre* con `use`. Lo scopriremo più tardi in [Regole degli Hooks](/docs/hooks-rules.html).
-## Reading State {#reading-state}
+## Leggere lo Stato {#reading-state}
-When we want to display the current count in a class, we read `this.state.count`:
+Quando vogliamo visualizzare l'attuale contatore in una classe, leggiamo `this.state.contatore`:
```js
-
You clicked {this.state.count} times
+
Hai cliccato {this.state.contatore} volte
```
-In a function, we can use `count` directly:
+In una funzione, possiamo usare direttamente `contatore`:
```js
-
You clicked {count} times
+
Hai cliccato {contatore} volte
```
-## Updating State {#updating-state}
+## Aggiornare lo Stato {#updating-state}
-In a class, we need to call `this.setState()` to update the `count` state:
+In una classe, dobbiamo chiamare `this.setState()` per aggiornare lo stato `contatore`:
```js{1}
-