Dosto, agar aap React me thoda bhi kaam kar chuke hain, toh aapne ek problem zaroor face ki hogi jise hum kehte hain "Prop Drilling". Jab hume kisi top-level component ke data ko kisi bilkul deep-level (child component) me bhejna hota hai, toh hume use beech ke saare components se pass karna padta hai, bhale hi un beech ke components ko us data ki koi zaroorat na ho.

Yeh bada hi annoying aur ganda tarika hai. Is problem ko solve karne ke liye React hume deta hai ek in-built feature jiska naam hai React Context API. Aaj ke is detailed tutorial me hum bilkul simple Hindi me samjhenge ki Context API kya hai, yeh kaise kaam karta hai, aur iska live code implementation kaise karte hain.

Prop Drilling Kya Hai? (The Real Problem)

Chaliye ek real example se samajhte hain. Maan lijiye aapke paas ek App component hai jiske paas "User Theme" (Dark/Light mode) ka data hai. Ab aapke paas ek SettingsButton component hai jo page ke bilkul niche header -> navigation -> user-profile ke andar hai. Ab us button tak theme data pahunchane ke liye aapko har level par props pass karte jana hoga. Isi ko prop drilling kehte hain.

Context API is problem ko solve karta hai. Yeh ek aisi central place (store) bana deta hai jahan se koi bhi component directly data ko access kar sakta hai, bina kisi intermediate component ko pareshan kiye.

React Context API ke 3 Pillars

React Context API ko use karne ke liye hume 3 steps ko samajhna hoga:

1. React.createContext(): Isse hum ek naya Context (data box) banate hain.
2. Context.Provider: Yeh humare components ko wraps karta hai aur unhe data "provide" karta hai.
3. useContext() Hook: Is Hook ke zariye koi bhi child component us data ko "consume" (use) karta hai.

Chaliye Code Karte Hain (Theme Switcher Example)

Hum ek poora working theme switcher banayenge jisse user light aur dark mode ke beech toggle kar sakega.

Step 1: Context aur Provider Create Karein

Sabse pehle hum ek file banayenge ThemeContext.js jahan hum context ko initialize karenge:

import React, { createContext, useState, useContext } from 'react';

// 1. Context Create Kiya
const ThemeContext = createContext();

// 2. Provider Component Banaya
export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    
      {children}
    
  );
};

// 3. Custom Hook Banaya consume karne ke liye
export const useTheme = () => {
  return useContext(ThemeContext);
};

Step 2: Provider se App ko Wrap Karein

Ab hum apni main entry point file (jaise index.js ya App.js) me jaakar components ko wrap karenge taaki sabhi child components ko theme state mil sake:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { ThemeProvider } from './ThemeContext';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
      
    
  
);

Step 3: Component me Context Use Karein

Ab hum kisi bhi child component (jaise App.js ya kisi button component) me Context state ko directly consume karenge:

import React from 'react';
import { useTheme } from './ThemeContext';
import './App.css';

function App() {
  const { theme, toggleTheme } = useTheme();

  return (
    

      
React Context API (Hindi Tutorial)
      
Current Theme: {theme.toUpperCase()}
      
        Change Theme
      
    
  );
}

export default App;

Blogger ke Liye CSS Styles

Agar aap chahein toh apne app container ko CSS se modern dark/light styling de sakte hain:

.app-container.light {
  background-color: #ffffff;
  color: #1e293b;
}

.app-container.dark {
  background-color: #0f172a;
  color: #f8fafc;
}

Toh Dosto, Aaj Humne Kya Seekha?

React Context API ek behad powerful tool hai small se medium projects ke state ko manage karne ke liye. Yeh prop drilling ki boring problem se chhutkara dilata hai. Lekin dhyan rakhein, agar aapka application bahut bada hai aur state updates har second me 100 baar ho rahe hain, tab aapko Redux Toolkit ya Zustand jaise tools par switch karna chahiye kyunki context updates poore component tree ko re-render kar sakte hain.