diff --git a/content/docs/nav.yml b/content/docs/nav.yml index c724c1d92..570f004bf 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -20,7 +20,7 @@ - id: components-and-props title: Componenti e Props - id: state-and-lifecycle - title: State and Lifecycle + title: State e Lifecycle - id: handling-events title: Gestione degli Eventi - id: conditional-rendering diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index eead9fdae..abbbb8f79 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -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 e9b6b92f5..189281054 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,16 +8,16 @@ 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: +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 = (
-

Hello, world!

-

It is {new Date().toLocaleTimeString()}.

+

Ciao, mondo!

+

Sono le {new Date().toLocaleTimeString()}.

); ReactDOM.render( @@ -29,18 +29,18 @@ 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 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 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 (
-

Hello, world!

-

It is {props.date.toLocaleTimeString()}.

+

Ciao, mondo!

+

Sono le {props.date.toLocaleTimeString()}.

); } @@ -55,11 +55,11 @@ 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) -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,65 +68,65 @@ ReactDOM.render( ); ``` -To implement this, we need to add "state" to the `Clock` component. +Per implementare ciò, 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. Rimuovi la dichiarazione della funzione rimasta vuota. ```js class Clock extends React.Component { render() { return (
-

Hello, world!

-

It is {this.props.date.toLocaleTimeString()}.

+

Ciao, mondo!

+

Sono le {this.props.date.toLocaleTimeString()}.

); } } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/zKRGpo?editors=0010) +[**Prova su CodePen**](https://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 `` 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 `` 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 ad 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 (
-

Hello, world!

-

It is {this.state.date.toLocaleTimeString()}.

+

Ciao, mondo!

+

Sono le {this.state.date.toLocaleTimeString()}.

); } } ``` -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 (
-

Hello, world!

-

It is {this.state.date.toLocaleTimeString()}.

+

Ciao, mondo!

+

Sono le {this.state.date.toLocaleTimeString()}.

); } } ``` -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 `` element: +3) Rimuovi la prop `date` dall'elemento ``: ```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 (
-

Hello, world!

-

It is {this.state.date.toLocaleTimeString()}.

+

Ciao, mondo!

+

Sono le {this.state.date.toLocaleTimeString()}.

); } @@ -193,19 +193,19 @@ 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) -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 ogni secondo. -## Adding Lifecycle Methods to a Class {#adding-lifecycle-methods-to-a-class} +## Aggiungere Metodi di Lifecycle ad 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 (
-

Hello, world!

-

It is {this.state.date.toLocaleTimeString()}.

+

Ciao, mondo!

+

Sono le {this.state.date.toLocaleTimeString()}.

); } } ``` -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 (
-

Hello, world!

-

It is {this.state.date.toLocaleTimeString()}.

+

Ciao, mondo!

+

Sono le {this.state.date.toLocaleTimeString()}.

); } @@ -302,72 +302,72 @@ 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) -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 `` 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 `` 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()` ed il timer verrebbe cancellato. -## Using State Correctly {#using-state-correctly} +## Utilizzare Correttamente lo Stato {#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 +// Sbagliato this.setState({ counter: this.state.counter + this.props.increment, }); ``` -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 +// Giusto this.setState((state, props) => ({ counter: state.counter + props.increment })); ``` -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 +// Giusto this.setState(function(state, props) { return { counter: state.counter + props.increment @@ -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 del fatto di essere definiti 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 -

It is {this.state.date.toLocaleTimeString()}.

+

Sono le {this.state.date.toLocaleTimeString()}.

``` -This also works for user-defined components: +Questo funziona anche con i componenti definiti dall'utente: ```js ``` -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

It is {props.date.toLocaleTimeString()}.

; + return

Sono le {props.date.toLocaleTimeString()}.

; } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/zKRqNB?editors=0010) +[**Prova su CodePen**](https://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 ``s: +Per mostrare che tutti i componenti sono davvero isolati, possiamo creare un componente `App` che renderizza tre ``: ```js{4-6} function App() { @@ -462,8 +462,8 @@ 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) -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.