Use Callback con useState Hooks en React

Introduciremos useState y usaremos callback con useState hooks en React.

useState en React

La función useState es un gancho incorporado que se puede importar desde el paquete React, lo que nos permite agregar estado a nuestros componentes funcionales.

useState se introdujo a partir de React 16.7. El uso de un gancho useState dentro de un componente de función nos permite crear una parte del estado sin cambiar a los componentes de clase.

Para usar la devolución de llamada con ganchos useState, podemos usar useEffect.

Veamos un ejemplo. Crearemos un botón; en el título de la página de clic de botón se cambiará.

En primer lugar, en app.js dentro de export default function App() declararemos dos constantes click y setClick usando React useState.

# react
  const [click, setClick] = React.useState(0);

Usando useEffect, crearemos una función que comprobará el valor de click. Si el valor de click es igual o mayor que 1, cambiará document.title a Button clicked, y si el valor de click es menor que 1, cambiará document.title a No button clicked.

# react
React.useEffect(() => {
    if (click >= 1) {
      document.title = "Button Clicked!";
    } else {
      document.title = "No Button Clicked!";
    }
  }, [click]);

Ahora, devolveremos el diseño.

# react
<div className="App">
      <h1>Press button to see changes</h1>
      <button type="button" onClick={() => setClick(click + 1)}>
        Change Document Title
      </button>
    </div>

Producción:

Como se ve en el resultado anterior, el título de nuestra página muestra No se hizo clic en ningún botón. Ahora vamos a comprobar después de hacer clic en el botón.

Producción: