El hook useState és un dels hooks més fonamentals i utilitzats en React. Permet afegir estat a components funcionals, una característica que abans només estava disponible en components de classe. En aquesta secció, aprendrem com utilitzar useState per gestionar l'estat dins dels nostres components funcionals.

useState és una funció que retorna un array amb dos elements:

1. L'estat actual: El valor actual de l'estat.
2. Una funció per actualitzar l'estat: Una funció que permet modificar l'estat.

• state: El valor actual de l'estat.
• setState: La funció que s'utilitza per actualitzar l'estat.
• initialState: El valor inicial de l'estat.

Vegem un exemple bàsic d'un component que utilitza useState per gestionar un comptador.

1. Importació de useState: Importem useState des de React.
2. Declaració de l'estat: Utilitzem useState per declarar una variable d'estat count inicialitzada a 0 i una funció setCount per actualitzar aquest estat.
3. Renderització: Renderitzem un paràgraf que mostra el valor actual de count i un botó que, quan es fa clic, incrementa el valor de count en 1.

Crea un component que permeti a l'usuari introduir text en un camp d'entrada i mostri aquest text en temps real.

1. Crea un nou component anomenat TextInput.
2. Utilitza useState per gestionar l'estat del text introduït.
3. Renderitza un camp d'entrada i un paràgraf que mostri el text introduït.

1. Declaració de l'estat: Utilitzem useState per declarar una variable d'estat text inicialitzada a una cadena buida i una funció setText per actualitzar aquest estat.
2. Camp d'entrada: Renderitzem un camp d'entrada amb el valor lligat a text i un controlador d'esdeveniments onChange que actualitza text amb el valor introduït per l'usuari.
3. Paràgraf: Renderitzem un paràgraf que mostra el valor actual de text.

1. No inicialitzar l'estat: Assegura't de proporcionar un valor inicial a useState.
2. No utilitzar la funció d'actualització correctament: Recorda que setState reemplaça l'estat anterior amb el nou valor proporcionat.

• Evita actualitzacions innecessàries: Si l'actualització de l'estat depèn del valor anterior, considera utilitzar la funció de callback de setState.

  setCount(prevCount => prevCount + 1);
  

• Gestió de múltiples estats: Pots utilitzar múltiples crides a useState per gestionar diferents parts de l'estat dins del mateix component.

En aquesta secció, hem après com utilitzar el hook useState per afegir estat als components funcionals de React. Hem vist un exemple bàsic d'un comptador i hem creat un component pràctic que mostra text en temps real. Amb useState, podem gestionar l'estat de manera senzilla i eficient dins dels nostres components funcionals.