useEffect(
  () => {
    // Код побічної дії (setup)
    return () => {
      // Опціональна функція очищення (cleanup)
    };
  },
  [dep1, dep2, ...] // Масив залежностей
);

import { useState, useEffect } from 'react'

export function DocumentTitleExample() {
    const [count, setCount] = useState<number>(0)

    // Ефект синхронізує заголовок документа зі станом count
    useEffect(() => {
        document.title = `Ви натиснули ${count} разів`
    }, [count]) // Перезапускається щоразу, коли count змінюється

    return (
        <div>
            <p>Відкрийте заголовок вкладки браузера — він змінюється!</p>
            <p>Поточне значення: {count}</p>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <button onClick={() => setCount(0)}>Скинути</button>
        </div>
    )
}

import { useState, useEffect } from 'react'

interface User {
    id: number
    name: string
    email: string
}

export function UserProfileLoader() {
    const [user, setUser] = useState<User | null>(null)
    const [isLoading, setIsLoading] = useState<boolean>(true)

    useEffect(() => {
        // Симулюємо мережевий запит
        const fetchUser = async () => {
            setIsLoading(true)
            // У реальному застосунку тут був би fetch('/api/user')
            await new Promise((resolve) => setTimeout(resolve, 1000))

            setUser({
                id: 1,
                name: 'Олександра Петренко',
                email: 'oleksandra@example.com',
            })
            setIsLoading(false)
        }

        fetchUser()
    }, []) // Порожній масив: виконується лише при монтуванні

    if (isLoading) {
        return <p>Завантаження профілю...</p>
    }

    if (!user) {
        return <p>Помилка завантаження даних</p>
    }

    return (
        <div>
            <h3>{user.name}</h3>
            <p>{user.email}</p>
        </div>
    )
}

import { useState, useEffect } from 'react'

export function LiveClock() {
    const [time, setTime] = useState<Date>(new Date())

    useEffect(() => {
        console.log('⏰ Запуск таймера')

        // Створюємо інтервал, що оновлює час кожну секунду
        const intervalId = setInterval(() => {
            setTime(new Date())
        }, 1000)

        // Функція очищення: зупиняємо інтервал
        return () => {
            console.log('🛑 Очищення таймера')
            clearInterval(intervalId)
        }
    }, []) // Порожній масив: створюємо інтервал лише один раз

    return (
        <div>
            <h3>Поточний час</h3>
            <p style={{ fontSize: '2rem', fontWeight: 'bold' }}>{time.toLocaleTimeString('uk-UA')}</p>
        </div>
    )
}

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'

createRoot(document.getElementById('root')!).render(
    <StrictMode>
        <App />
    </StrictMode>,
)

import { useState, useEffect } from 'react'

interface WindowSize {
    width: number
    height: number
}

export function WindowSizeTracker() {
    const [windowSize, setWindowSize] = useState<WindowSize>({
        width: window.innerWidth,
        height: window.innerHeight,
    })

    useEffect(() => {
        const handleResize = (): void => {
            setWindowSize({
                width: window.innerWidth,
                height: window.innerHeight,
            })
        }

        // Підписуємося на подію зміни розміру вікна
        window.addEventListener('resize', handleResize)

        // Функція очищення: видаляємо слухача
        return () => {
            window.removeEventListener('resize', handleResize)
        }
    }, []) // Порожній масив: підписка створюється один раз

    return (
        <div>
            <h3>Розмір вікна браузера</h3>
            <p>Ширина: {windowSize.width}px</p>
            <p>Висота: {windowSize.height}px</p>
            <p style={{ fontSize: '0.875rem', color: '#64748b' }}>Спробуйте змінити розмір вікна браузера</p>
        </div>
    )
}

import { useState, useEffect } from 'react'

interface Post {
    id: number
    title: string
    body: string
}

export function PostLoader({ postId }: { postId: number }) {
    const [post, setPost] = useState<Post | null>(null)
    const [isLoading, setIsLoading] = useState<boolean>(true)
    const [error, setError] = useState<string | null>(null)

    useEffect(() => {
        // Оголошуємо async функцію всередині ефекту
        const fetchPost = async (): Promise<void> => {
            setIsLoading(true)
            setError(null)

            try {
                const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)

                if (!response.ok) {
                    throw new Error(`HTTP помилка: ${response.status}`)
                }

                const data: Post = await response.json()
                setPost(data)
            } catch (err) {
                setError(err instanceof Error ? err.message : 'Невідома помилка')
            } finally {
                setIsLoading(false)
            }
        }

        // Викликаємо функцію одразу
        fetchPost()
    }, [postId]) // Перезавантажуємо дані при зміні postId

    if (isLoading) {
        return <p>Завантаження публікації...</p>
    }

    if (error) {
        return <p style={{ color: '#ef4444' }}>Помилка: {error}</p>
    }

    if (!post) {
        return <p>Публікацію не знайдено</p>
    }

    return (
        <article>
            <h3>{post.title}</h3>
            <p>{post.body}</p>
        </article>
    )
}

import { useState, useEffect } from 'react'

export function SearchLogger({ query }: { query: string }) {
    const [searchCount, setSearchCount] = useState<number>(0)

    useEffect(() => {
        if (query.trim() !== '') {
            console.log(`Пошуковий запит: "${query}"`)
            setSearchCount((prev) => prev + 1)
        }
    }, [query]) // Ефект залежить від пропса query

    return (
        <div>
            <p>
                Поточний запит: <strong>{query || '(порожньо)'}</strong>
            </p>
            <p>Кількість пошуків: {searchCount}</p>
        </div>
    )
}

export function SearchDemo() {
    const [inputValue, setInputValue] = useState<string>('')

    return (
        <div>
            <input
                type="text"
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
                placeholder="Введіть пошуковий запит..."
            />
            <SearchLogger query={inputValue} />
        </div>
    )
}

// ❌ Погано: інтервал ніколи не зупиняється
useEffect(() => {
    setInterval(() => {
        console.log('Tick')
    }, 1000)
}, [])

// ✅ Правильно: інтервал очищається при розмонтуванні
useEffect(() => {
    const id = setInterval(() => {
        console.log('Tick')
    }, 1000)

    return () => clearInterval(id)
}, [])

// ❌ Погано: ефект виконується після кожного рендеру
useEffect(() => {
    fetchData()
}) // Масив залежностей відсутній!

// ✅ Правильно: явно вказуємо порожній масив або залежності
useEffect(() => {
    fetchData()
}, [])

// ❌ Погано: новий об'єкт створюється при кожному рендері
const options = { page: 1, limit: 10 }

useEffect(() => {
    fetchData(options)
}, [options]) // options — це щоразу новий об'єкт!

// ✅ Правильно: передавайте примітивні значення або useMemo
useEffect(() => {
    fetchData({ page: 1, limit: 10 })
}, []) // Або витягніть page і limit окремо у залежності

// ❌ Погано: useEffect не може повертати Promise
useEffect(async () => {
    const data = await fetchData()
    setData(data)
}, [])

// ✅ Правильно: оголосіть async функцію всередині
useEffect(() => {
    const loadData = async () => {
        const data = await fetchData()
        setData(data)
    }

    loadData()
}, [])