Quando creiamo un function component, non abbiamo a disposizione costruttori o altri metodi per inizializzare lo stato quindi dobbiamo utilizzare un'altra tecnica: gli hook. Nel caso specifico, il metodo useState è l'hook da utilizzare. Questo metodo accetta in input un valore che rappresenta il valore iniziale da dare a una variabile dello stato e resituisce in output un oggetto con una variabile che rappresenta lo stato e un metodo da invocare per modificare la variabile nello stato.

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(count + 1);
  }
  return (
    <div>
      <p>Counter: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

In questo esempio, importiamo il metodo useState da react e poi lo usiamo per inizializzare una variabile nello stato con valore zero. La chiamata al metodo torna un oggetto che tramite deconstruction riportiamo a delle variabili. La variabile count contiene il valore e viene aggiornata ogni volta che modifichiamo il suo valore tramite il metodo setCount.
Ovviamente, andando a modificare il valore dello stato, ogni chiamata a setCount causa il rendering del component.