useEffect और Side Effects

'use client'
import { useEffect, useState } from 'react'

useEffect(() => {
  // 1. code that touches the outside world
  return () => {
    // 2. optional cleanup
  }
}, [/* 3. dependencies */])

'use client'
import { useEffect, useState } from 'react'

export default function Clock() {
  const [time, setTime] = useState(null) // null on the server, real time in the browser

  useEffect(() => {
    setTime(new Date())
    const id = setInterval(() => setTime(new Date()), 1000) // start
    return () => clearInterval(id)                            // cleanup: stop
  }, []) // [] = run once after the first render

  return <p>⏰ {time ? time.toLocaleTimeString('en-IN') : '--:--:--'}</p>
}

'use client'
import { useEffect, useState } from 'react'

export default function Notes() {
  const [text, setText] = useState('')

  // Load once from the browser's storage
  useEffect(() => {
    setText(localStorage.getItem('note') || '')
  }, [])

  // Save every time `text` changes
  useEffect(() => {
    localStorage.setItem('note', text)
  }, [text])

  return <textarea value={text} onChange={(e) => setText(e.target.value)} rows={4} />
}

'use client'
import { useEffect, useState } from 'react'

export default function LiveSearch() {
  const [q, setQ] = useState('')
  const [results, setResults] = useState([])

  useEffect(() => {
    if (!q) return setResults([])
    const controller = new AbortController()
    const timer = setTimeout(async () => {          // wait 300 ms after typing stops
      const res = await fetch(`/api/courses?q=${encodeURIComponent(q)}`, { signal: controller.signal })
      const data = await res.json()
      setResults(data.courses)
    }, 300)
    return () => { clearTimeout(timer); controller.abort() } // cancel old request
  }, [q])

  return (
    <div>
      <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search courses" />
      <ul>{results.map((c) => <li key={c.slug}>{c.title} – ₹{c.fee}</li>)}</ul>
    </div>
  )
}

// app/courses/page.jsx — Server Component: no useEffect, no loading spinner needed
import { searchCourses } from '@/lib/courses'

export default async function CoursesPage({ searchParams }) {
  const { q = '' } = await searchParams
  const list = searchCourses(q)          // runs on the server
  return <ul>{list.map((c) => <li key={c.slug}>{c.title}</li>)}</ul>
}