React me useLocalStorage Custom Hook Kaise Banayein (Hindi)

✨ Quick Answer: React me useLocalStorage custom hook kaise banayein? Is step-by-step Hindi guide se local storage data ko easily manage karna seekhein.

React me useLocalStorage custom hook kaise banayein? Is comprehensive guide me hum custom hooks ka power use karke browser storage ko asani se manage karna seekhenge.

Dosto, kya aap kabhi aise situation me phase hain jahan page refresh hote hi aapka pura state gayab ho jata hai? Yeh problem aksar developers face karte hain jab woh ReactJS applications banate hain. Aaj hum seekhenge ki kaise hum browser ke localStorage ke saath state ko sync kar sakte hain ek clean aur reusable useLocalStorage hook banakar.

useLocalStorage Hook kya hai aur iski zaroorat kyun padti hai?

Jab hum React me `useState` use karte hain, toh woh sirf memory me rehta hai. Browser refresh hote hi memory reset ho jati hai. Agar aapko user ki preferences (jaise Theme: Dark/Light) ya shopping cart ka data save rakhna hai, toh aapko baar-baar localStorage.setItem aur getItem likhna padta hai. Yeh code baar-baar repeat karna boring aur error-prone hota hai. Yahan custom hooks ki entry hoti hai!

useLocalStorage custom hook kaise banayein? (Step-by-Step)

Chaliye, ek robust aur production-ready hook banate hain. Hum yahan useState aur useEffect ka sahi istemal karenge.

1. Initial State Setup: Sabse pehle localStorage se value get karenge.
2. State Initialization: useState ko function pass karenge taaki lazily initialization ho sake.
3. Sync Mechanism: useEffect ka use karke jab bhi state change ho, localStorage update kar denge.

import { useState, useEffect } from "react";

function useLocalStorage(key, initialValue) {
  // State ko initialize karo localStorage ki value ya default value se
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Error reading localStorage", error);
      return initialValue;
    }
  });

  // State update hone par localStorage update karo
  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error("Error setting localStorage", error);
    }
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

export default useLocalStorage;

useLocalStorage ka use kaise karein?

Ab is hook ko apne components me use karna bahut aasaan hai. Dekhiye niche diya gaya example:

function App() {
  const [name, setName] = useLocalStorage("username", "Guest");

  return (
    <div>
      <h1>Welcome, {name}!</h1>
      <input 
        type="text" 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
      />
    </div>
  );
}

Edge Cases aur Best Practices

Dosto, hamesha dhyan rakhein ki localStorage sirf strings store karta hai. Isliye JSON.stringify aur JSON.parse ka use karna mandatory hai. Ek aur important baat: agar user ka browser private mode me hai ya cookies disable hain, toh localStorage.setItem throw kar sakta hai ek error. Isliye hamesha try-catch block ka use karein, jaisa humne upar wale code me kiya hai.

Toh dosto, aaj humne seekha ki kaise custom hooks humare code ko dry (Don't Repeat Yourself) rakhte hain. Official React documentation ko bhi zaroor padhein depth me samajhne ke liye.