<!DOCTYPE html>
#14 React JS Tutorial 2024 | ContextAPI and useContext in React Js | Hindi
In this tutorial, we will learn about ContextAPI and useContext in React Js. These are important concepts in React that allow us to share stateful logic across components without the need for prop drilling.
ContextAPI provides a way to pass data through the component tree without having to pass props down manually at every level. It allows you to specify what data a component needs and provides a way for the data to be passed down automatically.
useContext is a hook that allows you to consume the values passed through the context API. It takes a context object (created using createContext) as an argument and returns the current context value.
Example:
“`jsx
import React, { useContext } from ‘react’;
const MyContext = React.createContext();
const MyComponent = () => {
const value = useContext(MyContext);
return (
{value}
);
};
const ParentComponent = () => {
return (
);
};
export default ParentComponent;
“`
In the example above, we create a context object using `createContext` and provide a value to it using `Provider`. In `MyComponent`, we use `useContext` hook to consume the value from the context.
By using ContextAPI and useContext, we can easily share stateful logic across components and avoid prop drilling, making our code more readable and efficient.
I hope this tutorial was helpful in understanding ContextAPI and useContext in React Js in Hindi. Stay tuned for more tutorials!
