diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 6def0773e..d7a0d41d6 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -1,16 +1,16 @@ --- id: hooks-custom -title: Building Your Own Hooks +title: अपने खुद के Hooks का निर्माण permalink: docs/hooks-custom.html next: hooks-reference.html prev: hooks-rules.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +React 16.8 में *Hooks* नामक एक नया फीचर ऐड हुआ है। यह आपको class का इस्तेमाल किये बिना state और अन्य React विशेषताओं का उपयोग करने देता है। -Building your own Hooks lets you extract component logic into reusable functions. +अपने खुद के Hooks का निर्माण आपको कौम्पोनॅन्ट लॉजिक को पुन: उपयोग फंक्शन में निकालने की सुविधा देता है। -When we were learning about [using the Effect Hook](/docs/hooks-effect.html#example-using-hooks-1), we saw this component from a chat application that displays a message indicating whether a friend is online or offline: +जब हम [इफेक्ट Hook का उपयोग](/docs/hooks-effect.html#example-using-hooks-1) करने के बारे में सीख रहे थे, तब हमने एक चैट एप्लिकेशन से इस कौम्पोनॅन्ट को देखा जो एक संदेश प्रदर्शित करता है जो बताता है कि कोई दोस्त ऑनलाइन या ऑफलाइन है: ```js{4-15} import React, { useState, useEffect } from 'react'; @@ -36,7 +36,7 @@ function FriendStatus(props) { } ``` -Now let's say that our chat application also has a contact list, and we want to render names of online users with a green color. We could copy and paste similar logic above into our `FriendListItem` component but it wouldn't be ideal: +अब बताते हैं कि हमारे चैट एप्लिकेशन की एक संपर्क सूची भी है, और हम हरे रंग के साथ ऑनलाइन उपयोगकर्ताओं के नाम प्रस्तुत करना चाहते हैं। हम इसी तरह के लॉजिक को अपने `FriendListItem` में कॉपी और पेस्ट कर सकते हैं लेकिन यह सही नहीं होगा: ```js{4-15} import React, { useState, useEffect } from 'react'; @@ -63,15 +63,15 @@ function FriendListItem(props) { } ``` -Instead, we'd like to share this logic between `FriendStatus` and `FriendListItem`. +इसके बजाय, हम इस लॉजिक को `FriendStatus` और `FriendListItem` के बीच शेयर करना चाहते हैं। -Traditionally in React, we've had two popular ways to share stateful logic between components: [render props](/docs/render-props.html) and [higher-order components](/docs/higher-order-components.html). We will now look at how Hooks solve many of the same problems without forcing you to add more components to the tree. +परंपरागत रूप से React में, हमारे पास कौम्पोनॅन्ट के बीच स्टेटफुल लॉजिक शेयर करने के दो लोकप्रिय तरीके हैं: [रेंडर प्रॉप्स](/docs/render-props.html) and [higher-order कौम्पोनॅन्टस](/docs/higher-order-components.html)। अब हम इस बात पर ध्यान देंगे कि Hooks आपको आपके tree में अधिक कौम्पोनॅन्टस को ऐड करने के लिए मजबूर किए बिना कैसे समस्याओं का समाधान करते हैं। -## Extracting a Custom Hook {#extracting-a-custom-hook} +## कस्टम Hook निकालना {#extracting-a-custom-hook} -When we want to share logic between two JavaScript functions, we extract it to a third function. Both components and Hooks are functions, so this works for them too! +जब हम दो JavaScript फंक्शन के बीच लॉजिक शेयर करना चाहते हैं, तब हम इसे तीसरे फंक्शन में निकालते हैं। दोनों कौम्पोनॅन्टस और Hooks फंक्शन हैं, तो यह उनके लिए भी काम करता है! -**A custom Hook is a JavaScript function whose name starts with "`use`" and that may call other Hooks.** For example, `useFriendStatus` below is our first custom Hook: +**एक कस्टम Hook एक JavaScript फ़ंक्शन है जिसका नाम "`use`" से शुरू होता है और इसे अन्य Hook कॉल करते है।** उदाहरण के लिए, `useFriendStatus` नीचे हमारा पहला कस्टम Hook है: ```js{3} import { useState, useEffect } from 'react'; @@ -94,11 +94,11 @@ function useFriendStatus(friendID) { } ``` -There's nothing new inside of it -- the logic is copied from the components above. Just like in a component, make sure to only call other Hooks unconditionally at the top level of your custom Hook. +इसके अंदर कुछ भी नया नहीं है -- लॉजिक ऊपर के कौम्पोनॅन्ट से कॉपी किया गया है। बस एक कौम्पोनॅन्ट की तरह, केवल अपने कस्टम Hook के ऊपरी स्तर पर बिना शर्त अन्य हुक को कॉल करना सुनिश्चित करें। -Unlike a React component, a custom Hook doesn't need to have a specific signature. We can decide what it takes as arguments, and what, if anything, it should return. In other words, it's just like a normal function. Its name should always start with `use` so that you can tell at a glance that the [rules of Hooks](/docs/hooks-rules.html) apply to it. +एक React कौम्पोनॅन्ट के विपरीत, एक कस्टम Hook के लिए एक विशिष्ट हस्ताक्षर की आवश्यकता नहीं होती है। हम यह तय कर सकते हैं कि क्या पैरामीटर होता है, और क्या, अगर कुछ भी इसे return करना चाहिए। दूसरे शब्दों में, यह एक सामान्य फंक्शन की तरह है। इसका नाम हमेशा `use` से शुरू होना चाहिए ताकि आप एक नज़र में बता सकें कि [Hooks के नियम](/docs/hooks-rules.html) उस पर लागू हैं। -The purpose of our `useFriendStatus` Hook is to subscribe us to a friend's status. This is why it takes `friendID` as an argument, and returns whether this friend is online: +हमारे `useFriendStatus` Hook का उद्देश्य हमें मित्र की ऑनलाइन स्टेटस को सब्सक्राइब करना है। इसलिए यह एक आर्गुमेंट के रूप में `friendID` लेता है, और रिटर्न करता है कि क्या हमारा दोस्त ऑनलाइन है: ```js function useFriendStatus(friendID) { @@ -110,13 +110,13 @@ function useFriendStatus(friendID) { } ``` -Now let's see how we can use our custom Hook. +अब देखते हैं कि हम अपने कस्टम Hook का उपयोग कैसे कर सकते हैं। -## Using a Custom Hook {#using-a-custom-hook} +## कस्टम Hook का उपयोग {#using-a-custom-hook} -In the beginning, our stated goal was to remove the duplicated logic from the `FriendStatus` and `FriendListItem` components. Both of them want to know whether a friend is online. +शुरुआत में, हमारा कहा गया लक्ष्य `FriendStatus` और` FriendListItem` कौम्पोनॅन्ट से डुप्लिकेट लॉजिक को हटाना था। ये दोनों कौम्पोनॅन्ट जानना चाहते हैं कि कोई दोस्त ऑनलाइन है या नहीं। -Now that we've extracted this logic to a `useFriendStatus` hook, we can *just use it:* +अब हमने इस लॉजिक को एक `useFriendStatus` hook में निकाला है, हम इसका *उपयोग कर सकते हैं:* ```js{2} function FriendStatus(props) { @@ -141,19 +141,19 @@ function FriendListItem(props) { } ``` -**Is this code equivalent to the original examples?** Yes, it works in exactly the same way. If you look closely, you'll notice we didn't make any changes to the behavior. All we did was to extract some common code between two functions into a separate function. **Custom Hooks are a convention that naturally follows from the design of Hooks, rather than a React feature.** +**क्या यह कोड मूल उदाहरणों के बराबर है?** हाँ, यह ठीक उसी तरह से काम करता है। यदि आप बारीकी से देखते हैं, आप ध्यान देंगे कि हमने बिहेवियर में कोई बदलाव नहीं किया। हमने केवल दो फ़ंक्शन के बीच कुछ सामान्य कोड को एक अलग फ़ंक्शन में निकाला था। **कस्टम Hook React फीचर के बजाय एक कन्वेंशन है जो स्वाभाविक रूप से Hook के डिजाइन से अनुसरण करता है।** -**Do I have to name my custom Hooks starting with “`use`”?** Please do. This convention is very important. Without it, we wouldn't be able to automatically check for violations of [rules of Hooks](/docs/hooks-rules.html) because we couldn't tell if a certain function contains calls to Hooks inside of it. +**क्या मुझे अपने कस्टम Hook का नाम “`use`” से शुरू करना है?** कृपया कीजिए। यह कन्वेंशन बहुत महत्वपूर्ण है। इसके बिना, [rules of Hooks](/docs/hooks-rules.html) के उल्लंघन के लिए हम स्वचालित रूप से जांच नहीं कर पाएंगे क्योंकि हम यह नहीं बता सकते हैं कि किसी निश्चित फ़ंक्शन में Hooks के कॉल हैं या नहीं। -**Do two components using the same Hook share state?** No. Custom Hooks are a mechanism to reuse *stateful logic* (such as setting up a subscription and remembering the current value), but every time you use a custom Hook, all state and effects inside of it are fully isolated. +**क्या दो कौम्पोनॅन्ट एक ही Hook से state शेयर कर सकते हैं?** नहीं। कस्टम Hook *स्टेटफुल लॉजिक* का पुन: उपयोग करने के लिए एक मेकनिज़्म है (जैसे कि सदस्यता स्थापित करना और वर्तमान वैल्यू को याद रखना), लेकिन हर बार जब आप एक कस्टम Hook का उपयोग करते हैं, तो इसके अंदर के सभी स्टेट और प्रभाव पूरी तरह से अलग हो जाते हैं। -**How does a custom Hook get isolated state?** Each *call* to a Hook gets isolated state. Because we call `useFriendStatus` directly, from React's point of view our component just calls `useState` and `useEffect`. And as we [learned](/docs/hooks-state.html#tip-using-multiple-state-variables) [earlier](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns), we can call `useState` and `useEffect` many times in one component, and they will be completely independent. +**एक कस्टम Hook को अलग-थलग अवस्था कैसे मिलती है?** प्रत्येक Hook *call* में एक पूरी तरह से आइसोलेटेड state है। क्योंकि हम`useFriendStatus` सीधे कॉल करें, React के दृष्टिकोण से हमारे कौम्पोनॅन्ट सिर्फ `useState` and `useEffect` को कॉल करते हैं। और जैसे हमने[सीखा](/docs/hooks-state.html#tip-using-multiple-state-variables) [पहले](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns), हम एक कौम्पोनॅन्ट में कई बार `useState` and `useEffect` कॉल कर सकते हैं, और वे पूरी तरह से स्वतंत्र होंगे। -### Tip: Pass Information Between Hooks {#tip-pass-information-between-hooks} +### टिप: Hook के बीच जानकारी पास करें {#tip-pass-information-between-hooks} -Since Hooks are functions, we can pass information between them. +चूंकि Hook फंक्शन हैं, हम उनके बीच जानकारी दे सकते हैं। -To illustrate this, we'll use another component from our hypothetical chat example. This is a chat message recipient picker that displays whether the currently selected friend is online: +इसे समझने के लिए, हम अपने काल्पनिक चैट उदाहरण से एक और कौम्पोनॅन्ट का उपयोग करेंगे। यह एक चैट संदेश प्राप्तकर्ता पिकर है जो प्रदर्शित करता है कि वर्तमान में चुना गया दोस्त ऑनलाइन है: ```js{8-9,13} const friendList = [ @@ -183,25 +183,24 @@ function ChatRecipientPicker() { ); } ``` +हम चुने गए friend ID को `recipientID` state वेरिएबल में रखते हैं, और इसे अपडेट करेंगे यदि यूजर `` picker. - -Because the `useState` Hook call gives us the latest value of the `recipientID` state variable, we can pass it to our custom `useFriendStatus` Hook as an argument: +क्योंकि `useState` Hook कॉल हमें` recipientID` state वेरिएबल का नवीनतम वैल्यू देता है, इसीलिए हम इसे अपने कस्टम `useFriendStatus` हुक में एक आर्गुमेंट के रूप में पास कर सकते हैं: ```js const [recipientID, setRecipientID] = useState(1); const isRecipientOnline = useFriendStatus(recipientID); ``` -This lets us know whether the *currently selected* friend is online. If we pick a different friend and update the `recipientID` state variable, our `useFriendStatus` Hook will unsubscribe from the previously selected friend, and subscribe to the status of the newly selected one. +इससे हमें पता चलता है कि *वर्तमान में चयनित* मित्र ऑनलाइन है या नहीं। अगर हम एक अलग दोस्त चुनें और `recipientID` state variable अद्यतन करें, तो हमारा `useFriendStatus` Hook पहले से चयनित दोस्त से सदस्यता समाप्त कर देगा, और नव चयनित एक की स्टेटस के लिए सदस्यता लें। ## `useYourImagination()` {#useyourimagination} -Custom Hooks offer the flexibility of sharing logic that wasn't possible in React components before. You can write custom Hooks that cover a wide range of use cases like form handling, animation, declarative subscriptions, timers, and probably many more we haven't considered. What's more, you can build Hooks that are just as easy to use as React's built-in features. +कस्टम Hook शेयर करने के लचीलेपन की पेशकश करते हैं जो पहले React कौम्पोनॅन्ट में संभव नहीं था| आप कस्टम Hook लिख सकते हैं जो फॉर्म हैंडलिंग, एनीमेशन, डिक्लेक्टिव सब्सक्रिप्शन, टाइमर्स जैसे कई उपयोग के मामलों को कवर करते हैं, और शायद कई और भी जिन्हें हमने नहीं माना है। क्या अधिक है, आप Hook का निर्माण कर सकते हैं जो कि React की अंतर्निहित सुविधाओं के रूप में उपयोग करना आसान है। -Try to resist adding abstraction too early. Now that function components can do more, it's likely that the average function component in your codebase will become longer. This is normal -- don't feel like you *have to* immediately split it into Hooks. But we also encourage you to start spotting cases where a custom Hook could hide complex logic behind a simple interface, or help untangle a messy component. +बहुत जल्दी abstraction जोड़ने का विरोध करने की कोशिश करें। अब वह कार्य कौम्पोनॅन्ट अधिक कर सकता है, यह संभावना है कि आपके कोडबेस में औसत फ़ंक्शन कौम्पोनॅन्ट लंबा हो जाएगा। वह सामान्य है -- ऐसा महसूस न करें कि आपको तुरंत इसे Hook में विभाजित *करना है*| लेकिन हम आपको उन मामलों को भी शुरू करने के लिए प्रोत्साहित करते हैं जहां एक कस्टम Hook एक सरल इंटरफ़ेस के पीछे जटिल लॉजिक को छिपा सकता है, या किसी गन्दे कौम्पोनॅन्ट की मदद न करें। -For example, maybe you have a complex component that contains a lot of local state that is managed in an ad-hoc way. `useState` doesn't make centralizing the update logic any easier so you might prefer to write it as a [Redux](https://redux.js.org/) reducer: +हो सकता है कि आपके पास एक जटिल कौम्पोनॅन्ट है जिसमें बहुत सारे लोकल state शामिल हैं जो एक अनौपचारिक तरीके से प्रबंधित होते हैं। `useState` अद्यतन लॉजिक को किसी भी आसान केंद्रीकृत नहीं करता है इसलिए आप इसे [Redux](https://redux.js.org/) reducer रूप में लिखना पसंद कर सकते हैं: ```js function todosReducer(state, action) { @@ -218,9 +217,9 @@ function todosReducer(state, action) { } ``` -Reducers are very convenient to test in isolation, and scale to express complex update logic. You can further break them apart into smaller reducers if necessary. However, you might also enjoy the benefits of using React local state, or might not want to install another library. +Reducers विलगता में परीक्षण करने के लिए बहुत सुविधाजनक हैं, और जटिल अद्यतन लॉजिक व्यक्त करने के लिए स्केलेबल है। यदि आवश्यक हो तो आप उन्हें छोटे reducer में अलग कर सकते हैं। हालाँकि, आप React लोकल state का उपयोग करने के लाभों का आनंद ले सकते हैं, या किसी अन्य लाइब्रेरी को स्थापित नहीं करना चाह सकते हैं। -So what if we could write a `useReducer` Hook that lets us manage the *local* state of our component with a reducer? A simplified version of it might look like this: +तो क्या हुआ अगर हम एक `useReducer` hook लिख सकते हैं, जो हमें एक reducer के साथ हमारे कौम्पोनॅन्ट के *लोकल* state का प्रबंधन करने देता है? इसका एक सरलीकृत उदाहरण इस तरह दिख सकता है: ```js function useReducer(reducer, initialState) { @@ -234,8 +233,7 @@ function useReducer(reducer, initialState) { return [state, dispatch]; } ``` - -Now we could use it in our component, and let the reducer drive its state management: +अब हम इसे अपने कौम्पोनॅन्ट में उपयोग कर सकते हैं, और reducer को अपने state प्रबंधन को चलाने दें: ```js{2} function Todos() { @@ -249,4 +247,4 @@ function Todos() { } ``` -The need to manage local state with a reducer in a complex component is common enough that we've built the `useReducer` Hook right into React. You'll find it together with other built-in Hooks in the [Hooks API reference](/docs/hooks-reference.html). +एक जटिल कौम्पोनॅन्ट में एक reducer के साथ लोकल state का प्रबंधन करने की आवश्यकता काफी सामान्य है जो कि हमने React में `useReducer` Hook का निर्माण किया है। आप इसे अन्य अंतर्निहित Hook के साथ इसमें मिलेंगे [Hooks API संदर्भ](/docs/hooks-reference.html)|