Come usare lo useState Hook ?

Che cosa realizzeremo in questo progetto ?

Utilizzere gli useState Hook per creare una app per tenere traccia dei nostri appuntamenti. Saremo in grado di rimuovere i singoli appuntamenti e di ricaricarli tutti.

Cosa è lo useState Hook ?

E' una funzione che restituisce il valore dello stato e una funzione per aggiornarlo.

 const [state, setState] = useState(initialState);

Durante il rendering iniziale, lo stato restituito (state) è lo stesso del valore passato come primo argomento (initialState).

La funzione setState viene utilizzata per aggiornare lo stato. Accetta un nuovo valore di stato e causa un nuovo rendering del componente.

Come si usa lo useState ?

Lo useState si utilizza per tenere traccia del valore di un elemento tra i render e update di un componente.

La prima cosa da fare sarà quindi quella di andare a definire uno state che contenga un array di appuntementi (normale lista di oggetti con id, nome, stato, e immagine) che importeremo con il nome data.

const [people, setPeople] = useState(data);

Successivamente mapperemo il nostro state person e per ogni elemento presente nell'array ritorneremo un componente Person

<ul className="user-list">
        {props.data.map((person) => (
          <li key={person.id}>
            {" "}
        <Person {...person} removeItem={props.removeItem} />
          </li>
        ))}
</ul>

Come aggiornare uno state in React

Come possiamo vedere il nostro componente Person accetta anche un parametro removeItem. A questo parametro passeremo una funzione che al click rimuoverà il singolo appuntamento.

const removeItem = (id) => {
    setPeople((oldValue) => oldValue.filter((value) => value.id !== id));
  };

Questa funzione prenderà il valore atttuale del nostro state person e usando il filter method per ritornare tutti i valori tranne quello a cui corrisponde l'id dell'elemento da rimuovere.

Definiamo anche una funzione per settare nuovamente lo state al suo valore iniziale

 const reloadAllItem = () => {
    setPeople(data);
  };

Caratteristiche dello useState Hook

Quando usiamo i nostri hook dobbiamo sempre essere consapevoli di quello che succede all'interno della nostra React App. Aggiornare uno state causa un nuovo render del nostro componente e quindi se non gestito in maniera appropriata triggererà un eventuale useEffect all'interno del componente.

Un'altra caratteristiche interessante è che l'aggiornamento dello state non è istantaneo. Facciamo un esempio.

const [state, setState] = useState(false);

const updateElement = () => {
setState(true)
   if(state){
      console.log('ciao')
   }
}

In questo caso aggiorneremo il valore a

true

ma dentro il nostro if otterremo false, o più precisamente il valore dello state prima di aggiornarlo.

Il functional return

La soluzione a questo problema è il functional return, ovvero ritoarnare il valore del nostro nuovo state utilizzando una funzione.

const updateElement = () => {
   setState((oldValue) => {
      if(!oldValue){
        console.log('ciao')
      }
      return !oldValue
   })
}