useState Hook ### ### Introducción ### El Hook useState es uno de los Hooks más utilizados en React. Permite agregar estado a los componentes funcionales. Al usar useState, puedes declarar variables de estado dentro de tu componente funcional y actualizarlas conforme cambian los datos. ### Sintaxis básica ### useState se invoca con el valor inicial del estado y devuelve un array con dos elementos: la variable de estado actual y una función para actualizar esta variable. javascript import React, { useState } from 'react'; function ExampleComponent() { // Declarar una nueva variable de estado, la llamaremos 'count' const [count, setCount] = useState(0); return ( <div> <p>Has hecho clic {count} veces</p> <button onClick={() => setCount(count + 1)}> Haz clic aquí </button> </div> ); } ### Descripción del ejemplo ### En este ejemplo: - useState(0) declara una nueva variable de estado count y la inicializa en 0. - setCount es la función que actualiza el estado de count. Cada vez que el usuario hace clic en el botón, setCount incrementa count en 1. ### Tipos de valores para el estado ### useState puede manejar diferentes tipos de valores: - Numeros: useState(0) - Strings: useState('Hola') - Booleans: useState(true) - Objetos: useState({ key: 'valor' }) - Arrays: useState([1, 2, 3]) ### Uso de funciones para actualizar el estado ### También puedes pasar una función a setState que recibe el estado actual como argumento y devuelve el nuevo estado. Esto es útil cuando el nuevo estado depende del estado anterior. javascript import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Has hecho clic {count} veces</p> <button onClick={() => setCount(prevCount => prevCount + 1)}> Haz clic aquí </button> </div> ); } En este ejemplo, prevCount es el estado anterior, y setCount(prevCount => prevCount + 1) usa ese valor para calcular el nuevo estado. ### Limitaciones ### Es importante notar que useState no hace una fusión del estado cuando se actualiza. Si el estado es un objeto, debes asegurarte de mantener las propiedades que no estás actualizando. javascript const [state, setState] = useState({ name: 'Alice', age: 25 }); setState({ ...state, age: 26 }); // Mantenemos 'name' y actualizamos 'age' [Placeholder para imagen sobre el flujo de trabajo de useState: Diagrama que muestra el flujo de datos al usar el Hook useState, incluyendo la declaración de estado, la actualización del estado, y la re-renderización del componente.]