Use Callback con useState Hooks en React
![Use Callback con useState Hooks en React](/img/React/ag-feature-image---usestate-callback.webp)
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:
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn