React useContext Hook Example

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

ReactJS में useContext hook एक काफी powerful hook है जो Context API के साथ use होता है और हमारे components को direct data access करने कि सुविधा देता है बिना props drilling के।

useContext hook का use functional components में context data को consume करने के लिए किया जाता है, और इससे हम deeply nested components को भी context के data का access दे सकते हैं बिना उन components में explicitly props pass किये।

●●●

What is useContext Hook ?

React में useContext hook का use किसी भी functional component में Context को access करने के लिए होता है।

अगर आपके पास कुछ ऐसे values हैं जो app के बहुत सारे components में access होनी चाहिए, तो Context API का use उन values को global state के रूप में provide करने के लिए किया जाता है।

useContext hook के through हम उस context को किसी भी functional component में directly access कर सकते हैं बिना props drilling किये।

React useContext Hook Syntax

const value = useContext(MyContext);

यहां

• MyContext : यह वो context है जो createContext() function के through बनाया गया है।

• value : यह useContext से return हुई value है जो context के data को hold करती है।

useContext के लिए हमें सबसे पहले createContext का use करके एक context banana होता है और Provider के through data provide करना होता है जो child components को access करना है।

●●●

React Setup for Context API

पहले, हम createContext का use करके एक context बनाते हैं और Provider component के through data provide करती हैं। useContext hook का use करके हम इसे consume करेंगे।

File : src/context/UserContext.js

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

// Creating a new context
export const UserContext = createContext();

// Creating a Provider component
export function UserProvider({ children }) {
  const [user, setUser] = useState({ name: 'John Doe', age: 30 });

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

Explanation

• createContext() का use करके UserContext create किया गया है।

• UserProvider एक custom provider component है जो UserContext.Provider के through user data provide करता है।

• value prop में हम user और setUser function को pass करते हैं ताकि ये दोनो data consumer components में available हो।

React useContext Hook Example

अब हम useContext का use करके UserContext में stored user data को consume करेंगे।

File : src/components/UserProfile.js

Copy
import React, { useContext } from 'react';
import { UserContext } from '../context/UserContext';

function UserProfile() {
  const { user } = useContext(UserContext);

  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
    </div>
  );
}

export default UserProfile;

Explanation

• useContext hook का use करके हम UserContext को access करते हैं और user data को retrieve करते हैं।

• UserProfile component में user.name और user.age को display किया गया है।

Wrapping Components with UserProvider

अब हमें UserProvider के अंदर अपने component को wrap करना होगा ताकि ये context data सभी nested components में available हो।

File : src/App.js

Copy
import React from 'react';
import { UserProvider } from './context/UserContext';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <UserProvider>
      <div>
        <h1>Welcome to React useContext Example</h1>
        <UserProfile />
      </div>
    </UserProvider>
  );
}

export default App;

Explanation

• UserProvider के अंदर UserProfile component को wrap किया गया है ताकि UserContext का data इस component और इसके nested components के लिए available हो जाये।

• अब UserProfile component में हम context data को directly access कर सकते हैं बिना props के।

●●●

Updating Context Data Using useContext

React में context को update करने के लिए, हम context provider में एक setUser function define कर सकते हैं और इसे child components में useContext के साथ access करके update कर सकते हैं।

File : src/components/EditUser.js

Copy
import React, { useContext } from 'react';
import { UserContext } from '../context/UserContext';

function EditUser() {
  const { user, setUser } = useContext(UserContext);

  const updateName = () => {
    setUser({ ...user, name: 'Jane Doe' });
  };

  return (
    <div>
      <h2>Edit User</h2>
      <p>Current Name: {user.name}</p>
      <button onClick={updateName}>Change Name to Jane Doe</button>
    </div>
  );
}

export default EditUser;

Explanation

• EditUser component में useContext का use करके हम user और setUser function को access करते हैं।

• updateName function setUser function का use करके user object का name update करता है।

• Button click पर setUser new name set करता है और UserProfile component में ये updated name automatically reflect होता है क्योंकि UserProfile और EditUser दोनो UserContext को use कर रहे हैं।

●●●

Passing Multiple Contexts with useContext

React में अगर multiple contexts use करने हो तो हम अलग-अलग contexts बना सकते हैं और उनको अलग-अलग useContext hooks के through access कर सकते हैं।

File : src/context/ThemeContext.js

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

export const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

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

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

File : src/components/ThemeSwitcher.js

Copy
import React, { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';

function ThemeSwitcher() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div>
      <h2>Current Theme: {theme}</h2>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default ThemeSwitcher;

File : src/App.js

Copy
import React from 'react';
import { UserProvider } from './context/UserContext';
import { ThemeProvider } from './context/ThemeContext';
import UserProfile from './components/UserProfile';
import EditUser from './components/EditUser';
import ThemeSwitcher from './components/ThemeSwitcher';

function App() {
  return (
    <UserProvider>
      <ThemeProvider>
        <div>
          <h1>Multiple Context Example</h1>
          <UserProfile />
          <EditUser />
          <ThemeSwitcher />
        </div>
      </ThemeProvider>
    </UserProvider>
  );
}

export default App;

Explanation

• अब हमारे पास UserContext और ThemeContext दोनो हैं जो अलग-अलग data को hold करते हैं।

• ThemeSwitcher component ThemeContext का use करके current theme को display और toggle करता है।

• UserProfile और EditUser components UserContext का use कर रहे हैं और ThemeSwitcher ThemeContext का use कर रहा है।

• App component में हमने दोनो providers को nest किया है, जो सारे components के लिए respective context data available करते हैं।

●●●

Advantages of useContext Hook

• Avoids Prop Drilling : useContext के through deeply nested components को directly data pass कर सकते हैं बिना props drilling के।

• Code Simplicity : ये component code को clean और simple बनाता है।

• Global State Management : Multiple components में data को share करना और update करना easy हो जाता है।

I Hope , अब आपको useContext hook के बारे में अच्छे से समझ आ गया होगा। ।

Happy coding! 🎉