React me useLocalStorage Custom Hook Kaise Banayein (Hindi)

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.

⚡ Quick Answer: useLocalStorage ek custom hook hai jo React state aur browser localStorage ko automatically sync karta hai. Iska use karke aap data ko page reload ke baad bhi preserve kar sakte hain. Yeh useState\ ki tarah hi kaam karta hai lekin data ko JSON format me serialise karke localStorage me store kar deta hai.

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;

🏗️ Architecture Diagram

React Component
↔
useLocalStorage Hook
↔
localStorage

Diagram: Hook React state aur Browser Storage ke beech bridge ban kar kaam karta hai.

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.

Frequently Asked Questions (FAQs)

Q1: Kya useLocalStorage server-side rendering (SSR) ke saath kaam karta hai?
SSR me ‘window’ object nahi hota, isliye aapko check karna padega ki code browser me run ho raha hai ya nahi. Iske liye ‘typeof window !== “undefined”‘ ka use karein.
Q2: Kya hum is hook me object store kar sakte hain?
Haan, bilkul! Kyunki humne JSON.stringify aur JSON.parse ka use kiya hai, aap objects aur arrays dono store kar sakte hain.
Q3: Kya hook baar-baar re-render karta hai?
Nahi, ‘useEffect’ sirf tabhi trigger hota hai jab ‘storedValue’ change hoti hai, jo ki performance ke liye optimize hai.
Q4: Maximum kitna data store kar sakte hain?
LocalStorage ki limit browser to browser vary karti hai, but generally yeh 5MB tak hoti hai.
Q5: Kya yeh hook secure hai?
LocalStorage secure nahi hota, isliye kabhi bhi sensitive information jaise passwords ya tokens yahan save na karein.