React me useState aur useRef kab use karein? Is guide me hum in dono hooks ka sahi istemal, performance fark aur best practices aasan Hindi me seekhenge.
Jab hum ReactJS development shuru karte hain, to aksar hum ek confusion me hote hain: "State badalna hai to useState use karun ya useRef?" Dono kaam to value hold karne ka karte hain, lekin dono ke peeche ki logic bilkul alag hai. Aaj hum is confusing topic ko hamesha ke liye clear karenge.
useState kya hai aur ye kaise kaam karta hai?
useState React ka wo hook hai jo component ki "memory" banata hai. Jab bhi aap useState ki value update karte hain, React automatically component ko dobara render (re-render) karta hai taaki updated value screen par dikh sake. Yeh interactive UI banane ke liye best hai.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}Yahan jab bhi aap button click karenge, setCount function call hoga, React state ko update karega aur browser me screen par naya number dikhayega. Yeh React ka core principle hai.
useRef kya hai aur kab use karein?
useRef ek "box" ki tarah hai jisme aap koi bhi value rakh sakte hain jo re-render hone par bhi khoegi nahi, lekin us value ke badalne par component dobara render nahi hoga. Iska sabse common use case hai DOM elements ko directly access karna.
useState vs useRef: Kaunsa kab chunein?
| Feature | useState | useRef |
|---|---|---|
| Re-render | Yes (Triggers) | No |
| Use Case | UI data (Inputs, Counts) | DOM Access, Timers |
| Value Update | Async (State Updater) | Synchronous (.current) |
Dosto, hamesha yaad rakhein ki agar aap useRef ka use kisi aise data ke liye kar rahe hain jo screen par dikhna chahiye, to aap galat raste par hain. Kyunki useRef change hone par React ko pata hi nahi chalta ki screen update karni hai!
Ek practical example: Input Focus
Jab hamein kisi input field ko programmatically focus karna ho, tab useRef best tool hai.
import { useRef } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// Current property ka use karke focus method call kar rahe hain
inputEl.current.focus();
};
return (
<div>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</div>
);
}Common mistakes aur unhe kaise fix karein
Naye developers aksar ye galti karte hain ki wo useRef ka value variable UI me dikhane ke liye use karte hain. Agar aapko koi error face ho raha hai jisme UI update nahi ho raha, to check karein ki kahin aap useState ki jagah useRef to use nahi kar rahe.
- Ref to display: useRef ka use kabhi bhi UI render karne ke liye mat karein.
- Rendering during render: useRef.current ko kabhi bhi main body of component me read/write mat karein, hamesha useEffect ya event handlers me karein.
Performance ke liye, useRef ka use un values ko store karne ke liye karein jo aapko baar-baar change karni hai lekin render cycle se bachna hai. Zyada jaankari ke liye official React Documentation padhein.
टिप्पणियाँ
एक टिप्पणी भेजें