🟢 Basics – React + Next.js की नींव · Lesson 06
useState और Events
State क्या है?
State वह data है जो component याद रखता है और जो user के page पर रहते हुए बदल सकता है — counter, search box का text, menu खुला है या नहीं। State बदलने पर React component को re-render करता है ताकि screen नई value दिखाए।
Props
- Parent से आते हैं
- Child में read-only
- Function arguments जैसे
State
- Component की अपनी
- Setter function से बदलती है
- Component की अपनी memory जैसी
'use client' क्यों?
Next.js App Router में हर component default रूप से Server Component होता है — server पर चलता है और HTML भेजता है। Server Components useState या onClick use नहीं कर सकते, क्योंकि इनके लिए browser चाहिए। File की सबसे पहली line में 'use client' लिखकर उसे Client Component बनाइए।
💡
'use client' वाली files छोटी रखें (button, form, menu) और pages को Server Components रहने दें। इससे site तेज़ रहती है।Example 1: Counter
JSX – components/Counter.jsx
'use client' // this file runs in the browser too
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0) // [current value, function to change it]
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>+1</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
)
}JSX – app/page.jsx
// app/page.jsx — a Server Component can render a Client Component
import Counter from '@/components/Counter'
export default function Page() {
return (
<main>
<h1>State demo</h1>
<Counter />
</main>
)
}Re-render कैसे होता है
useState(0) दो चीज़ों का array देता है: current value और setter function। Setter call करने से variable तुरंत नहीं बदलता; वह React से component को नई value के साथ फिर चलाने को कहता है।
Example 2: Controlled input
Controlled input अपना text state में रखता है। React ही सच का एकमात्र source है, इसलिए validation या live count दिखाना आसान है।
JSX – components/NameBox.jsx
'use client'
import { useState } from 'react'
export default function NameBox() {
const [name, setName] = useState('')
return (
<div>
<input
value={name} // value comes FROM state
onChange={(e) => setName(e.target.value)} // typing updates state
placeholder="Type your name"
/>
<p>{name ? `Hello, ${name}!` : 'Start typing…'}</p>
<p>{name.length} / 20 characters</p>
</div>
)
}Example 3: Mobile menu दिखाना/छिपाना
JSX – components/MobileMenu.jsx
'use client'
import { useState } from 'react'
export default function MobileMenu() {
const [open, setOpen] = useState(false)
return (
<nav>
<button aria-expanded={open} onClick={() => setOpen(!open)}>
{open ? '✕ Close' : '☰ Menu'}
</button>
{open && (
<ul>
<li>Home</li><li>Courses</li><li>Contact</li>
</ul>
)}
</nav>
)
}EduSite का header phone पर menu बिल्कुल ऐसे ही खोलता है:
Objects और arrays update करना
State को कभी सीधे न बदलें। हमेशा spread operator ..., filter या map से नया object या array बनाएँ:
JSX
const [student, setStudent] = useState({ name: 'Riya', cls: 10 })
// ✅ copy the old object, change one field
setStudent({ ...student, cls: 11 })
const [todos, setTodos] = useState(['Revise loops'])
// ✅ add item (new array)
setTodos([...todos, 'Practise arrays'])
// ✅ remove item
setTodos(todos.filter((t) => t !== 'Revise loops'))
// ❌ wrong — mutating does NOT re-render
student.cls = 11
todos.push('x')Example 4: छोटा enquiry form
JSX – components/EnquiryForm.jsx
'use client'
import { useState } from 'react'
export default function EnquiryForm() {
const [form, setForm] = useState({ name: '', course: 'python' })
const [sent, setSent] = useState(false)
function handleChange(e) {
setForm({ ...form, [e.target.name]: e.target.value }) // one handler for all fields
}
function handleSubmit(e) {
e.preventDefault() // stop the full page reload
if (form.name.trim().length < 2) return alert('Please enter your name')
setSent(true)
}
if (sent) return <p>✅ Thanks {form.name}, we will call you about {form.course}.</p>
return (
<form onSubmit={handleSubmit}>
<input name="name" value={form.name} onChange={handleChange} placeholder="Name" />
<select name="course" value={form.course} onChange={handleChange}>
<option value="python">Python</option>
<option value="nextjs">Next.js</option>
</select>
<button type="submit">Send</button>
</form>
)
}आगे आप इस browser-only form की जगह Server Action लगाएँगे जो enquiry को server पर save करेगा।
आम गलतियाँ
'use client'भूलना → Server Components में hooks वाला build error।onClick={setCount(count + 1)}(बिना arrow) → render के दौरान चलता है और infinite loop बनता है।onClick={() => setCount(count + 1)}लिखें।pushसे array बदलना → screen update नहीं होती।ifया loop के अंदरuseStatecall करना → hooks component के top level पर ही call होने चाहिए।
सारांश
const [value, setValue] = useState(initial)बदलने वाला data रखता है।- Setter call करने पर component re-render होता है।
- Events:
onClick,onChange,onSubmitfunctions लेते हैं। - Next.js में state और events के लिए
'use client'चाहिए।
✅ Practice
एक "Like" button बनाइए जो ♡ 0 दिखाए और हर click पर ❤️ के साथ count बढ़ाए, साथ में एक "Undo" button भी।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
Variable बदलता है पर screen क्यों नहीं बदलती?
Normal variable React को re-render करने को नहीं कहता। Value को useState में रखें और setter function से बदलें; तब React screen update करता है।
"useState only works in Client Components" error क्यों आता है?
App Router में components default रूप से Server Components होते हैं। File की पहली line में 'use client' लिखें ताकि वह Client Component बने और state व events use कर सके।
setCount(count + 1) की जगह setCount(c => c + 1) कब use करें?
जब नई value पुरानी पर depend करे, ख़ासकर लगातार कई बार update करते समय। Function form को हमेशा latest value मिलती है।
क्या page refresh के बाद state बची रहती है?
नहीं। State memory में रहती है और refresh पर reset हो जाती है। Data बचाने के लिए database, cookie या localStorage में save करें।
