React useState me Object aur Array Kaise Update Karein

React useState me object aur array ko sahi tarike se update kaise karein? Is guide me hum state immutability aur best practices ko aasan Hindi me samjhenge.

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.

⚡ Quick Answer: React me 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.

🏗️ State Update Flow

Original State
→
Spread (...) Copy
→
New State

Diagram: React state update ka immutability flow

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.

Frequently Asked Questions (FAQs)

Q1: React state me direct mutation kyun nahi karna chahiye?
Direct mutation se React ka change detection mechanism trigger nahi hota, jisse UI update nahi hota aur bugs aate hain.
Q2: Spread operator (...) kya karta hai?
Spread operator purane object ya array ke sabhi elements ko naye container me copy kar deta hai, jisse naya reference banta hai.
Q3: Kya hum nested object ko update kar sakte hain?
Haan, lekin har level par spread operator use karna padega, jaise { ...state, nested: { ...state.nested, key: 'value' } }.
Q4: Functional update (prevState) ka use kab karein?
Jab aapki nai state purani state par depend karti ho, tab functional update ka use karna best practice hai.
Q5: Best practice kya hai badi objects ke liye?
Badi objects ke liye 'Immer' library ka use karein, jo code ko readable aur clean banati hai.