Guida all'uso di useState in React

La barra della password passa da debole a forte mentre scrivi. React ricorda ciò che scrivi tramite lo stato.

Lo stato contiene i dati. Monitora ciò che scrivi o clicchi.

Immagina di scrivere il tuo nome.

  • Il tuo stato iniziale è una stringa vuota.
  • Scrivi J.
  • Chiami una funzione per aggiornare lo stato da "" a "J".
  • Scrivi o.
  • Chiami la funzione per cambiare lo stato in "Jo".

Ogni volta che aggiorni lo stato, React esegue il re-render della UI. Il re-render significa che React cancella la vecchia visualizzazione e ne disegna una nuova con i dati aggiornati.

Perché non usare variabili comuni? Una variabile comune cambia nel tuo codice ma non aggiorna lo schermo. Gli utenti vedranno dati obsoleti. Lo stato di React risolve questo problema collegando i tuoi dati alla tua UI.

Come usare useState:

  1. Importalo da React. import { useState } from 'react';

  2. Dichiaralo. const [age, setAge] = useState(20);

In questo esempio:

  • age è il tuo valore attuale.
  • setAge è la funzione per cambiare il valore.
  • 20 è il tuo valore iniziale.

Prova subito. Apri un progetto React. Crea un contatore. Clicca un pulsante per aggiornare il conteggio. Osserva lo schermo cambiare istantaneamente.

Fonte: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i