useState

Vista previa del material en texto

UseState 
 
`useState` es un hook en React que permite a los componentes funcionales tener estado interno y 
reaccionar a cambios en ese estado. Fue introducido en React como parte de la versión 16.8 y se ha 
convertido en una de las principales formas de manejar el estado en componentes funcionales. 
 
El hook `useState` es una función que se utiliza para declarar una variable de estado en un 
componente funcional. Esta función recibe un valor inicial como argumento y devuelve un array con 
dos elementos: 
 
1. La primera posición del array es el valor actual del estado. 
2. La segunda posición es una función que permite actualizar el valor del estado. 
 
Sintaxis del hook `useState`: 
 
----------------------------------------------------------------------------------------------------------- 
const [estado, setEstado] = useState(valorInicial); 
-------------------------------------------------------------------------------------------------------- 
 
Ejemplo de cómo usar `useState` en un componente funcional: 
 
--------------------------------------------------------------------------------------------------------- 
import React, { useState } from 'react'; 
 
const Contador = () => { 
 const [count, setCount] = useState(0); 
 
 const incrementar = () => { 
 setCount(count + 1); 
 }; 
 
 const decrementar = () => { 
 setCount(count - 1); 
 }; 
 
 return ( 
 <div> 
 <p>Contador: {count}</p> 
 <button onClick={incrementar}>Incrementar</button> 
 <button onClick={decrementar}>Decrementar</button> 
 </div> 
 ); 
}; 
 
export default Contador; 
----------------------------------------------------------------------------------------------------------- 
 
En este ejemplo, hemos creado un componente funcional llamado `Contador` que utiliza `useState` 
para declarar una variable de estado llamada `count` con un valor inicial de `0`. Luego, hemos 
definido dos funciones `incrementar` y `decrementar` que utilizan `setCount` para actualizar el valor 
del estado `count`. 
 
Cada vez que hacemos clic en los botones "Incrementar" o "Decrementar", el estado se actualiza y el 
componente se vuelve a renderizar con el nuevo valor del contador. Esto muestra cómo `useState` 
nos permite agregar estado a los componentes funcionales y actualizar la interfaz de usuario en 
función de esos cambios de estado.