diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md
index df958dc6d..8ca39393b 100644
--- a/content/docs/hooks-overview.md
+++ b/content/docs/hooks-overview.md
@@ -1,80 +1,80 @@
---
id: hooks-overview
-title: Hooks at a Glance
+title: एक नज़र में Hooks
permalink: docs/hooks-overview.html
next: hooks-state.html
prev: hooks-intro.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 विशेषताओं का उपयोग करने देता है।
-Hooks are [backwards-compatible](/docs/hooks-intro.html#no-breaking-changes). This page provides an overview of Hooks for experienced React users. This is a fast-paced overview. If you get confused, look for a yellow box like this:
+Hooks [बैकवर्डस-कम्पेटिबल](/docs/hooks-intro.html#no-breaking-changes) है। यह पेज अनुभवी React उपयोगकर्ताओं के लिए Hooks का ओवरव्यू प्रदान करता है। यह एक तेज गति का ओवरव्यू है। यदि आप उलझन में पड़ जाते है, तो निचे दिखाए गए पीले बॉक्स की तलाश करे:
->Detailed Explanation
+>विस्तृत विवरण
>
->Read the [Motivation](/docs/hooks-intro.html#motivation) to learn why we're introducing Hooks to React.
+>Hooks के React में परिचय होने के कारणो को जानने के लिए [मोटिवेशन](/docs/hooks-intro.html#motivation) पढ़ें।
-**↑↑↑ Each section ends with a yellow box like this.** They link to detailed explanations.
+**↑↑↑ प्रत्येक खंड इस तरह के पीले बॉक्स के साथ समाप्त होता है।** वे आपको और जानकारी की तरफ ले जाते है।
## 📌 State Hook {#state-hook}
-This example renders a counter. When you click the button, it increments the value:
+यह उदाहरण एक काउंटर को रेंडर करता है। जब आप बटन पर क्लिक करते है, तो यह वैल्यू को बढ़ाता है।
```js{1,4,5}
import React, { useState } from 'react';
function Example() {
- // Declare a new state variable, which we'll call "count"
+ // एक नया state variable घोषित करा जा रहा हैं, जिसे हम "काउंट" कहेंगे
const [count, setCount] = useState(0);
return (
You clicked {count} times
);
}
```
-Here, `useState` is a *Hook* (we'll talk about what this means in a moment). We call it inside a function component to add some local state to it. React will preserve this state between re-renders. `useState` returns a pair: the *current* state value and a function that lets you update it. You can call this function from an event handler or somewhere else. It's similar to `this.setState` in a class, except it doesn't merge the old and new state together. (We'll show an example comparing `useState` to `this.state` in [Using the State Hook](/docs/hooks-state.html).)
+यहाँ, `useState` एक *Hook* है (हम इसके बारे में एक पल में बात करेंगे)। हम इसे फंक्शन कौम्पोनॅन्ट के अंदर लोकल state डालने के लिए कॉल करते है। री-रेंडरर्स के बीच React इस state को संरक्षित करता है। `useState` एक जोड़ा देता है: एक *current* state वैल्यू और एक फ़ंक्शन जो आपको इसे अपडेट करने देता है। आप इस फ़ंक्शन को किसी इवेंट हैडलर या कहीं और से कॉल कर सकते है। यह एक class में `this.setState` के समान है, लेकिन यह पुराने और नए state को एक साथ नहीं मिलाता। (हम [State Hook उपयोग करते समय](/docs/hooks-state.html) में एक उदाहरण दिखाएंगे जिसमे `useState` की `this.state` से तुलना की गयी है।
-The only argument to `useState` is the initial state. In the example above, it is `0` because our counter starts from zero. Note that unlike `this.state`, the state here doesn't have to be an object -- although it can be if you want. The initial state argument is only used during the first render.
+`UseState` का एकमात्र पैरामीटर initial state है। ऊपर दिखाए हुए उदाहरण में, यह `0` है क्योंकि हमारा काउंटर शून्य से शुरू होता है। ध्यान दें कि `this.state` के विपरीत, यहाँ state के पास कोई object नहीं है -- पर यह एक object भी हो सकता है, यदि आप चाहें। Initial state का पैरामीटर केवल पहले रेंडर के दौरान उपयोग किया जाता है।
-#### Declaring multiple state variables {#declaring-multiple-state-variables}
+#### कई state वेरिएबल्स को घोषित करना {#declaring-multiple-state-variables}
-You can use the State Hook more than once in a single component:
+आप एक कौम्पोनॅन्ट में एक से अधिक बार State Hook का उपयोग कर सकते है:
```js
function ExampleWithManyStates() {
- // Declare multiple state variables!
+ // यहाँ कई state variables घोषित हो रहे हैं!
const [age, setAge] = useState(42);
- const [fruit, setFruit] = useState('banana');
- const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
+ const [fruit, setFruit] = useState('केला');
+ const [todos, setTodos] = useState([{ text: 'Hooks सीखें' }]);
// ...
}
```
-The [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) syntax lets us give different names to the state variables we declared by calling `useState`. These names aren't a part of the `useState` API. Instead, React assumes that if you call `useState` many times, you do it in the same order during every render. We'll come back to why this works and when this is useful later.
+[ऐरे डेस्ट्रक्टरिंग] सिंटेक्स हमें state वेरिएबल्स को अलग-अलग नाम देने की सुविधा देता है जो हमें `useState` को घोषित करके मिलते है। ये नाम `useState` एपीआई का हिस्सा नहीं है। इसके बजाय, React मानता है कि यदि आप कई बार `useState` कॉल करते है, तो आप इसे हर रेंडर के दौरान उसी क्रम में करते है। हम इसके बारे में फिर बात करेंगे और बताएँगे की यह कहाँ उपयोगी होता है।
-#### But what is a Hook? {#but-what-is-a-hook}
+#### लेकिन hook है क्या? {#but-what-is-a-hook}
-Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don't work inside classes -- they let you use React without classes. (We [don't recommend](/docs/hooks-intro.html#gradual-adoption-strategy) rewriting your existing components overnight but you can start using Hooks in the new ones if you'd like.)
+Hooks ऐसे फंक्शन है जो आपको React State और लाइफ साइकिल का उपयोग फ़ंक्शन कौम्पोनॅन्टस के माध्यम से करने की सुविधा देते है। Hooks क्लासेस के अंदर काम नहीं करते - वे आपको क्लासेस के बिना React का उपयोग करने देते है। (हम [सलाह नहीं देते](/docs/hooks-intro.html#gradual-adoption-strategy) की आप अपने मौजूदा कौम्पोनॅन्टस को रात भर में Hooks में परिवर्तित करदे लेकिन यदि आप चाहें तो नए कौम्पोनॅन्टस में Hooks का उपयोग शुरू कर सकते है।)
-React provides a few built-in Hooks like `useState`. You can also create your own Hooks to reuse stateful behavior between different components. We'll look at the built-in Hooks first.
+React `useState` जैसे कुछ बने बनाये Hooks प्रदान करता है। आप विभिन्न कौम्पोनॅन्टस के बीच stateful बिहेवियर का फिर से उपयोग करने के लिए अपने स्वयं के Hooks भी बना सकते है। हम बने बनाये Hooks को पहले देखते है।
->Detailed Explanation
+>विस्तृत विवरण
>
->You can learn more about the State Hook on a dedicated page: [Using the State Hook](/docs/hooks-state.html).
+>आप समर्पित पेज पर state hook के बारे में अधिक जान सकते है: [State Hook का उपयोग करना](/docs/hooks-state.html)
## ⚡️ Effect Hook {#effect-hook}
-You've likely performed data fetching, subscriptions, or manually changing the DOM from React components before. We call these operations "side effects" (or "effects" for short) because they can affect other components and can't be done during rendering.
+आपने पहले डेटा फेचिंग, सब्स्क्रिप्शन, या मैन्युअल रूप से DOM को React कौम्पोनॅन्टस के उपयोग से बदला हुआ है। हम इन ऑपरेशनों को "साइड इफेक्ट्स" (या शॉर्ट में "effects") कहते है क्योंकि वे अन्य कौम्पोनॅन्टस को प्रभावित कर सकते है और रेंडरिंग के दौरान नहीं चलाये जा सकते।
-The Effect Hook, `useEffect`, adds the ability to perform side effects from a function component. It serves the same purpose as `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` in React classes, but unified into a single API. (We'll show examples comparing `useEffect` to these methods in [Using the Effect Hook](/docs/hooks-effect.html).)
+Effect Hook, `useEffect`, एक फ़ंक्शन कौम्पोनॅन्टस से साइड इफेक्ट करने की क्षमता देता है। यह उसी प्रकार में कार्य करता है जैसे `componentDidMount`, `componentDidUpdate`, और `componentWillUnmount` React classes में करते है, लेकिन यह एक ही API में एकीकृत है। (हम इन तरीकों की तुलना में `useEffect` की तुलना करने वाले उदाहरण यहाँ दिखाएंगे [Effect Hook का उपयोग करना](/docs/hooks-effect.html)।)
-For example, this component sets the document title after React updates the DOM:
+उदाहरण के लिए, React DOM को अपडेट करने के बाद यह कौम्पोनॅन्ट डॉक्यूमेंट का शीर्षक सेट करता है:
```js{1,6-10}
import React, { useState, useEffect } from 'react';
@@ -82,26 +82,26 @@ import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
- // Similar to componentDidMount and componentDidUpdate:
+ // `componentDidMount`, `componentDidUpdate` के समान
useEffect(() => {
- // Update the document title using the browser API
- document.title = `You clicked ${count} times`;
+ // browser API का उपयोग करके डॉक्यूमेंट के शीर्षक को अपडेट करें
+ document.title = `आपने ${count} बार क्लिक किया`;
});
return (
-
You clicked {count} times
+
आपने ${count} बार क्लिक किया
);
}
```
-When you call `useEffect`, you're telling React to run your "effect" function after flushing changes to the DOM. Effects are declared inside the component so they have access to its props and state. By default, React runs the effects after every render -- *including* the first render. (We'll talk more about how this compares to class lifecycles in [Using the Effect Hook](/docs/hooks-effect.html).)
+जब आप `useEffect` कॉल करते है, तब React DOM पे अपने बदलाव को फ्लश करके "effect" फ़ंक्शन चलाता है। कौम्पोनॅन्टस के अंदर effects को डिक्लेअर किया जाता है ताकि वो इसके props और state को यूज़ कर सके। डिफ़ॉल्ट रूप से, React हर रेंडर के बाद effects चलाता है -- पहले रेंडर *के साथ भी*। ये class lifecycles की तुलना में कैसे काम करता है इसके बारे में हम यहाँ और बात करेंगे: [Effect hook का उपयोग](/docs/hooks-effect.html)
-Effects may also optionally specify how to "clean up" after them by returning a function. For example, this component uses an effect to subscribe to a friend's online status, and cleans up by unsubscribing from it:
+Effects ऑप्शनल रूप से यह भी निर्दिष्ट कर सकते है कि उसका "clean up" कैसे करे। यह आप "effect" मैं एक फंक्शन return करके कर सकते है। उदाहरण के लिए, यह कौम्पोनॅन्ट किसी मित्र के ऑनलाइन स्टेटस को सब्सक्राइब करने के लिए एक effect का उपयोग करता है, और बाद मैं इससे अनसब्सक्राइब करके क्लीन करता है:
```js{10-16}
import React, { useState, useEffect } from 'react';
@@ -128,15 +128,15 @@ function FriendStatus(props) {
}
```
-In this example, React would unsubscribe from our `ChatAPI` when the component unmounts, as well as before re-running the effect due to a subsequent render. (If you want, there's a way to [tell React to skip re-subscribing](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) if the `props.friend.id` we passed to `ChatAPI` didn’t change.)
+इस उदाहरण में, React हमारे `ChatAPI` से तब अनसब्सक्राइब हो जाती है जब कौम्पोनॅन्ट अनमाउंट हो जाता है, और अगले रेंडर पर भी क्यूंकि हर रेंडर पे effect दोबारा चलता है। अगर `props.friend.id` नहीं बदलता जो हमने `ChatAPI` को पास किया है तो React री-सब्सक्राइबिंग को स्किप कर देगा (आप इस बारे मैं यहाँ और पढ़ सकते है: [React री-सब्सक्राइबिंग को कैसे स्किप करें](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects))
-Just like with `useState`, you can use more than a single effect in a component:
+`useState` की तरह, आप एक कौम्पोनॅन्ट में एक से अधिक effect का उपयोग कर सकते है:
```js{3,8}
function FriendStatusWithCounter(props) {
const [count, setCount] = useState(0);
useEffect(() => {
- document.title = `You clicked ${count} times`;
+ document.title = `आपने ${count} बार क्लिक किया`;
});
const [isOnline, setIsOnline] = useState(null);
@@ -153,32 +153,32 @@ function FriendStatusWithCounter(props) {
// ...
```
-Hooks let you organize side effects in a component by what pieces are related (such as adding and removing a subscription), rather than forcing a split based on lifecycle methods.
+Hooks आपको एक कौम्पोनॅन्ट में साइड इफेक्ट को व्यवस्थित करने देते है जो pieces से संबंधित होते है (जैसे कि सब्सक्रिप्शन लेना और हटाना), वे आपको लाइफसाइकिल के तरीकों के आधार पर विभाजित करने के लिए मजबूर नहीं करते।
->Detailed Explanation
+>विस्तृत विवरण
>
->You can learn more about `useEffect` on a dedicated page: [Using the Effect Hook](/docs/hooks-effect.html).
+>आप एक समर्पित पेज पर `useEffect` के बारे में अधिक जान सकते है: [Effect Hook का उपयोग करना](/docs/hooks-effect.html)
-## ✌️ Rules of Hooks {#rules-of-hooks}
+## ✌️ Hooks के नियम {#rules-of-hooks}
-Hooks are JavaScript functions, but they impose two additional rules:
+Hooks JavaScript फंक्शन्स है, लेकिन वे दो अतिरिक्त नियम लागू करते है:
-* Only call Hooks **at the top level**. Don’t call Hooks inside loops, conditions, or nested functions.
-* Only call Hooks **from React function components**. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks -- your own custom Hooks. We'll learn about them in a moment.)
+* Hooks को केवल **सबसे उपर** कॉल करें। लूप्स, कंडीशंस, या नेस्टेड फ़ंक्शन के अंदर Hooks को कॉल न करें।
+* Hooks को सिर्फ **React फ़ंक्शन कौम्पोनॅन्ट** मैं ही कॉल करें। नियमित जावास्क्रिप्ट फ़ंक्शंस से Hooks कॉल न करें। (Hooks को कॉल करने के लिए सिर्फ एक अन्य वैध स्थान है -- अपने स्वयं के कस्टम Hooks। हम उनके बारे में एक क्षण में जानेंगे।)
-We provide a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to enforce these rules automatically. We understand these rules might seem limiting or confusing at first, but they are essential to making Hooks work well.
+हम एक [लिंटर प्लगइन](https://www.npmjs.com/package/eslint-plugin-react-hooks) यूज़ करेंगे जो इन नियमों को खुद लागू कर देगा। हम समझते है कि ये नियम शुरू मैं थोड़े सीमित या मुश्किल लग सकते हैं, लेकिन वे Hooks को अच्छे से काम करने के लिए आवश्यक है।
->Detailed Explanation
+>विस्तृत विवरण
>
->You can learn more about these rules on a dedicated page: [Rules of Hooks](/docs/hooks-rules.html).
+>आप एक समर्पित पेज पर इन नियमों के बारे में अधिक जान सकते है: [Hooks के नियम](/docs/hooks-rules.html)
-## 💡 Building Your Own Hooks {#building-your-own-hooks}
+## 💡 अपने खुद के Hooks बनाना {#building-your-own-hooks}
-Sometimes, we want to reuse some stateful logic between components. Traditionally, there were two popular solutions to this problem: [higher-order components](/docs/higher-order-components.html) and [render props](/docs/render-props.html). Custom Hooks let you do this, but without adding more components to your tree.
+कभी-कभी, हम कौम्पोनॅन्टस के बीच कुछ स्टेटफुल लॉजिक का फिर से उपयोग करना चाहते है। परंपरागत रूप से, इस समस्या के दो लोकप्रिय समाधान थे: [higher-order कौम्पोनॅन्ट](/docs/higher-order-components.html) और [रेंडर प्रॉप्स](/docs/render-props.html)। लेकिन कस्टम Hooks आपको आपके tree में अधिक कौम्पोनॅन्ट को ऐड करे बिना ऐसा करने देते है।
-Earlier on this page, we introduced a `FriendStatus` component that calls the `useState` and `useEffect` Hooks to subscribe to a friend's online status. Let's say we also want to reuse this subscription logic in another component.
+इस पेज मैं पहले, हमने एक `FriendStatus` कौम्पोनॅन्ट पेश किया था, जो किसी मित्र के ऑनलाइन स्टेटस की सब्सक्रिप्शन के लिए `useState` और `useEffect` Hook को कॉल करता है। मान लें कि हम इस सब्सक्रिप्शन लॉजिक को किसी अन्य कौम्पोनॅन्ट में फिर से उपयोग करना चाहते है।
-First, we'll extract this logic into a custom Hook called `useFriendStatus`:
+सबसे पहले, हम इस लॉजिक को `useFriendStatus` नामक एक कस्टम Hook में निकालेंगे:
```js{3}
import React, { useState, useEffect } from 'react';
@@ -201,9 +201,9 @@ function useFriendStatus(friendID) {
}
```
-It takes `friendID` as an argument, and returns whether our friend is online.
+यह एक आर्गुमेंट के रूप में `friendID` लेता है, और रिटर्न करता है कि क्या हमारा दोस्त ऑनलाइन है।
-Now we can use it from both components:
+अब हम इसे दोनों कौम्पोनॅन्टस में उपयोग कर सकते है:
```js{2}
@@ -229,19 +229,19 @@ function FriendListItem(props) {
}
```
-The state of these components is completely independent. Hooks are a way to reuse *stateful logic*, not state itself. In fact, each *call* to a Hook has a completely isolated state -- so you can even use the same custom Hook twice in one component.
+इन कौम्पोनॅन्टस की स्टेट पूरी तरह से स्वतंत्र है। Hooks *स्टेट फुल लॉजिक* का फिर से उपयोग करने का एक तरीका है, न कि state का। वास्तव में, एक Hook करने के लिए प्रत्येक *कॉल* में एक पूरी तरह से अलग state है -- आप वही कस्टम Hook एक ही कौम्पोनॅन्ट में दो बार उपयोग कर सकते है।
-Custom Hooks are more of a convention than a feature. If a function's name starts with "`use`" and it calls other Hooks, we say it is a custom Hook. The `useSomething` naming convention is how our linter plugin is able to find bugs in the code using Hooks.
+कस्टम Hooks एक विशेषता से ज़्यादा एक कन्वेंशन है। यदि किसी फ़ंक्शन का नाम "`use`" से शुरू होता है और इसे अन्य Hooks कॉल करते है, तो हम कहते है कि यह एक कस्टम Hook है। हमारे लिंटर प्लगइन `useSomething` नामकरण कन्वेंशन का उपयोग करके कोड में बग ढूंढने में मदद करता है।
-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. We are excited to see what custom Hooks the React community will come up with.
+आप कस्टम Hooks फॉर्म हैडलिंग, एनीमेशन, डेक्लेरेटिव सब्सक्रिप्शन, टाइमर और शायद और अधिक यूज़ केसेस के लिए लिख सकते है जिसपे हमने कभी विचार भी नहीं किया। हम यह देखने के लिए उत्साहित है कि React समुदाय और कौन कौन से कस्टम Hooks लेकर आएंगे।
->Detailed Explanation
+>विस्तृत विवरण
>
->You can learn more about custom Hooks on a dedicated page: [Building Your Own Hooks](/docs/hooks-custom.html).
+>आप एक समर्पित पेज पर कस्टम Hooks के बारे में अधिक जान सकते है: [अपने खुद के Hooks का निर्माण](/docs/hooks-custom.html).
-## 🔌 Other Hooks {#other-hooks}
+## 🔌 अन्य Hooks {#other-hooks}
-There are a few less commonly used built-in Hooks that you might find useful. For example, [`useContext`](/docs/hooks-reference.html#usecontext) lets you subscribe to React context without introducing nesting:
+कुछ Hooks ऐसे भी है जो कम इस्तेमाल होते है। उदाहरण के लिए, [`useContext`](/docs/hooks-reference.html#usecontext) आपको नेस्टिंग के बिना React context को सब्सक्राइब करने देता है:
```js{2,3}
function Example() {
@@ -251,7 +251,7 @@ function Example() {
}
```
-And [`useReducer`](/docs/hooks-reference.html#usereducer) lets you manage local state of complex components with a reducer:
+और [`useReducer`](/docs/hooks-reference.html#usereducer) आपको एक reducer के साथ जटिल कौम्पोनॅन्टस के लोकल state को संभालने देता है:
```js{2}
function Todos() {
@@ -259,14 +259,14 @@ function Todos() {
// ...
```
->Detailed Explanation
+>विस्तृत विवरण
>
->You can learn more about all the built-in Hooks on a dedicated page: [Hooks API Reference](/docs/hooks-reference.html).
+>आप एक समर्पित पेज पर सब बिल्ड इन Hooks के बारे में अधिक जान सकते है: [Hooks API संदर्भ](/docs/hooks-reference.html)
-## Next Steps {#next-steps}
+## अगला कदम {#next-steps}
-Phew, that was fast! If some things didn't quite make sense or you'd like to learn more in detail, you can read the next pages, starting with the [State Hook](/docs/hooks-state.html) documentation.
+अगर आपको कुछ चीजें समझ में नहीं आईं या आप अधिक विस्तार से सीखना चाहते है, आप अगले पेज पढ़ सकते है, [State Hook](/docs/hooks-state.html) डॉक्यूमेंटेशन के साथ शुरू करते हुए।
-You can also check out the [Hooks API reference](/docs/hooks-reference.html) and the [Hooks FAQ](/docs/hooks-faq.html).
+आप इन पेजों को भी देख सकते है: [Hooks API संदर्भ](/docs/hooks-reference.html) और [Hooks FAQ](/docs/hooks-faq.html)
-Finally, don't miss the [introduction page](/docs/hooks-intro.html) which explains *why* we're adding Hooks and how we'll start using them side by side with classes -- without rewriting our apps.
+अंत में, [introduction page](/docs/hooks-intro.html) को देखना ना भूले जो बताता है कि *हम* Hooks क्यों बना रहे है और कैसे हम classes के साथ-साथ उनका उपयोग करना शुरू करेंगे -- हमारे एप्लिकेशन को फिरसे लिखे बिना।