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 a partir 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 
// siguienteestado (contador = contador + 1) por lo que la forma correcta es definir 
// el estado es mediante una función de tal manera de que podamos acceder de manera segura
// a el último estado.
const [count, setCount] = useState(0)
// ✍️ Nota: 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, sobre todo
// si dicha acción se ejecuta de manera asíncrona.
setCount(count + 1) ❌
// ✨ Tip: podemos pasar una función como parametro el cual recibe el estado actual,
// por lo tanto podemos calcular el siguiente estado de forma segura.
setCount(currentCount => currentCount + 1) ✔️