import { useState } from 'react'

// Hook: useState
const [estado, definirEstado] = useState(estadoInicial)

// Usos del useState

// Podemos manejar multiples estados y utilizar dichos estados
// como el estado inicial de otro estado
const [firstName, setFirstName] = useState('')
const [lastName, setLastName] = useState('')
const [fullName, setFullName] = useState(`${lastName}, ${firstName}`)
// ✍️ Nota: cuando el valor a actualizar es generado apartir del estado actual
// es mejor usar una funcion para definir el siguiente estado. Por ejemplo:
// Cuando creamos un contador usamos el estado anterior para calcular el 
// siguiente estado -> countador = countador + 1
// Por lo que la forma correcta de definir el estado es mediante una función
// de tal manera de que nos aseguremos que estamos usando el último estado.
const [count, setCount] = useState(0)
// No es seguro usar el estado fuera del metodo del metodo para actualizar el estado
// si es que queremos calcular el nuevo estado basado en el estado actual.
setCount(count + 1) ❌
// ✨ Tip: Podemos pasar una funcion como parametro el cual recibe el estado actual.
// Y por lo tanto podemos calcular el siguiente estado de forma segura.
setCount(currentCount => currentCount + 1) ✔️