`'s `color` to red without impacting `background-color`. Similarly, **different React contexts don't override each other.** Each context that you make with `createContext()` is completely separate from other ones, and ties together components using and providing *that particular* context. One component may use or provide many different contexts without a problem.
+CSS में, `color` और `background-color` जैसे विभिन्न प्रोपर्टीज़ एक दूसरे को ओवरराइड नहीं करती हैं। आप `background-color` को प्रभावित किए बिना सभी `
` के `color` को red सेट कर सकते हैं। इसी प्रकार, **अलग-अलग React कॉन्टेक्स्ट एक-दूसरे को ओवरराइड नहीं करते हैं।** प्रत्येक कॉन्टेक्स्ट जो आप `createContext()` का प्रयोग कर बनाते हैं, अन्य कॉन्टेक्स्ट से पूरी तरह से अलग होता है, और उन कॉम्पोनेंट्स को जो *उस विशिष्ट कॉन्टेक्स्ट* का उपयोग और प्रदान करते हैं, एक साथ बांधता है। एक कौम्पोनॅन्ट बिना किसी समस्या के कई अलग-अलग कॉन्टेक्स्ट का उपयोग या प्रदान कर सकता है।
-## Before you use context {/*before-you-use-context*/}
+## इससे पहले कि आप कॉन्टेक्स्ट का उपयोग करें {/*before-you-use-context*/}
-Context is very tempting to use! However, this also means it's too easy to overuse it. **Just because you need to pass some props several levels deep doesn't mean you should put that information into context.**
+कॉन्टेक्स्ट का उपयोग करना बहुत लुभावना है! हालांकि, इसका मतलब यह भी है कि इसे अति प्रयोग करना बहुत आसान है। **सिर्फ इसलिए कि आपको कई गहरे स्तरों तक कुछ प्रॉप्स पास करने की आवश्यकता का यह मतलब नहीं है कि आपको उस जानकारी को कॉन्टेक्स्ट में रखना चाहिए।**
-Here's a few alternatives you should consider before using context:
+कॉन्टेक्स्ट का उपयोग करने से पहले आपको इन कुछ विकल्पों पर विचार करना चाहिए:
-1. **Start by [passing props.](/learn/passing-props-to-a-component)** If your components are not trivial, it's not unusual to pass a dozen props down through a dozen components. It may feel like a slog, but it makes it very clear which components use which data! The person maintaining your code will be glad you've made the data flow explicit with props.
-2. **Extract components and [pass JSX as `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) to them.** If you pass some data through many layers of intermediate components that don't use that data (and only pass it further down), this often means that you forgot to extract some components along the way. For example, maybe you pass data props like `posts` to visual components that don't use them directly, like `
`. Instead, make `Layout` take `children` as a prop, and render `
`. This reduces the number of layers between the component specifying the data and the one that needs it.
+1. **[प्रॉप्स को पास करने](/learn/passing-props-to-a-component) से शुरू करें।** यदि आपके कॉम्पोनेंट्स तुच्छ नहीं हैं, तो दर्जन भर कॉम्पोनेंट्स के माध्यम से दर्जन भर प्रॉप्स को पास करना असामान्य नहीं है। यह एक नारे की तरह लग सकता है, लेकिन यह बहुत स्पष्ट करता है कि कौन से कॉम्पोनेंट्स किस डेटा का उपयोग करते हैं! आपके कोड को मेन्टेन रखने वाले व्यक्ति को खुशी होगी कि आपने डेटा प्रवाह को प्रॉप्स के साथ स्पष्ट कर दिया है।
+2. **कॉम्पोनेंट्स को एक्सट्रेक्ट करें और [JSX को `चिल्ड्रन` के रूप में](/learn/passing-props-to-a-component#passing-jsx-as-children) उनमे भेजें।** यदि आप मध्यवर्ती कॉम्पोनेंट्स की कई परतों के माध्यम से कुछ डेटा पास करते हैं जो उस डेटा का उपयोग नहीं करते हैं (और केवल इसे और नीचे पास करते हैं), तो इसका मतलब है कि आप कुछ कॉम्पोनेंट्स को एक्सट्रेक्ट करने के लिए भूल गए। उदाहरण के लिए, हो सकता है कि आप दृश्य कॉम्पोनेंट्स के लिए `posts` जैसे डेटा प्रॉप्स पास करते हैं जो उन्हें सीधे उपयोग नहीं करते हैं, जैसे कि `
`। इसके बजाय, `Layout` को `children` को एक प्रोप के रूप में लेने के लिए बनाएं, और `
` को रेंडर करें। यह डेटा को निर्दिष्ट करने वाले कौम्पोनॅन्ट और डेटा की आवश्यकता वाले कौम्पोनॅन्ट के बीच परतों की संख्या को कम करता है।
-If neither of these approaches works well for you, consider context.
+यदि इनमें से कोई भी दृष्टिकोण आपके लिए अच्छा काम नहीं करता है, तो कॉन्टेक्स्ट पर विचार करें।
-## Use cases for context {/*use-cases-for-context*/}
+## कॉन्टेक्स्ट के लिए उपयोग के मामले {/*use-cases-for-context*/}
-* **Theming:** If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look.
-* **Current account:** Many components might need to know the currently logged in user. Putting it in context makes it convenient to read it anywhere in the tree. Some apps also let you operate multiple accounts at the same time (e.g. to leave a comment as a different user). In those cases, it can be convenient to wrap a part of the UI into a nested provider with a different current account value.
-* **Routing:** Most routing solutions use context internally to hold the current route. This is how every link "knows" whether it's active or not. If you build your own router, you might want to do it too.
-* **Managing state:** As your app grows, you might end up with a lot of state closer to the top of your app. Many distant components below may want to change it. It is common to [use a reducer together with context](/learn/scaling-up-with-reducer-and-context) to manage complex state and pass it down to distant components without too much hassle.
-
-Context is not limited to static values. If you pass a different value on the next render, React will update all the components reading it below! This is why context is often used in combination with state.
+* **थीम:** यदि आपका ऐप उपयोगकर्ता को अपनी उपस्थिति (जैसे डार्क मोड) को बदलने देता है, तो आप अपने ऐप के शीर्ष पर एक कॉन्टेक्स्ट प्रदाता रख सकते हैं, और उस कॉन्टेक्स्ट का उपयोग उन कॉन्टेक्स्ट में कर सकते हैं जिन्हें अपने दृश्य लुक को समायोजित करने की आवश्यकता है।
+* **चालू खाता:** कई कॉम्पोनेंट्स को वर्तमान में logged in उपयोगकर्ता का पता करने की आवश्यकता हो सकती है। इसे कॉन्टेक्स्ट में रखना पेड़ में कहीं भी इसे पढ़ने के लिए सुविधाजनक बनाता है। कुछ ऐप्स आपको एक ही समय में कई खाते संचालित करने देते हैं (उदाहरण के लिए एक अलग उपयोगकर्ता के रूप में एक टिप्पणी छोड़ने के लिए)। उन मामलों में, एक अलग चालू खाता मूल्य के साथ एक नेस्टेड कॉन्टेक्स्ट प्रदाता में UI के एक हिस्से को लपेटना सुविधाजनक हो सकता है।
+* **राउटिंग:** अधिकांश राउटिंग समाधान वर्तमान मार्ग को रखने के लिए आंतरिक रूप से कॉन्टेक्स्ट का उपयोग करते हैं। इस प्रकार से हर लिंक "जानता है" कि यह सक्रिय है या नहीं। यदि आप अपना खुद का राउटर बनाते हैं, तो आप इसे भी करना चाह सकते हैं।
+* **स्टेट को मैनेज करना:** जैसे-जैसे आपका ऐप बढ़ता है, आप अपने ऐप के शीर्ष के करीब बहुत सारे स्टेट के साथ समाप्त हो सकते हैं। नीचे कई दूर के कौम्पोनॅन्ट इसे बदलना चाह सकते हैं। जटिल स्टेट को मैनेज करने के लिए [कॉन्टेक्स्ट के साथ एक रेड्यूसर का उपयोग करना](/learn/scaling-up-with-reducer-and-context) और और इसे बहुत अधिक परेशानी के बिना दूर के कॉम्पोनेंट्स तक पास करना सामान्य है।
-In general, if some information is needed by distant components in different parts of the tree, it's a good indication that context will help you.
+कॉन्टेक्स्ट स्थैतिक मूल्यों तक सीमित नहीं है। यदि आप अगले रेंडर पर एक अलग मूल्य पास करते हैं, तो React नीचे पढ़ते हुए सभी कॉम्पोनेंट्स को अपडेट करेगा! यही कारण है कि कॉन्टेक्स्ट का उपयोग अक्सर स्टेट के साथ संयोजन में किया जाता है।
+
+सामान्य तौर पर, यदि पेड़ के विभिन्न हिस्सों में दूर के कॉम्पोनेंट्स द्वारा कुछ जानकारी की आवश्यकता होती है, तो यह एक अच्छा संकेत है कि कॉन्टेक्स्ट आपकी मदद करेगा।
-* Context lets a component provide some information to the entire tree below it.
-* To pass context:
- 1. Create and export it with `export const MyContext = createContext(defaultValue)`.
- 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep.
- 3. Wrap children into `` to provide it from a parent.
-* Context passes through any components in the middle.
-* Context lets you write components that "adapt to their surroundings".
-* Before you use context, try passing props or passing JSX as `children`.
+* कॉन्टेक्स्ट एक कौम्पोनॅन्ट को इसके नीचे पूरे पेड़ को कुछ जानकारी प्रदान करता है।
+* कॉन्टेक्स्ट को पास करने के लिए:
+ 1. इसे बनाएं और निर्यात करें `export const MyContext = createContext(defaultValue)`.
+ 2. इसे किसी भी चाइल्ड कौम्पोनॅन्ट में पढ़ने के लिए `useContext(MyContext)` हुक में पास करें, चाहे वह कितना भी गहरा क्यों न हो।
+ 3. चिल्ड्रन को पैरेंट से प्रदान करने के लिए `` में लपेटें।
+* कॉन्टेक्स्ट बीच में किसी भी कॉम्पोनेंट्स से गुजरता है।
+* कॉन्टेक्स्ट आपको उन कॉम्पोनेंट्स को लिखने देता है जो "अपने परिवेश के अनुकूल हो जाते" हैं।
+* कॉन्टेक्स्ट का उपयोग करने से पहले, प्रॉप्स पास करने या JSX को `children` के रूप में पास करने का प्रयास करें।
-#### Replace prop drilling with context {/*replace-prop-drilling-with-context*/}
+#### प्रॉप ड्रिलिंग को कॉन्टेक्स्ट से बदलें {/*replace-prop-drilling-with-context*/}
-In this example, toggling the checkbox changes the `imageSize` prop passed to each ``. The checkbox state is held in the top-level `App` component, but each `` needs to be aware of it.
+इस उदाहरण में, चेकबॉक्स को टॉगल करने से प्रत्येक `` के लिए पारित `imageSize` प्रोप बदल जाता है। चेकबॉक्स स्टेट शीर्ष-स्तरीय `App` कौम्पोनॅन्ट में रखा जाता है, लेकिन प्रत्येक `` को इसके बारे में पता होना चाहिए।
-Currently, `App` passes `imageSize` to `List`, which passes it to each `Place`, which passes it to the `PlaceImage`. Remove the `imageSize` prop, and instead pass it from the `App` component directly to `PlaceImage`.
+वर्तमान में, `App` `List` में `imageSize` को पास करता है, जो इसे प्रत्येक `Place` को पास करता है, जो इसे `PlaceImage` को पास करता है। `imageSize` प्रोप को हटा दें, और इसके बजाय इसे `App` कौम्पोनॅन्ट से सीधे `PlaceImage` तक पास करें।
-You can declare context in `Context.js`.
+आप `Context.js` में कॉन्टेक्स्ट घोषित कर सकते हैं।
@@ -1020,9 +1020,9 @@ li {
-Remove `imageSize` prop from all the components.
+सभी कॉम्पोनेंट्स से `imageSize` प्रोप निकालें।
-Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`:
+`ImageSizeContext` बनाएं और `Context.js` से निर्यात करें। फिर मान को नीचे पास करने के लिए सूची को `` में लपेटें, और इसे `PlaceImage` में पढ़ने के लिए `useContext(ImageSizeContext)` का उपयोग करें:
@@ -1157,7 +1157,7 @@ li {
-Note how components in the middle don't need to pass `imageSize` anymore.
+ध्यान दें कि कैसे बीच में कॉम्पोनेंट्स को `imageSize` अब पास करने की आवश्यकता नहीं है।