Kya aapne kabhi socha hai ki ReactJS me jab aap useState hook ka use karte hain, toh ek simple string ya number ko update karna toh bahut aasaan hota hai, lekin jaise hi baat Object ya Array ki aati hai, toh data update kyun nahi hota? Aksar naye developers yahi galti karte hain aur fir sochte hain ki unka UI re-render kyun nahi ho raha.
useState object aur array update karne ke liye aapko hamesha naya reference (spread operator ...) use karna chahiye. React "Immutability" par kaam karta hai, isliye direct mutate karne ke bajaye hamesha pura object ya array copy karke update karein, jisse React component re-render ho sake.useState में Object को अपडेट कैसे करें?
React me state ek read-only snapshot ki tarah hoti hai. Agar aap direct user.name = "Rahul" jaisa code likhenge, toh React ko pata hi nahi chalega ki state change hui hai. Isliye hamein Spread Operator (...) ka use karke object ki copy banani padti hai.
import { useState } from 'react';
function UserProfile() {
const [user, setUser] = useState({ name: 'Rahul', age: 25, role: 'Developer' });
const updateName = () => {
// Sahi tarika: Spread operator se purane data ko preserve karein
setUser(prevState => ({
...prevState,
name: 'Amit'
}));
};
return (
<div>
<h1>{user.name} is {user.age} years old</h1>
<button onClick={updateName}>Update Name</button>
</div>
);
}Yahan dhyan dein, humne prevState ka use kiya hai. Yeh best practice hai kyunki state updates asynchronous ho sakte hain. Jab aap updated state ko purani state par base karte hain, toh hamesha functional update ka use karna chahiye.
useState में Array को अपडेट कैसे करें?
Array ke case me bhi logic wahi hai. Aap push() ya splice() jaise methods ka use nahi kar sakte kyunki ye original array ko badal dete hain (mutate karte hain). Hamein map(), filter(), ya spread operator ka use karke naya array banana hoga.
Array Update karne ka Code Example:
const [items, setItems] = useState(['Apple', 'Banana']);
const addItem = () => {
// Naya array create karein aur purane items ko copy karein
setItems([...items, 'Mango']);
};
const removeItem = (itemToRemove) => {
// Filter method se naya array banayein
setItems(items.filter(item => item !== itemToRemove));
};Common Errors और Debugging
Dosto, aksar log error face karte hain jab woh nested objects ke saath kaam karte hain. Agar aapka object deep nested hai, toh sirf ek level ka spread operator kaafi nahi hoga. Tab aapko deep cloning ya immer library ka use karna pad sakta hai.
| Method | Immutability | Result |
|---|---|---|
| push() | No (Mutates) | React detect nahi karega |
| concat() | Yes | React detect karega |
| Spread (...) | Yes | Recommended |
Ek aur important baat, jab aap ReactJS me complex data structures manage karte hain, toh performance ka bhi dhyan rakhein. Har state update re-render trigger karta hai. Agar aapki application bahut badi hai, toh state ko sahi jagah lift karna seekhein.
Summary
Toh dosto, humne aaj seekha ki useState me objects aur arrays ko update karne ka golden rule hai "Immutability". Direct modify karne ke bajaye hamesha purani state ki copy banayein aur usme changes karein. Isse aapke React components sahi se re-render honge aur aapka UI update rahega. Zyada janne ke liye official React documentation zaroor check karein.
टिप्पणियाँ
एक टिप्पणी भेजें