import { useEffect } from 'react'

// Hook: useEffect 
useEffect(() => {
  // Ejecuta esto:
  // 1. cuando el component se monta -> `componentDidMount()`
  // 2. cuando la `informacion` se actualiza -> `componentDidUpdate()`
  return () => {
    // Ejecuta esto:
    // 1. cuando la `informacion` se actualiza -> `componentDidUpdate()`
    // 2. cuando el componente se va a desmontar -> `componentWillUnmount()`
  }
}, [informacion])

// Usos del useEffect

// Cuando el hook `useEffect` no tiene definida una lista de dependencias
// significa estara pendiente de todos los cambios que sufra el componente
// internamente (a causa de alguna actualización en los estados que maneja
// internamente) o externamente (a causa de alguna actualizacion en las 
// propiedades que se le pasa al componente cuando es utilizado). 
useEffect(() => {
  // `componentDidMunt()` + `componentDidUpdate()`
  return () => {} // `componentDidUpdate()` + `componentWilUnmount()`
})

// Cuando el hook `useEffect` tiene definida una lista de dependencias
// pero dicha lista es esta vacia, significa que solo estará pendiente
// a que el componente sea montado.
useEffect(() => {
  // `componentDidMunt()` + `componentDidUpdate()`
  return () => {} // `componentDidUpdate()` + `componentWilUnmount()`
}, [])
// ✍️ Nota: la función anonima que le pasemos a useEffect no puede ser
// asíncrona, por lo que si deseamos ejecutar una función asíncrona
// es necesario crear dicha función dentro y luego usarla como en el siguiente ejemplo.
useEffect(() => {
  const getDataAsync = async () => {}
  getDataAsync()
}, [])

// Cuando el hook `useEffect` tiene definida una lista de dependencias
// significa que estará pendiente de los cambios que cualquiera de las
// dependencias tenga de tal manera que la mantendra sincronizada.
useEffect(() => {
  // `componentDidMunt()` + `componentDidUpdate()`
  return () => {} // `componentDidUpdate()` + `componentWilUnmount()`
}, [...dependencias])
// ✍️ Nota: Es importante declarar la lista de dependencias al definir el useEffect
// y no usar declarar afuera y asignarle el valor al `useEffect` como en el
// siguiente ejemplo:
const dependencias = [primeraDependencia, segundaDependecia, terceraDepdendencia] ❌
useEffect(() => {}, dependencias) ❌
// Tip: crear la lista de depedencias como parte del `useEffect`
useEffect(() => {}, [primeraDependencia, segundaDependecia, terceraDepdendencia]) ✔️
// ✨ Tip: podemos cargar información dinámicamente usando como dependencia el valor
// de algun dato que necesitemos para cargar la información. Un ejemplo puede ser que
// necesitemos cargar los datos del usuario según el identificador del usuario, como
// haremos en el siguiente ejemplo:
useEffect(() => {
  const getDataAsync = async () => {
    try {
      const response = await fetch(`http://awesome.api/user/${userId}/`)
      const data = response.json()
    } catch(e) {
      window.alert(`Error: Ha ocurrido un error al intentar cargar los datos del usuario: ${userId}`)
    }
  }
}, [userId])