[Translation] Building Your Own Hooks by visshaljagtap · Pull Request #68 · reactjs/hi.react.dev

@visshaljagtap

Hi @arshadkazmi42, please review and let me know if any changes needed!

@netlify

@arshadkazmi42

@arshadkazmi42

Thanks @visshaljagtap for working on this.
But right now we are prioritizing the pages listed in #1
Please take pages from there, once those are closed we will start with other pages.
I am parking this PR for now. We will get to this when we start working on content pages

@visshaljagtap

@arshadkazmi42 I have taken the page that is listed in #1 itself also the page is already assigned to me. I think hooks pages translation should also be on priority.

@arshadkazmi42

@arshadkazmi42

@visshaljagtap Yes. Right.
Sorry about that. This is a valid page. I will start reviewing this soon

@visshaljagtap

@arshadkazmi42

arshadkazmi42

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for working on this. And great start.
i have added couple of feedbacks. can you go through and fix those.
We will continue review once these are fixed.
Refer #23 to know more about our review process

Added review till line 197

```

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` में कॉपी और पेस्ट कर सकते हैं लेकिन यह सही नहीं होगा:

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

करना चाहते हैं | => करना चाहते हैं।

इसके बजाय, हम इस लॉजिक को `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 में अधिक कौम्पोनॅन्ट को ऐड करने के लिए मजबूर किए बिना कैसे समस्याओं का समाधान करते हैं।

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

कौम्पोनॅन्ट => कौम्पोनॅन्टस

change this at both the places

इसके बजाय, हम इस लॉजिक को `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 में अधिक कौम्पोनॅन्ट को ऐड करने के लिए मजबूर किए बिना कैसे समस्याओं का समाधान करते हैं।

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

html) | अब हम => html)। अब हम

## कस्टम 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 फंक्शन के बीच लॉजिक शेयर करना चाहते हैं, तब हम इसे तीसरे फंक्शन में निकालते हैं। दोनों कौम्पोनॅन्ट और Hook फंक्शन हैं, तो यह उनके लिए भी काम करता है!

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

कौम्पोनॅन्ट => कौम्पोनॅन्टस


### Tip: Pass Information Between Hooks {#tip-pass-information-between-hooks}
### टिप: Hook के बीच जानकारी पास करें
{#tip-pass-information-between-hooks}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

move this to line 152

चूंकि 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:
इसे समझने के लिए, हम अपने काल्पनिक चैट उदाहरण से एक और कौम्पोनॅन्ट का उपयोग करेंगे | यह एक चैट संदेश प्राप्तकर्ता पिकर है जो प्रदर्शित करता है कि वर्तमान में चुना गया दोस्त ऑनलाइन है:

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

करेंगे | => करेंगे।

);
}
```
हम चुना गया friend ID को `recipientID` state variable में रखते हैं, और इसे अपडेट करेंगे यदि यूजर `<select>` पिकर में एक अलग दोस्त चुनता है।

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

चुना गया => चुने गए

);
}
```
हम चुना गया friend ID को `recipientID` state variable में रखते हैं, और इसे अपडेट करेंगे यदि यूजर `<select>` पिकर में एक अलग दोस्त चुनता है।

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

variable => वेरिएबल

```

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 पहले से चयनित दोस्त से सदस्यता समाप्त कर देगा, और नव चयनित एक की स्टेटस के लिए सदस्यता लें।

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

नहीं| => नहीं।

@saranshkataria

@visshaljagtap

@visshaljagtap

@visshaljagtap

@visshaljagtap

@visshaljagtap

@arshadkazmi42

@arshadkazmi42

We are moving our focus to beta pages. So closing this now.

Sorry about this, but feel free to pick a new page from #168