Reactividad de estados en React

Veamos ahora cómo funciona la reactividad. Hace que cuando se modifica un estado, los cambios se muestren instantáneamente en la pantalla.

Veamos un ejemplo. Supongamos que tenemos un estado con el nombre de un producto:

jsxconst [name, setName] = useState('prod');

Mostremos el nombre del producto en el maquetado:

jsxreturn <div>
  <span>{name}</span>
</div>;

Hagamos ahora un botón, al pulsar el cual nuestro estado se modificará:

jsxreturn <div>
  <span>{name}</span>
  <button onClick={clickHandler}>btn</button>
</div>;

En el manejador de clic usamos la función setName, para establecer un nuevo nombre para el producto:

jsxfunction clickHandler() {
  setName('xxxx');
}

Juntemos todo nuestro código. Resultará que tras pulsar el botón el texto cambiará instantáneamente al nuevo valor:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  function clickHandler() {
    setName('xxxx');
  }
  
  return <div>
    <span>{name}</span>
    <button onClick={clickHandler}>btn</button>
  </div>;
}

El uso de funciones manejadoras separadas no es obligatorio. Se puede usar una función flecha anónima:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
    <button onClick={() => setName('xxxx')}>btn</button>
  </div>;
}