// Side Effects = Alles außerhalb von React:
// ✅ API Calls
// ✅ Subscriptions (WebSockets, Events)
// ✅ DOM Manipulation
// ✅ localStorage
// ✅ Timer (setTimeout, setInterval)
// ✅ Logging

// ❌ NICHT im Component Body!
function Component() {
  fetch('/api/data') // ❌ Wird bei jedem Render ausgeführt!
  localStorage.setItem('key', 'value') // ❌ Bei jedem Render!

  return <div>Content</div>
}

import { useEffect, useState } from 'react'

function Component() {
  const [data, setData] = useState(null)

  // useEffect läuft NACH dem Render
  useEffect(() => {
    // Side Effect Code hier
    console.log('Component rendered!')

    // Optional: Cleanup Function
    return () => {
      console.log('Cleanup!')
    }
  }, []) // Dependency Array

  return <div>{data}</div>
}

// 1️⃣ Kein Array = Bei JEDEM Render
useEffect(() => {
  console.log('Läuft bei jedem Render')
})

// 2️⃣ Leeres Array = Nur einmal (Mount)
useEffect(() => {
  console.log('Läuft nur beim ersten Render')
}, [])

// 3️⃣ Mit Dependencies = Wenn sich Werte ändern
useEffect(() => {
  console.log('Läuft wenn count sich ändert')
}, [count])

// 4️⃣ Mehrere Dependencies
useEffect(() => {
  console.log('Läuft wenn count ODER name sich ändern')
}, [count, name])

function UserProfile({ userId }) {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    // Async function innerhalb useEffect
    async function fetchUser() {
      try {
        setLoading(true)
        const response = await fetch(`/api/users/${userId}`)
        const data = await response.json()
        setUser(data)
      } catch (err) {
        setError(err.message)
      } finally {
        setLoading(false)
      }
    }

    fetchUser()
  }, [userId]) // Neu laden wenn userId sich ändert

  if (loading) return <div>Loading...</div>
  if (error) return <div>Error: {error}</div>
  return <div>{user?.name}</div>
}

function Timer() {
  const [seconds, setSeconds] = useState(0)

  useEffect(() => {
    // Timer starten
    const interval = setInterval(() => {
      setSeconds(s => s + 1)
    }, 1000)

    // Cleanup: Timer stoppen
    return () => {
      clearInterval(interval)
    }
  }, [])

  return <div>{seconds} Sekunden</div>
}

// Event Listener Cleanup
function WindowSize() {
  const [width, setWidth] = useState(window.innerWidth)

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth)

    // Event Listener hinzufügen
    window.addEventListener('resize', handleResize)

    // Cleanup: Event Listener entfernen
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [])

  return <div>Window width: {width}px</div>
}

// useEffect: Nach dem Render (meistens nutzen!)
useEffect(() => {
  // Läuft NACH dem Paint
  console.log('useEffect')
}, [])

// useLayoutEffect: VOR dem Paint (für DOM-Messungen)
import { useLayoutEffect } from 'react'

useLayoutEffect(() => {
  // Läuft VOR dem Paint
  // Nutze nur wenn du DOM messen/ändern musst
  const height = divRef.current.offsetHeight
  console.log('useLayoutEffect', height)
}, [])