From f7aaf80f14b9c863e982b7fa9df0dc4fdf65dd73 Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Tue, 23 Aug 2022 19:45:47 +0530
Subject: [PATCH 01/26] translated till line 50
Hey, @arshadkazmi42 I have translated till line 50. Plz, review it so that I can keep continuing the translation.
---
.../pages/learn/updating-objects-in-state.md | 28 +++++++++----------
1 file changed, 14 insertions(+), 14 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index d5bdcb634..4db2e7e70 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -1,51 +1,51 @@
---
-title: Updating Objects in State
+title: स्टेट में ऑब्जेक्ट्स को अपडेट करना
---
-State can hold any kind of JavaScript value, including objects. But you shouldn't change objects that you hold in the React state directly. Instead, when you want to update an object, you need to create a new one (or make a copy of an existing one), and then set the state to use that copy.
+स्टेट कोई भी जावास्क्रिप्ट वैल्यू स्टोर करसकती है, ऑब्जेक्ट समेत। लेकिन आपको कभी भी ऑब्जेक्ट्स को बदलना नहीं चैयाह जो आप React स्टेट में होल्ड करते है। उसके बजाए आपको जब भी ऑब्जेक्ट को अपडेट करना हो या तो आप एक नया ऑब्जेक्ट बनाये या उसी की एक कॉपी बनाये और फिर स्टेट को सेट करदे उस कॉपी का उपयोग करने के लिये।
-- How to correctly update an object in React state
-- How to update a nested object without mutating it
-- What immutability is, and how not to break it
-- How to make object copying less repetitive with Immer
+- React में सही से ऑब्जेक्ट को कैसे अपडेट करे
+- बिना बदले कैसे नेस्टेड ऑब्जेक्ट को अपडेट करे
+- इम्म्यूटेबलिटी क्या होती है और कैसे उसे न तोड़े
+- Immer की मदद से एक जैसे ऑब्जेक्टस को बार-बार कम कैसे बनाये
-## What's a mutation? {/*whats-a-mutation*/}
+## म्युटेशन क्या होती है ? {/*whats-a-mutation*/}
-You can store any kind of JavaScript value in state.
+आप स्टेट में कोई भी जावास्क्रिप्ट वैल्यू स्टोर करसकते है
```js
const [x, setX] = useState(0);
```
-So far you've been working with numbers, strings, and booleans. These kinds of JavaScript values are "immutable," meaning unchangeable or "read-only." You can trigger a re-render to _replace_ a value:
+अभी तक आप नंबर्स, स्ट्रिंग्स, और बूलियन के साथ काम कर रहे थे। ऐसी जावास्क्रिप्ट वैल्यूज " इम्म्यूटेबल " होती है, मतलब जो कभी बदल न सके या " रीड-ओनली " हो। आप रीरेंदर ट्रिगर करसकते है वैल्यू को _ब्दलने_ के लिया।
```js
setX(5);
```
-The `x` state changed from `0` to `5`, but the _number `0` itself_ did not change. It's not possible to make any changes to the built-in primitive values like numbers, strings, and booleans in JavaScript.
+स्टेट `x` `0` से `5` तक बदली है, लेकिन _नंबर `0` खुद_ बदला नहीं है। जावास्क्रिप्ट में ये मुमकिन नहीं है की बिल्ट-इन प्रिमिटिव वैल्यूज जैसे की नंबर्स, स्टिंग्स, और बूलियन बदल सके।
-Now consider an object in state:
+अब विचार कीजिये एक ऑब्जेक्ट स्टेट में है:
```js
const [position, setPosition] = useState({ x: 0, y: 0 });
```
-Technically, it is possible to change the contents of _the object itself_. **This is called a mutation:**
+तकनीकी ओर से यह मुमकिन है की _खुदी ऑब्जेक्ट_ के कंटेंट को चेंज करसके। **यही म्युटेशन कहलाता है:**
```js
position.x = 5;
```
-However, although objects in React state are technically mutable, you should treat them **as if** they were immutable--like numbers, booleans, and strings. Instead of mutating them, you should always replace them.
+हलाक, जबकि React स्टेट में ऑब्जेक्ट्स तकनीकी रूप से मुटेबल होते है, आपको उनके साथ ऐसे व्यवहार करना चैयाह **जैसे वो** इम्म्यूटेबल हो नंबर्स, बूलियनस, और स्ट्रिंग्स की तरह। उनको म्यूटेट करने की बजाए, आपको हमेशा उनको ररिप्लेस करना चैयाह।
## Treat state as read-only {/*treat-state-as-read-only*/}
@@ -1612,4 +1612,4 @@ select { margin-bottom: 10px; }
-
\ No newline at end of file
+
From cbabc5fb7816bbc5d7c856dfb29050f1d9addf17 Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Wed, 31 Aug 2022 08:48:55 +0530
Subject: [PATCH 02/26] Update updating-objects-in-state.md
---
beta/src/pages/learn/updating-objects-in-state.md | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index 4db2e7e70..cec14ff94 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -47,11 +47,11 @@ position.x = 5;
हलाक, जबकि React स्टेट में ऑब्जेक्ट्स तकनीकी रूप से मुटेबल होते है, आपको उनके साथ ऐसे व्यवहार करना चैयाह **जैसे वो** इम्म्यूटेबल हो नंबर्स, बूलियनस, और स्ट्रिंग्स की तरह। उनको म्यूटेट करने की बजाए, आपको हमेशा उनको ररिप्लेस करना चैयाह।
-## Treat state as read-only {/*treat-state-as-read-only*/}
+## स्टेट का रीड -ओनली व्यवहार करना {/*treat-state-as-read-only*/}
-In other words, you should **treat any JavaScript object that you put into state as read-only.**
+दुसरे शब्दों में, आपको **स्टेट में मौजूद जावास्क्रिप्ट ऑब्जेक्ट के साथ हमेशा रीड-ओनली व्यवहार करना चैयाह**
-This example holds an object in state to represent the current pointer position. The red dot is supposed to move when you touch or move the cursor over the preview area. But the dot stays in the initial position:
+दिए गए उदाहरण में, स्टेट में मोजूद ऑब्जेक्ट वर्तमान में पॉइंटर का स्थान बता रहा है। मौजूद लाल बिंदु पर कर्सर टच या प्रीव्यू करने पे अपना स्थान बदलना छियाह। परन्तु बिंदु अपने स्थान पे ही रहती है:
From 551703a19f9812be1d61af1af6ac984edcc40989 Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Wed, 31 Aug 2022 18:42:09 +0530
Subject: [PATCH 03/26] Update updating-objects-in-state.md
---
beta/src/pages/learn/updating-objects-in-state.md | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index cec14ff94..bd7e7314d 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -47,7 +47,7 @@ position.x = 5;
हलाक, जबकि React स्टेट में ऑब्जेक्ट्स तकनीकी रूप से मुटेबल होते है, आपको उनके साथ ऐसे व्यवहार करना चैयाह **जैसे वो** इम्म्यूटेबल हो नंबर्स, बूलियनस, और स्ट्रिंग्स की तरह। उनको म्यूटेट करने की बजाए, आपको हमेशा उनको ररिप्लेस करना चैयाह।
-## स्टेट का रीड -ओनली व्यवहार करना {/*treat-state-as-read-only*/}
+## स्टेट का रीड-ओनली व्यवहार करना {/*treat-state-as-read-only*/}
दुसरे शब्दों में, आपको **स्टेट में मौजूद जावास्क्रिप्ट ऑब्जेक्ट के साथ हमेशा रीड-ओनली व्यवहार करना चैयाह**
@@ -94,7 +94,7 @@ body { margin: 0; padding: 0; height: 250px; }
-The problem is with this bit of code.
+दिकत इस दिए गए कोड में है।
```js
onPointerMove={e => {
@@ -103,9 +103,9 @@ onPointerMove={e => {
}}
```
-This code modifies the object assigned to `position` from [the previous render](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time). But without using the state setting function, React has no idea that object has changed. So React does not do anything in response. It's like trying to change the order after you've already eaten the meal. While mutating state can work in some cases, we don't recommend it. You should treat the state value you have access to in a render as read-only.
+दिया गया कोड शंशोदित करता है सोपे गए उस `स्थान` पे ऑब्जेक्ट को [पिछली रेंडर](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) से। परन्तु बिना स्टेट सेटिंग फंक्शन का उपयोग करे, React को कोई अंदाज़ा नहीं है की ऑब्जेक्ट में परिवर्तन आये है। इसलिए React कुछ जवाब नहीं देता। उद्धरण के लिए आप भोजन करने के बाद भोजन का गढ़ बदल रहे है। हालाँकि कुछ मामलो में स्टेट को म्यूटेट करना काम करता है। परन्तु असा करना हम सुझाव नहीं देते। आपको हमेशा स्टेट में उपलब्ध वैल्यू को मौजूद रेंडर में हमेशा रीड-ओनली व्यवहार करना चैयाह।
-To actually [trigger a re-render](/learn/state-as-a-snapshot#setting-state-triggers-renders) in this case, **create a *new* object and pass it to the state setting function:**
+वास्तव में [रे-रेंडर ट्रिगर](/learn/state-as-a-snapshot#setting-state-triggers-renders) करने के लिया , **एक *नया* ऑब्जेक्ट सर्जन करे और स्टेट सेटिंग फंक्शन में पास करदे:**
```js
onPointerMove={e => {
From 9d8770d54d088b71269e9ae4d907373f7bd168d0 Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Wed, 31 Aug 2022 20:01:49 +0530
Subject: [PATCH 04/26] Update updating-objects-in-state.md
---
beta/src/pages/learn/updating-objects-in-state.md | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index bd7e7314d..ab4c71d38 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -116,12 +116,12 @@ onPointerMove={e => {
}}
```
-With `setPosition`, you're telling React:
+`सेट पोजीशन` के द्वारा, आप React को बता रहे है:
-* Replace `position` with this new object
-* And render this component again
+* `पोजीशन` को बदले नए बने ऑब्जेक्ट्स से
+* इस कॉम्पोनेन्ट को दोबारा रेंडर करे
-Notice how the red dot now follows your pointer when you touch or hover over the preview area:
+नोटिस करिये कैसे लाल बिंदु पालन कर रहा है पॉइंटर का जब अप्प टच या होवर करते है प्रीव्यू पर:
From 55cf041a0ff00e0c100dd2578afc1330f1e4d28f Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Wed, 31 Aug 2022 20:27:36 +0530
Subject: [PATCH 05/26] Update updating-objects-in-state.md
---
beta/src/pages/learn/updating-objects-in-state.md | 9 ++++-----
1 file changed, 4 insertions(+), 5 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index ab4c71d38..341afcb9d 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -168,14 +168,13 @@ body { margin: 0; padding: 0; height: 250px; }
-Code like this is a problem because it modifies an *existing* object in state:
+इस तरह का कोड एक समस्या है क्योंकि यह स्टेट में *मौजूदा* ऑब्जेक्ट को संशोधित करता है:
```js
position.x = e.clientX;
position.y = e.clientY;
```
-
-But code like this is **absolutely fine** because you're mutating a fresh object you have *just created*:
+लेकिन इस तरह का कोड *बिल्कुल ठीक* है क्योंकि आप एक ताजा ऑब्जेक् को बदल रहे हैं जिसे आपने *अभी बनाया है*:
```js
const nextPosition = {};
@@ -184,7 +183,7 @@ nextPosition.y = e.clientY;
setPosition(nextPosition);
````
-In fact, it is completely equivalent to writing this:
+वास्तव में, यह पूरी तरह से इसे लिखने के बराबर है:
```js
setPosition({
@@ -193,7 +192,7 @@ setPosition({
});
```
-Mutation is only a problem when you change *existing* objects that are already in state. Mutating an object you've just created is okay because *no other code references it yet.* Changing it isn't going to accidentally impact something that depends on it. This is called a "local mutation." You can even do local mutation [while rendering](/learn/keeping-components-pure#local-mutation-your-components-little-secret). Very convenient and completely okay!
+म्युटेशन केवल एक समस्या है जब आप *मौजूदा* ऑब्जेक्ट् को बदलते हैं जो पहले से ही स्टेट में हैं। आपके द्वारा अभी-अभी बनाई गई ऑब्जेक्ट को बदलना ठीक है क्योंकि *अभी तक कोई अन्य कोड इसका संदर्भ नहीं देता है।* इसे बदलने से गलती से उस पर निर्भर किसी चीज़ पर प्रभाव नहीं पड़ेगा। इसे "स्थानीय उत्परिवर्तन" कहा जाता है। आप स्थानीय उत्परिवर्तन भी कर सकते हैं [प्रतिपादन करते समय](/learn/keeping-components-pure#local-mutation-your-components-little-secret) बहुत सुविधाजनक और पूरी तरह से ठीक!
From edc742de31f73de366ffd2f339d09c9be3ec91cc Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Thu, 1 Sep 2022 12:34:41 +0530
Subject: [PATCH 06/26] translated till line 440
translated till line 440 in hindi
---
.../pages/learn/updating-objects-in-state.md | 23 +++++++++----------
1 file changed, 11 insertions(+), 12 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index 341afcb9d..682c2b84a 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -196,11 +196,11 @@ setPosition({
-## Copying objects with the spread syntax {/*copying-objects-with-the-spread-syntax*/}
+## स्प्रेड सिंटैक्स के साथ ऑब्जेक्ट्स की प्रतिलिपि बनाना {/*copying-objects-with-the-spread-syntax*/}
-In the previous example, the `position` object is always created fresh from the current cursor position. But often, you will want to include *existing* data as a part of the new object you're creating. For example, you may want to update *only one* field in a form, but keep the previous values for all other fields.
+पिछले उदाहरण में, `स्थिति` ऑब्जेक्ट हमेशा वर्तमान कर्सर स्थिति से ताजा बनाई जाती है। लेकिन अक्सर, आप अपने द्वारा बनाई जा रही नई ऑब्जेक्ट के हिस्से के रूप में *मौजूदा* डेटा शामिल करना चाहेंगे। उदाहरण के लिए, आप किसी प्रपत्र में *केवल एक* फ़ील्ड को अपडेट करना चाह सकते हैं, लेकिन अन्य सभी फ़ील्ड के लिए पिछले मान रख सकते हैं।
-These input fields don't work because the `onChange` handlers mutate the state:
+ये इनपुट फ़ील्ड काम नहीं करते क्योंकि `ऑन चेंज` हैंडलर स्टेट को बदलते हैं:
@@ -266,13 +266,12 @@ input { margin-left: 5px; margin-bottom: 5px; }
-For example, this line mutates the state from a past render:
-
+उदाहरण के लिए, यह लाइन स्टेट को पिछले रेंडर से बदल देती है:
```js
person.firstName = e.target.value;
```
-The reliable way to get the behavior you're looking for is to create a new object and pass it to `setPerson`. But here, you want to also **copy the existing data into it** because only one of the fields has changed:
+आप जिस व्यवहार की तलाश कर रहे हैं उसे प्राप्त करने का विश्वसनीय तरीका एक नई ऑब्जेक्ट बनाना और उसे 'सेटपर्सन' को पास करना है। लेकिन यहां, आप **मौजूदा डेटा को इसमें कॉपी करना चाहते हैं** क्योंकि केवल एक फ़ील्ड बदल गई है:
```js
setPerson({
@@ -282,7 +281,7 @@ setPerson({
});
```
-You can use the `...` [object spread](a-javascript-refresher#object-spread) syntax so that you don't need to copy every property separately.
+आप `...` [ऑब्जेक्ट स्प्रेड](a-javascript-refresher#object-spread) सिंटैक्स का उपयोग कर सकते हैं ताकि आपको प्रत्येक प्रॉपर्टी को अलग से कॉपी करने की आवश्यकता न पड़े।
```js
setPerson({
@@ -291,9 +290,9 @@ setPerson({
});
```
-Now the form works!
+अब फॉर्म काम करता है!
-Notice how you didn't declare a separate state variable for each input field. For large forms, keeping all data grouped in an object is very convenient--as long as you update it correctly!
+ध्यान दें कि आपने प्रत्येक इनपुट फ़ील्ड के लिए एक अलग स्टेट वैल्यू घोषित नहीं किया। बड़े रूपों के लिए, सभी डेटा को किसी ऑब्जेक्ट में समूहीकृत रखना बहुत सुविधाजनक है--जब तक आप इसे सही तरीके से अपडेट करते हैं!
@@ -368,11 +367,11 @@ input { margin-left: 5px; margin-bottom: 5px; }
-Note that the `...` spread syntax is "shallow"--it only copies things one level deep. This makes it fast, but it also means that if you want to update a nested property, you'll have to use it more than once.
+ध्यान दें कि `...` स्प्रेड सिंटैक्स "उथला" है - यह केवल चीजों को एक स्तर की गहराई तक कॉपी करता है। यह इसे तेज़ बनाता है, लेकिन इसका मतलब यह भी है कि यदि आप किसी नेस्टेड प्रॉपर्टी को अपडेट करना चाहते हैं, तो आपको इसे एक से अधिक बार उपयोग करना होगा।
-You can also use the `[` and `]` braces inside your object definition to specify a property with dynamic name. Here is the same example, but with a single event handler instead of three different ones:
+आप डायनामिक नाम वाली किसी प्रॉपर्टी को निर्दिष्ट करने के लिए अपनी ऑब्जेक्ट परिभाषा के अंदर `[` और `]` ब्रेसिज़ का भी उपयोग कर सकते हैं। यहां एक ही उदाहरण है, लेकिन तीन अलग-अलग लोगों के बजाय एक ही ईवेंट हैंडलर के साथ:
@@ -436,7 +435,7 @@ input { margin-left: 5px; margin-bottom: 5px; }
-Here, `e.target.name` refers to the `name` property given to the `` DOM element.
+यहां, `e.target.name` का मतलब `नाम` प्रॉपर्टी है जो `` DOM तत्व को दी गई है।
From e73b4ac8dd83b7486247bbf298554f8bf78831a8 Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Thu, 1 Sep 2022 16:07:26 +0530
Subject: [PATCH 07/26] Update updating-objects-in-state.md
---
.../pages/learn/updating-objects-in-state.md | 20 +++++++++----------
1 file changed, 10 insertions(+), 10 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index 682c2b84a..861e754cd 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -439,9 +439,9 @@ input { margin-left: 5px; margin-bottom: 5px; }
-## Updating a nested object {/*updating-a-nested-object*/}
+## नेस्टेड ऑब्जेक्ट को अपडेट करना {/*updating-a-nested-object*/}
-Consider a nested object structure like this:
+इस तरह एक नेस्टेड ऑब्जेक्ट संरचना पर विचार करें:
```js
const [person, setPerson] = useState({
@@ -454,13 +454,13 @@ const [person, setPerson] = useState({
});
```
-If you wanted to update `person.artwork.city`, it's clear how to do it with mutation:
+यदि आप `person.artwork.city` को अपडेट करना चाहते हैं, तो यह स्पष्ट है कि इसे उत्परिवर्तन के साथ कैसे किया जाए:
```js
person.artwork.city = 'New Delhi';
```
-But in React, you treat state as immutable! In order to change `city`, you would first need to produce the new `artwork` object (pre-populated with data from the previous one), and then produce the new `person` object which points at the new `artwork`:
+लेकिन React में, आप ऑब्जेक्ट को अपरिवर्तनीय मानते हैं! `शहर` को बदलने के लिए, आपको पहले नई `कलाकृति` ऑब्जेक्ट (पिछले एक से डेटा के साथ पूर्व-आबादी) का उत्पादन करना होगा, और फिर नई `व्यक्ति` ऑब्जेक्ट का उत्पादन करना होगा जो नई `कलाकृति` पर इंगित करता है:
```js
const nextArtwork = { ...person.artwork, city: 'New Delhi' };
@@ -468,7 +468,7 @@ const nextPerson = { ...person, artwork: nextArtwork };
setPerson(nextPerson);
```
-Or, written as a single function call:
+या, एकल फ़ंक्शन कॉल के रूप में लिखा गया है:
```js
setPerson({
@@ -480,7 +480,7 @@ setPerson({
});
```
-This gets a bit wordy, but it works fine for many cases:
+यह थोड़ा चिंताजनक है, लेकिन यह कई मामलों में ठीक काम करता है:
@@ -590,7 +590,7 @@ img { width: 200px; height: 200px; }
-An object like this appears "nested" in code:
+इस तरह का ऑब्जेक्ट कोड में "नेस्टेड" दिखाई देता है:
```js
let obj = {
@@ -603,7 +603,7 @@ let obj = {
};
```
-However, "nesting" is an inaccurate way to think about how objects behave. When the code executes, there is no such thing as a "nested" object. You are really looking at two different objects:
+हालांकि, "नेस्टिंग " ऑब्जेक्ट्स के व्यवहार के बारे में सोचने का एक गलत तरीका है। जब कोड निष्पादित होता है, तो "नेस्टेड" ऑब्जेक्ट जैसी कोई चीज़ नहीं होती है। आप वास्तव में दो अलग-अलग ऑब्जेक्ट को देख रहे हैं:
```js
let obj1 = {
@@ -618,7 +618,7 @@ let obj2 = {
};
```
-The `obj1` object is not "inside" `obj2`. For example, `obj3` could "point" at `obj1` too:
+`obj1` ऑब्जेक्ट "अंदर" `obj2` नहीं है। उदाहरण के लिए, `obj3` `obj1` पर भी "बिंदु" कर सकता है:
```js
let obj1 = {
@@ -638,7 +638,7 @@ let obj3 = {
};
```
-If you were to mutate `obj3.artwork.city`, it would affect both `obj2.artwork.city` and `obj1.city`. This is because `obj3.artwork`, `obj2.artwork`, and `obj1` are the same object. This is difficult to see when you think of objects as "nested". Instead, they are separate objects "pointing" at each other with properties.
+अगर आप `obj3.artwork.city` को बदलते हैं, तो यह `obj2.artwork.city` और `obj1.city` दोनों को प्रभावित करेगा। ऐसा इसलिए है क्योंकि `obj3.artwork`, `obj2.artwork`, और `obj1` एक ही ऑब्जेक्ट हैं। यह देखना मुश्किल है कि आप ऑब्जेक्ट्स को "नेस्टेड" के रूप में कब सोचते हैं। इसके बजाय, वे अलग-अलग ऑब्जेक्ट हैं जो गुणों के साथ एक दूसरे पर "इंगित" करती हैं।
From 9a0dea85ed45cdd5580cbc954130c30699f1d715 Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Thu, 1 Sep 2022 17:34:36 +0530
Subject: [PATCH 08/26] Update updating-objects-in-state.md
---
.../pages/learn/updating-objects-in-state.md | 51 +++++++++----------
1 file changed, 25 insertions(+), 26 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index 861e754cd..f96b390a5 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -642,9 +642,10 @@ let obj3 = {
-### Write concise update logic with Immer {/*write-concise-update-logic-with-immer*/}
+### Immer के साथ संक्षिप्त अद्यतन तर्क लिखें {/*write-concise-update-logic-with-immer*/}
-If your state is deeply nested, you might want to consider [flattening it](/learn/choosing-the-state-structure#avoid-deeply-nested-state). But, if you don't want to change your state structure, you might prefer a shortcut to nested spreads. [Immer](https://github.com/immerjs/use-immer) is a popular library that lets you write using the convenient but mutating syntax and takes care of producing the copies for you. With Immer, the code you write looks like you are "breaking the rules" and mutating an object:
+
+यदि आपका स्टेट गहरा नेस्टेड है, तो आप [इसे समतल करना](/learn/choosing-the-state-structure#avoid-deeply-nested-state) पर विचार करना चाहेंगे। लेकिन, यदि आप अपनी स्टेट संरचना को बदलना नहीं चाहते हैं, तो आप नेस्टेड स्प्रेड के लिए एक शॉर्टकट पसंद कर सकते हैं। [इमर](https://github.com/immerjs/use-immer) एक लोकप्रिय लाइब्रेरी है जो आपको सुविधाजनक लेकिन परिवर्तनशील सिंटैक्स का उपयोग करके लिखने देता है और आपके लिए प्रतियां तैयार करने का ख्याल रखता है। Immer के साथ, आपके द्वारा लिखा गया कोड ऐसा लगता है जैसे आप "नियम तोड़ रहे हैं" और किसी वस्तु को बदल रहे हैं:
```js
updatePerson(draft => {
@@ -652,21 +653,20 @@ updatePerson(draft => {
});
```
-But unlike a regular mutation, it doesn't overwrite the past state!
+लेकिन एक नियमित उत्परिवर्तन के विपरीत, यह पिछली स्थिति को अधिलेखित नहीं करता है!
-The `draft` provided by Immer is a special type of object, called a [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), that "records" what you do with it. This is why you can mutate it freely as much as you like! Under the hood, Immer figures out which parts of the `draft` have been changed, and produces a completely new object that contains your edits.
-
+Immer द्वारा प्रदान किया गया `ड्राफ़्ट` एक विशेष प्रकार की ऑब्जेक्ट है, जिसे [प्रॉक्सी](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) कहा जाता है, जो "रिकॉर्ड करता है" "आप इसके साथ क्या करते हैं। यही कारण है कि आप इसे जितना चाहें उतना स्वतंत्र रूप से बदल सकते हैं! हुड के तहत, Immer यह पता लगाता है कि `ड्राफ़्ट` के किन हिस्सों को बदल दिया गया है, और एक पूरी तरह से नया ऑब्जेक्ट तैयार करता है जिसमें आपके संपादन शामिल हैं।
-To try Immer:
+इमर को आजमाने के लिए:
-1. Add `use-immer` to your `package.json` as a dependency
-2. Run `npm install`
-3. Then replace `import { useState } from 'react'` with `import { useImmer } from 'use-immer'`
+1. डिपेंडेंसी के रूप में अपने `package.json` में `use-immer` जोड़ें
+2. रन `एनपीएम इंस्टॉल
+3. फिर `import {useState} को 'react' से बदलकर `import {useImmer} से 'use-immer'` से बदलें
-Here is the above example converted to Immer:
+यहाँ उदाहरण Immer में परिवर्तित किया गया है:
@@ -779,31 +779,30 @@ img { width: 200px; height: 200px; }
-Notice how much more concise the event handlers have become. You can mix and match `useState` and `useImmer` in a single component as much as you like. Immer is a great way to keep the update handlers concise, especially if there's nesting in your state, and copying objects leads to repetitive code.
+ध्यान दें कि ईवेंट हैंडलर कितने अधिक संक्षिप्त हो गए हैं। आप जितना चाहें उतना एक ही कॉम्पोनेन्ट में `useState` और `useImmer` को मिला सकते हैं। इमर अपडेट हैंडलर को संक्षिप्त रखने का एक शानदार तरीका है, खासकर यदि आपके स्टेट में नेस्टिंग है, और ऑब्जेक्ट की प्रतिलिपि बनाने से दोहराव कोड होता है।
-There are a few reasons:
-
-* **Debugging:** If you use `console.log` and don't mutate state, your past logs won't get clobbered by the more recent state changes. So you can clearly see how state has changed between renders.
-* **Optimizations:** Common React [optimization strategies](/learn/skipping-unchanged-trees) rely on skipping work if previous props or state are the same as the next ones. If you never mutate state, it is very fast to check whether there were any changes. If `prevObj === obj`, you can be sure that nothing could have changed inside of it.
-* **New Features:** The new React features we're building rely on state being [treated like a snapshot](/learn/state-as-a-snapshot). If you're mutating past versions of state, that may prevent you from using the new features.
-* **Requirement Changes:** Some application features, like implementing Undo/Redo, showing a history of changes, or letting the user reset a form to earlier values, are easier to do when nothing is mutated. This is because you can keep past copies of state in memory, and reuse them when appropriate. If you start with a mutative approach, features like this can be difficult to add later on.
-* **Simpler Implementation:** Because React does not rely on mutation, it does not need to do anything special with your objects. It does not need to hijack their properties, always wrap them into Proxies, or do other work at initialization as many "reactive" solutions do. This is also why React lets you put any object into state--no matter how large--without additional performance or correctness pitfalls.
+कुछ कारण हैं:
-In practice, you can often "get away" with mutating state in React, but we strongly advise you not to do that so that you can use new React features developed with this approach in mind. Future contributors and perhaps even your future self will thank you!
+* **डिबगिंग:** यदि आप `console.log` का उपयोग करते हैं और स्टेट को परिवर्तित नहीं करते हैं, तो आपके पिछले लॉग हाल के स्टेट परिवर्तनों से प्रभावित नहीं होंगे। तो आप स्पष्ट रूप से देख सकते हैं कि रेंडरर्स के बीच सताते कैसे बदल गया है।
+* **ऑप्टिमिजाशंस:** कॉमन रिएक्ट [ऑप्टिमाइज़ेशन स्ट्रेटेजी](/learn/skipping-unchanged-trees) लंघन कार्य पर भरोसा करते हैं यदि पिछले प्रॉप्स या स्टेट अगले वाले के समान हैं। यदि आप कभी भी स्टेट को उत्परिवर्तित नहीं करते हैं, तो यह जांचना बहुत तेज़ है कि क्या कोई परिवर्तन हुआ है। यदि `prevObj === obj` है, तो आप सुनिश्चित हो सकते हैं कि इसके अंदर कुछ भी नहीं बदला होगा।
+* **नए विशेषताएँ:** हम जो नई रिएक्ट सुविधाएँ बना रहे हैं, वे राज्य के [स्नैपशॉट की तरह व्यवहार](/learn/state-as-a-snapshot) पर निर्भर हैं। यदि आप राज्य के पिछले संस्करणों को बदल रहे हैं, तो यह आपको नई सुविधाओं का उपयोग करने से रोक सकता है।
+* **आवश्यकता परिवर्तन:** कुछ एप्लिकेशन सुविधाएं, जैसे पूर्ववत करें/फिर से करें को लागू करना, परिवर्तनों का इतिहास दिखाना, या उपयोगकर्ता को किसी फ़ॉर्म को पहले के मानों पर रीसेट करने देना, तब करना आसान होता है जब कुछ भी उत्परिवर्तित नहीं होता है। ऐसा इसलिए है क्योंकि आप स्टेट की पिछली प्रतियों को स्मृति में रख सकते हैं, और उपयुक्त होने पर उनका पुन: उपयोग कर सकते हैं। यदि आप एक परिवर्तनशील दृष्टिकोण से शुरू करते हैं, तो इस तरह की सुविधाओं को बाद में जोड़ना मुश्किल हो सकता है।
+* **सरल कार्यान्वयन:** क्योंकि React म्यूटेशन पर निर्भर नहीं है, इसलिए इसे आपकी वस्तुओं के साथ कुछ खास करने की आवश्यकता नहीं है। इसे अपनी संपत्तियों को हाईजैक करने की आवश्यकता नहीं है, हमेशा उन्हें प्रॉक्सी में लपेटें, या प्रारंभ में अन्य कार्य करें जैसा कि कई "प्रतिक्रियाशील" समाधान करते हैं। यही कारण है कि React आपको किसी भी वस्तु को राज्य में रखने देता है - चाहे वह कितना भी बड़ा हो - बिना अतिरिक्त प्रदर्शन या शुद्धता के नुकसान के।
+व्यवहार में, आप अक्सर React में उत्परिवर्तित अवस्था के साथ "दूर हो सकते हैं", लेकिन हम आपको दृढ़ता से सलाह देते हैं कि आप ऐसा न करें ताकि आप इस दृष्टिकोण को ध्यान में रखते हुए विकसित नई React सुविधाओं का उपयोग कर सकें। भविष्य के योगदानकर्ता और शायद आपका भविष्य स्वयं भी आपको धन्यवाद देगा!
-* Treat all state in React as immutable.
-* When you store objects in state, mutating them will not trigger renders and will change the state in previous render "snapshots."
-* Instead of mutating an object, create a *new* version of it, and trigger a re-render by setting state to it.
-* You can use the `{...obj, something: 'newValue'}` object spread syntax to create copies of objects.
-* Spread syntax is shallow: it only copies one level deep.
-* To update a nested object, you need to create copies all the way up from the place you're updating.
-* To reduce repetitive copying code, use Immer.
+* Recat में सभी स्टेट को अपरिवर्तनीय मानें।
+* जब आप ऑब्जेक्ट को स्टेट में संग्रहीत करते हैं, तो उन्हें उत्परिवर्तित करने से रेंडर ट्रिगर नहीं होंगे और पिछले रेंडर "स्नैपशॉट्स" में स्थिति बदल जाएगी।
+* किसी ऑब्जेक्ट को बदलने के बजाय, उसका एक *नया* संस्करण बनाएं, और उस पर स्थिति सेट करके एक री-रेंडर को ट्रिगर करें।
+* आप ऑब्जेक्ट की प्रतियां बनाने के लिए `{...obj, कुछ: 'newValue'}` ऑब्जेक्ट स्प्रेड सिंटैक्स का उपयोग कर सकते हैं।
+* स्प्रेड सिंटैक्स उथला है: यह केवल एक स्तर को गहराई से कॉपी करता है।
+* नेस्टेड ऑब्जेक्ट को अपडेट करने के लिए, आपको उस जगह से ऊपर तक कॉपी बनानी होगी, जहां आप अपडेट कर रहे हैं।
+* दोहराए जाने वाले प्रतिलिपि कोड को कम करने के लिए, Immer का उपयोग करें।
From 0f73dfa3463ea9af6e17c724b713dfbf9ad816a7 Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Thu, 1 Sep 2022 17:52:41 +0530
Subject: [PATCH 09/26] Update updating-objects-in-state.md
---
beta/src/pages/learn/updating-objects-in-state.md | 15 ++++++++-------
1 file changed, 8 insertions(+), 7 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index f96b390a5..e749d1c8e 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -810,11 +810,11 @@ img { width: 200px; height: 200px; }
-### Fix incorrect state updates {/*fix-incorrect-state-updates*/}
+### गलत स्थिति अपडेट को ठीक करें {/*fix-incorrect-state-updates*/}
-This form has a few bugs. Click the button that increases the score a few times. Notice that it does not increase. Then edit the first name, and notice that the score has suddenly "caught up" with your changes. Finally, edit the last name, and notice that the score has disappeared completely.
+इस फॉर्म में कुछ बग हैं। उस बटन पर क्लिक करें जो स्कोर को कुछ गुना बढ़ा देता है। ध्यान दें कि यह नहीं बढ़ता है। फिर पहले नाम को संपादित करें, और ध्यान दें कि आपके परिवर्तनों के साथ स्कोर अचानक "पकड़ गया" है। अंत में, अंतिम नाम संपादित करें, और ध्यान दें कि स्कोर पूरी तरह से गायब हो गया है।
-Your task is to fix all of these bugs. As you fix them, explain why each of them happens.
+आपका काम इन सभी बगों को ठीक करना है। जैसे ही आप उन्हें ठीक करते हैं, समझाएं कि उनमें से प्रत्येक क्यों होता है।
@@ -882,7 +882,7 @@ input { margin-left: 5px; margin-bottom: 5px; }
-Here is a version with both bugs fixed:
+यहाँ एक संस्करण है जिसमें दोनों बग फिक्स हैं:
@@ -952,13 +952,14 @@ input { margin-left: 5px; margin-bottom: 5px; }
-The problem with `handlePlusClick` was that it mutated the `player` object. As a result, React did not know that there's a reason to re-render, and did not update the score on the screen. This is why, when you edited the first name, the state got updated, triggering a re-render which _also_ updated the score on the screen.
+`हैंडलप्लसक्लिक` के साथ समस्या यह थी कि इसने `प्लेयर` ऑब्जेक्ट को बदल दिया। नतीजतन, रिएक्ट को यह नहीं पता था कि फिर से रेरेन्दर करने का एक कारण है, और स्क्रीन पर स्कोर को अपडेट नहीं किया। यही कारण है कि, जब आपने पहले नाम को संपादित किया, तो राज्य अपडेट हो गया, एक री-रेंडर को ट्रिगर किया जिसने स्क्रीन पर स्कोर को अपडेट किया।
-The problem with `handleLastNameChange` was that it did not copy the existing `...player` fields into the new object. This is why the score got lost after you edited the last name.
+
+`हैंडललास्टनाम चेंज` के साथ समस्या यह थी कि इसने मौजूदा `...प्लेयर` फ़ील्ड को नए ऑब्जेक्ट में कॉपी नहीं किया। यही कारण है कि आपके द्वारा अंतिम नाम संपादित करने के बाद स्कोर खो गया है।
-### Find and fix the mutation {/*find-and-fix-the-mutation*/}
+### उत्परिवर्तन खोजें और ठीक करें {/*find-and-fix-the-mutation*/}
There is a draggable box on a static background. You can change the box's color using the select input.
From ce368c1e234c43f94f475fe291572da9bf165a76 Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Thu, 1 Sep 2022 23:50:12 +0530
Subject: [PATCH 10/26] Update updating-objects-in-state.md
---
.../pages/learn/updating-objects-in-state.md | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index e749d1c8e..1ffa6d09b 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -961,15 +961,15 @@ input { margin-left: 5px; margin-bottom: 5px; }
### उत्परिवर्तन खोजें और ठीक करें {/*find-and-fix-the-mutation*/}
-There is a draggable box on a static background. You can change the box's color using the select input.
+स्टैटिक बैकग्राउंड पर ड्रैग करने योग्य बॉक्स होता है। आप चुनिंदा इनपुट का उपयोग करके बॉक्स का रंग बदल सकते हैं।
-But there is a bug. If you move the box first, and then change its color, the background (which isn't supposed to move!) will "jump" to the box position. But this should not happen: the `Background`'s `position` prop is set to `initialPosition`, which is `{ x: 0, y: 0 }`. Why is the background moving after the color change?
+लेकिन एक बग है। यदि आप पहले बॉक्स को घुमाते हैं, और फिर उसका रंग बदलते हैं, तो बैकग्राउंड (जिसे हिलना नहीं चाहिए!) बॉक्स की स्थिति में "कूद" जाएगा। लेकिन ऐसा नहीं होना चाहिए: 'बैकग्राउंड' का 'पोजिशन' प्रोप 'आरंभिक स्थिति' पर सेट है, जो कि '{x: 0, y: 0}' है। रंग बदलने के बाद बैकग्राउंड क्यों हिल रहा है?
-Find the bug and fix it.
+बग ढूंढें और इसे ठीक करें।
-If something unexpected changes, there is a mutation. Find the mutation in `App.js` and fix it.
+यदि कुछ अनपेक्षित परिवर्तन होता है, तो एक म्युटेशन होता है। `App.js` में उत्परिवर्तन खोजें और इसे ठीक करें।
@@ -1119,9 +1119,9 @@ select { margin-bottom: 10px; }
-The problem was in the mutation inside `handleMove`. It mutated `shape.position`, but that's the same object that `initialPosition` points at. This is why both the shape and the background move. (It's a mutation, so the change doesn't reflect on the screen until an unrelated update--the color change--triggers a re-render.)
+समस्या `हैंडलमोव` के अंदर उत्परिवर्तन में थी। इसने `shape.position` को बदल दिया, लेकिन यह वही ऑब्जेक्ट है जिस पर `initialPosition` इंगित करता है। यही कारण है कि आकार और बैकग्राउंड दोनों चलते हैं। (यह एक उत्परिवर्तन है, इसलिए परिवर्तन एक असंबंधित अद्यतन तक स्क्रीन पर प्रतिबिंबित नहीं होता है - रंग परिवर्तन - एक पुन: प्रस्तुत करना ट्रिगर करता है।)
-The fix is to remove the mutation from `handleMove`, and use the spread syntax to copy the shape. Note that `+=` is a mutation, so you need to rewrite it to use a regular `+` operation.
+फिक्स म्यूटेशन को `हैंडलमोव` से हटाना है, और आकृति को कॉपी करने के लिए स्प्रेड सिंटैक्स का उपयोग करना है। ध्यान दें कि `+=` एक उत्परिवर्तन है, इसलिए आपको नियमित `+` ऑपरेशन का उपयोग करने के लिए इसे फिर से लिखना होगा।
@@ -1274,9 +1274,9 @@ select { margin-bottom: 10px; }
-### Update an object with Immer {/*update-an-object-with-immer*/}
+### Immer के साथ किसी ऑब्जेक्ट को अपडेट करें {/*update-an-object-with-immer*/}
-This is the same buggy example as in the previous challenge. This time, fix the mutation by using Immer. For your convenience, `useImmer` is already imported, so you need to change the `shape` state variable to use it.
+पिछली चुनौती की तरह यह वही buggy उदाहरण है। इस बार, इमर का उपयोग करके उत्परिवर्तन को ठीक करें। आपकी सुविधा के लिए, `useImmer` पहले से ही आयात किया जा चुका है, इसलिए इसका उपयोग करने के लिए आपको `आकार` स्थिति चर को बदलना होगा।
@@ -1443,7 +1443,7 @@ select { margin-bottom: 10px; }
-This is the solution rewritten with Immer. Notice how the event handlers are written in a mutating fashion, but the bug does not occur. This is because under the hood, Immer never mutates the existing objects.
+यह इमर के साथ फिर से लिखा गया समाधान है। ध्यान दें कि कैसे ईवेंट हैंडलर एक परिवर्तनशील तरीके से लिखे जाते हैं, लेकिन बग नहीं होता है। ऐसा इसलिए है क्योंकि हुड के निचे , इमर मौजूदा ऑब्जेक्ट्स को कभी भी उत्परिवर्तित नहीं करता है।
From 88ac113c14b95d7469bbda339f1c818f11e688b9 Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Fri, 9 Sep 2022 18:29:17 +0530
Subject: [PATCH 11/26] updated changes
---
beta/src/pages/learn/updating-objects-in-state.md | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index 1ffa6d09b..a28e67073 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -4,7 +4,7 @@ title: स्टेट में ऑब्जेक्ट्स को अपड
-स्टेट कोई भी जावास्क्रिप्ट वैल्यू स्टोर करसकती है, ऑब्जेक्ट समेत। लेकिन आपको कभी भी ऑब्जेक्ट्स को बदलना नहीं चैयाह जो आप React स्टेट में होल्ड करते है। उसके बजाए आपको जब भी ऑब्जेक्ट को अपडेट करना हो या तो आप एक नया ऑब्जेक्ट बनाये या उसी की एक कॉपी बनाये और फिर स्टेट को सेट करदे उस कॉपी का उपयोग करने के लिये।
+स्टेट ऑब्जेक्ट समेत कोई भी जावास्क्रिप्ट वैल्यू स्टोर कर सकती है। लेकिन आपको कभी भी ऑब्जेक्ट्स को बदलना नहीं चाहिए जो आप React स्टेट में रखते हैं। उसके बजाए आपको जब भी ऑब्जेक्ट को अपडेट करना हो या तो आप एक नया ऑब्जेक्ट बनाये (या उसी की एक कॉपी बनाये) और फिर उस कॉपी का उपयोग करने के लिये स्टेट को सेट कर दें।
@@ -12,8 +12,8 @@ title: स्टेट में ऑब्जेक्ट्स को अपड
- React में सही से ऑब्जेक्ट को कैसे अपडेट करे
- बिना बदले कैसे नेस्टेड ऑब्जेक्ट को अपडेट करे
-- इम्म्यूटेबलिटी क्या होती है और कैसे उसे न तोड़े
-- Immer की मदद से एक जैसे ऑब्जेक्टस को बार-बार कम कैसे बनाये
+- इम्म्यूटेबलिटी क्या होती है और कैसे उसे ब्रेक ना करें
+- Immer की मदद से बार-बार ऑब्जेक्टस की कॉपी बनाने को कम कैसे करें
From be70079fc86e14cf44fb7e60d4e022d48f86e598 Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Fri, 16 Sep 2022 23:03:11 +0530
Subject: [PATCH 12/26] updated till line 100
---
beta/src/pages/learn/updating-objects-in-state.md | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index a28e67073..9d6bc9b9c 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -17,7 +17,7 @@ title: स्टेट में ऑब्जेक्ट्स को अपड
-## म्युटेशन क्या होती है ? {/*whats-a-mutation*/}
+## म्युटेशन क्या होता है? ? {/*whats-a-mutation*/}
आप स्टेट में कोई भी जावास्क्रिप्ट वैल्यू स्टोर करसकते है
@@ -25,7 +25,7 @@ title: स्टेट में ऑब्जेक्ट्स को अपड
const [x, setX] = useState(0);
```
-अभी तक आप नंबर्स, स्ट्रिंग्स, और बूलियन के साथ काम कर रहे थे। ऐसी जावास्क्रिप्ट वैल्यूज " इम्म्यूटेबल " होती है, मतलब जो कभी बदल न सके या " रीड-ओनली " हो। आप रीरेंदर ट्रिगर करसकते है वैल्यू को _ब्दलने_ के लिया।
+अभी तक आप नंबर्स, स्ट्रिंग्स, और बूलियन के साथ काम कर रहे थे। ऐसी जावास्क्रिप्ट वैल्यूज "इम्म्यूटेबल" होती है, मतलब जो कभी बदल न सके या "रीड-ओनली" हो। वैल्यू को _ब्दलने_ के लिए आप री-रेंडर ट्रिगर करसकते है।
```js
setX(5);
@@ -39,19 +39,19 @@ setX(5);
const [position, setPosition] = useState({ x: 0, y: 0 });
```
-तकनीकी ओर से यह मुमकिन है की _खुदी ऑब्जेक्ट_ के कंटेंट को चेंज करसके। **यही म्युटेशन कहलाता है:**
+तकनीकी ओर से यह मुमकिन है की _खुदी ऑब्जेक्ट_ के कंटेंट को चेंज कर सकते हैं।। **यही म्युटेशन कहलाता है:**
```js
position.x = 5;
```
-हलाक, जबकि React स्टेट में ऑब्जेक्ट्स तकनीकी रूप से मुटेबल होते है, आपको उनके साथ ऐसे व्यवहार करना चैयाह **जैसे वो** इम्म्यूटेबल हो नंबर्स, बूलियनस, और स्ट्रिंग्स की तरह। उनको म्यूटेट करने की बजाए, आपको हमेशा उनको ररिप्लेस करना चैयाह।
+हलाक, जबकि React स्टेट में ऑब्जेक्ट्स तकनीकी रूप से मुटेबल होते है, आपको उनके साथ ऐसे व्यवहार करना चैयाह **जैसे वो** इम्म्यूटेबल हो नंबर्स, बूलियनस, और स्ट्रिंग्स की तरह। उनको म्यूटेट करने की बजाए, आपको हमेशा उनको रीप्लेस करना चाहिए।
-## स्टेट का रीड-ओनली व्यवहार करना {/*treat-state-as-read-only*/}
+## स्टेट का रीड-ओनली मानें {/*treat-state-as-read-only*/}
-दुसरे शब्दों में, आपको **स्टेट में मौजूद जावास्क्रिप्ट ऑब्जेक्ट के साथ हमेशा रीड-ओनली व्यवहार करना चैयाह**
+दुसरे शब्दों में, आपको **स्टेट में मौजूद जावास्क्रिप्ट ऑब्जेक्ट को हमेशा रीड-ओनली मानना चाहिए**
-दिए गए उदाहरण में, स्टेट में मोजूद ऑब्जेक्ट वर्तमान में पॉइंटर का स्थान बता रहा है। मौजूद लाल बिंदु पर कर्सर टच या प्रीव्यू करने पे अपना स्थान बदलना छियाह। परन्तु बिंदु अपने स्थान पे ही रहती है:
+दिए गए उदाहरण में, स्टेट में मोजूद ऑब्जेक्ट करंट पॉइंटर की पोजीशन बता रहा है। मौजूद लाल बिंदु पर कर्सर टच या प्रीव्यू करने पे अपना स्थान बदलना चाहिए। परन्तु बिंदु अपने स्थान पे ही रहता है:
From 098ce775a434bf0fa54e91696d3517bc75ae9e3b Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Fri, 16 Sep 2022 23:21:41 +0530
Subject: [PATCH 13/26] Update updating-objects-in-state.md
---
beta/src/pages/learn/updating-objects-in-state.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index 9d6bc9b9c..a96ea0f30 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -45,7 +45,7 @@ const [position, setPosition] = useState({ x: 0, y: 0 });
position.x = 5;
```
-हलाक, जबकि React स्टेट में ऑब्जेक्ट्स तकनीकी रूप से मुटेबल होते है, आपको उनके साथ ऐसे व्यवहार करना चैयाह **जैसे वो** इम्म्यूटेबल हो नंबर्स, बूलियनस, और स्ट्रिंग्स की तरह। उनको म्यूटेट करने की बजाए, आपको हमेशा उनको रीप्लेस करना चाहिए।
+हलाक, जबकि React स्टेट में ऑब्जेक्ट्स तकनीकी रूप से मुटेबल होते है, आपको उनके साथ ऐसे व्यवहार करना चैयाह **जैसे वो** इम्म्यूटेबल हो--नंबर्स, बूलियनस, और स्ट्रिंग्स की तरह। उनको म्यूटेट करने की बजाए, आपको हमेशा उनको रीप्लेस करना चाहिए।
## स्टेट का रीड-ओनली मानें {/*treat-state-as-read-only*/}
From 4b9027953b58828dc61065f7db1b4f40102fc15b Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Thu, 22 Sep 2022 19:13:18 +0530
Subject: [PATCH 14/26] Update updating-objects-in-state.md
---
beta/src/pages/learn/updating-objects-in-state.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index a96ea0f30..61ab3ed78 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -17,7 +17,7 @@ title: स्टेट में ऑब्जेक्ट्स को अपड
-## म्युटेशन क्या होता है? ? {/*whats-a-mutation*/}
+## म्युटेशन क्या होता है? {/*whats-a-mutation*/}
आप स्टेट में कोई भी जावास्क्रिप्ट वैल्यू स्टोर करसकते है
@@ -39,7 +39,7 @@ setX(5);
const [position, setPosition] = useState({ x: 0, y: 0 });
```
-तकनीकी ओर से यह मुमकिन है की _खुदी ऑब्जेक्ट_ के कंटेंट को चेंज कर सकते हैं।। **यही म्युटेशन कहलाता है:**
+तकनीकी ओर से यह मुमकिन है की _खुदी ऑब्जेक्ट_ के कंटेंट को चेंज कर सकते हैं। **यही म्युटेशन कहलाता है:**
```js
position.x = 5;
From 772371193a1608431c59ba6decc948926a064c2d Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Fri, 23 Sep 2022 13:24:28 +0530
Subject: [PATCH 15/26] Update updating-objects-in-state.md
---
.../src/pages/learn/updating-objects-in-state.md | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index 61ab3ed78..f986f9940 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -103,9 +103,9 @@ onPointerMove={e => {
}}
```
-दिया गया कोड शंशोदित करता है सोपे गए उस `स्थान` पे ऑब्जेक्ट को [पिछली रेंडर](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) से। परन्तु बिना स्टेट सेटिंग फंक्शन का उपयोग करे, React को कोई अंदाज़ा नहीं है की ऑब्जेक्ट में परिवर्तन आये है। इसलिए React कुछ जवाब नहीं देता। उद्धरण के लिए आप भोजन करने के बाद भोजन का गढ़ बदल रहे है। हालाँकि कुछ मामलो में स्टेट को म्यूटेट करना काम करता है। परन्तु असा करना हम सुझाव नहीं देते। आपको हमेशा स्टेट में उपलब्ध वैल्यू को मौजूद रेंडर में हमेशा रीड-ओनली व्यवहार करना चैयाह।
+ये कोड [पिछले रेंडर](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) से `position` को एसाइन्ड ऑब्जेक्ट को बदलता है। परन्तु बिना स्टेट सेटिंग फंक्शन का उपयोग करे, React को कोई अंदाज़ा नहीं है की ऑब्जेक्ट में परिवर्तन आये है। इसलिए React कुछ नहीं करता उसके जवाब में। उद्धरण के लिए आप भोजन करने के बाद भोजन का आर्डर बदल रहे है। हालाँकि कुछ मामलो में स्टेट को म्यूटेट करना काम करता, परन्तु हम ऐसा करने का हम सुझाव नहीं देते। आपको हमेशा स्टेट में उपलब्ध वैल्यू को मौजूद रेंडर में हमेशा रीड-ओनली व्यवहार करना चैयाह।
-वास्तव में [रे-रेंडर ट्रिगर](/learn/state-as-a-snapshot#setting-state-triggers-renders) करने के लिया , **एक *नया* ऑब्जेक्ट सर्जन करे और स्टेट सेटिंग फंक्शन में पास करदे:**
+वास्तव में [री-रेंडर ट्रिगर](/learn/state-as-a-snapshot#setting-state-triggers-renders) करने के लिया , **एक *नया* ऑब्जेक्ट बनाये करे और स्टेट सेटिंग फंक्शन में पास करदे:**
```js
onPointerMove={e => {
@@ -116,12 +116,12 @@ onPointerMove={e => {
}}
```
-`सेट पोजीशन` के द्वारा, आप React को बता रहे है:
+`setPosition` के द्वारा, आप React को बता रहे है:
-* `पोजीशन` को बदले नए बने ऑब्जेक्ट्स से
+* `position` को बदलें नए बने ऑब्जेक्ट्स से
* इस कॉम्पोनेन्ट को दोबारा रेंडर करे
-नोटिस करिये कैसे लाल बिंदु पालन कर रहा है पॉइंटर का जब अप्प टच या होवर करते है प्रीव्यू पर:
+नोटिस करिये कैसे लाल बिंदु पालन कर रहा है पॉइंटर का जब आप टच या होवर करते है प्रीव्यू पर:
@@ -168,13 +168,13 @@ body { margin: 0; padding: 0; height: 250px; }
-इस तरह का कोड एक समस्या है क्योंकि यह स्टेट में *मौजूदा* ऑब्जेक्ट को संशोधित करता है:
+इस तरह का कोड एक समस्या है क्योंकि यह स्टेट में *मौजूदा* ऑब्जेक्ट को बदलता है:
```js
position.x = e.clientX;
position.y = e.clientY;
```
-लेकिन इस तरह का कोड *बिल्कुल ठीक* है क्योंकि आप एक ताजा ऑब्जेक् को बदल रहे हैं जिसे आपने *अभी बनाया है*:
+लेकिन इस तरह का कोड *बिल्कुल ठीक* है क्योंकि आप एक ताज़े ऑब्जेक् को बदल रहे हैं जिसे आपने *अभी बनाया है*:
```js
const nextPosition = {};
@@ -192,7 +192,7 @@ setPosition({
});
```
-म्युटेशन केवल एक समस्या है जब आप *मौजूदा* ऑब्जेक्ट् को बदलते हैं जो पहले से ही स्टेट में हैं। आपके द्वारा अभी-अभी बनाई गई ऑब्जेक्ट को बदलना ठीक है क्योंकि *अभी तक कोई अन्य कोड इसका संदर्भ नहीं देता है।* इसे बदलने से गलती से उस पर निर्भर किसी चीज़ पर प्रभाव नहीं पड़ेगा। इसे "स्थानीय उत्परिवर्तन" कहा जाता है। आप स्थानीय उत्परिवर्तन भी कर सकते हैं [प्रतिपादन करते समय](/learn/keeping-components-pure#local-mutation-your-components-little-secret) बहुत सुविधाजनक और पूरी तरह से ठीक!
+म्युटेशन केवल एक समस्या है जब आप *मौजूदा* ऑब्जेक्ट् को बदलते हैं जो पहले से ही स्टेट में हैं। आपके द्वारा अभी-अभी बनाये गए ऑब्जेक्ट को बदलना ठीक है क्योंकि *अभी तक कोई अन्य कोड इसको रिफरेन्स नहीं करता।* इसे बदलने से गलती से उस पर निर्भर किसी चीज़ पर प्रभाव नहीं पड़ेगा। इसे "लोकल म्युटेशन" कहा जाता है। आप स्थानीय उत्परिवर्तन भी कर सकते हैं [प्रतिपादन करते समय](/learn/keeping-components-pure#local-mutation-your-components-little-secret) बहुत सुविधाजनक और पूरी तरह से ठीक!
From 2b2aa13ae3d40891bed2d743c52d29d34221ec88 Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Wed, 5 Oct 2022 16:07:34 +0530
Subject: [PATCH 16/26] Update updating-objects-in-state.md
---
beta/src/pages/learn/updating-objects-in-state.md | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index f986f9940..3f1410691 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -196,11 +196,11 @@ setPosition({
-## स्प्रेड सिंटैक्स के साथ ऑब्जेक्ट्स की प्रतिलिपि बनाना {/*copying-objects-with-the-spread-syntax*/}
+## स्प्रेड सिंटैक्स के साथ ऑब्जेक्ट्स की कॉपी बनाना {/*copying-objects-with-the-spread-syntax*/}
-पिछले उदाहरण में, `स्थिति` ऑब्जेक्ट हमेशा वर्तमान कर्सर स्थिति से ताजा बनाई जाती है। लेकिन अक्सर, आप अपने द्वारा बनाई जा रही नई ऑब्जेक्ट के हिस्से के रूप में *मौजूदा* डेटा शामिल करना चाहेंगे। उदाहरण के लिए, आप किसी प्रपत्र में *केवल एक* फ़ील्ड को अपडेट करना चाह सकते हैं, लेकिन अन्य सभी फ़ील्ड के लिए पिछले मान रख सकते हैं।
+पिछले उदाहरण में, `position` ऑब्जेक्ट हमेशा वर्तमान कर्सर के स्थान से ताजा बनाया जाता है। लेकिन अक्सर, आप अपने द्वारा बनाये जा रहे नए ऑब्जेक्ट के हिस्से के रूप में *मौजूदा* डेटा शामिल करना चाहेंगे। उदाहरण के लिए, आप किसी फॉर्म में *केवल एक* फ़ील्ड को अपडेट करना चाह सकते हैं, लेकिन अन्य सभी फ़ील्ड के लिए पिछली वैल्यूज रख सकते हैं।
-ये इनपुट फ़ील्ड काम नहीं करते क्योंकि `ऑन चेंज` हैंडलर स्टेट को बदलते हैं:
+ये इनपुट फ़ील्ड काम नहीं करते क्योंकि `onChange` हैंडलर स्टेट को बदलते हैं:
@@ -266,12 +266,12 @@ input { margin-left: 5px; margin-bottom: 5px; }
-उदाहरण के लिए, यह लाइन स्टेट को पिछले रेंडर से बदल देती है:
+उदाहरण के लिए, यह लाइन स्टेट को पिछले रेंडर से बदल देती है:
```js
person.firstName = e.target.value;
```
-आप जिस व्यवहार की तलाश कर रहे हैं उसे प्राप्त करने का विश्वसनीय तरीका एक नई ऑब्जेक्ट बनाना और उसे 'सेटपर्सन' को पास करना है। लेकिन यहां, आप **मौजूदा डेटा को इसमें कॉपी करना चाहते हैं** क्योंकि केवल एक फ़ील्ड बदल गई है:
+आप जिस व्यवहार की तलाश कर रहे हैं उसे प्राप्त करने का विश्वसनीय तरीका एक नया ऑब्जेक्ट बनाना और उसे `setPerson` को पास करना है। लेकिन यहां, आप **मौजूदा डेटा को इसमें कॉपी करना चाहते हैं** क्योंकि केवल एक फ़ील्ड बदला है:
```js
setPerson({
@@ -290,7 +290,7 @@ setPerson({
});
```
-अब फॉर्म काम करता है!
+अब फॉर्म काम कर रहा!
ध्यान दें कि आपने प्रत्येक इनपुट फ़ील्ड के लिए एक अलग स्टेट वैल्यू घोषित नहीं किया। बड़े रूपों के लिए, सभी डेटा को किसी ऑब्जेक्ट में समूहीकृत रखना बहुत सुविधाजनक है--जब तक आप इसे सही तरीके से अपडेट करते हैं!
From 5ddb5a44473a5b36ed9758340af8504d9cf63fd0 Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Tue, 11 Oct 2022 23:25:38 +0530
Subject: [PATCH 17/26] Update updating-objects-in-state.md
---
beta/src/pages/learn/updating-objects-in-state.md | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index 3f1410691..8ee9ae18d 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -292,7 +292,7 @@ setPerson({
अब फॉर्म काम कर रहा!
-ध्यान दें कि आपने प्रत्येक इनपुट फ़ील्ड के लिए एक अलग स्टेट वैल्यू घोषित नहीं किया। बड़े रूपों के लिए, सभी डेटा को किसी ऑब्जेक्ट में समूहीकृत रखना बहुत सुविधाजनक है--जब तक आप इसे सही तरीके से अपडेट करते हैं!
+ध्यान दें कि आपने प्रत्येक इनपुट फ़ील्ड के लिए एक अलग स्टेट वैल्यू डिक्लेअर नहीं किया। बड़े फॉर्म्स के लिए, सभी डेटा को किसी ऑब्जेक्ट में एक साथ ग्रुप में रखना बहुत सुविधाजनक है--जब तक आप इसे सही तरीके से अपडेट करते हैं!
@@ -367,11 +367,11 @@ input { margin-left: 5px; margin-bottom: 5px; }
-ध्यान दें कि `...` स्प्रेड सिंटैक्स "उथला" है - यह केवल चीजों को एक स्तर की गहराई तक कॉपी करता है। यह इसे तेज़ बनाता है, लेकिन इसका मतलब यह भी है कि यदि आप किसी नेस्टेड प्रॉपर्टी को अपडेट करना चाहते हैं, तो आपको इसे एक से अधिक बार उपयोग करना होगा।
+ध्यान दें कि `...` स्प्रेड सिंटैक्स "shallow" है - यह केवल चीजों को एक लेवल की गहराई तक कॉपी करता है। यह इसे तेज़ बनाता है, लेकिन इसका मतलब यह भी है कि यदि आप किसी नेस्टेड प्रॉपर्टी को अपडेट करना चाहते हैं, तो आपको इसे एक से अधिक बार उपयोग करना होगा।
-आप डायनामिक नाम वाली किसी प्रॉपर्टी को निर्दिष्ट करने के लिए अपनी ऑब्जेक्ट परिभाषा के अंदर `[` और `]` ब्रेसिज़ का भी उपयोग कर सकते हैं। यहां एक ही उदाहरण है, लेकिन तीन अलग-अलग लोगों के बजाय एक ही ईवेंट हैंडलर के साथ:
+आप डायनामिक नाम वाली किसी प्रॉपर्टी को निर्दिष्ट करने के लिए अपने ऑब्जेक्ट डेफिनिशन के अंदर `[` और `]` ब्रेसिज़ का भी उपयोग कर सकते हैं। यहां एक ही उदाहरण है, लेकिन तीन अलग-अलग लोगों के बजाय एक ही ईवेंट हैंडलर के साथ:
@@ -435,13 +435,13 @@ input { margin-left: 5px; margin-bottom: 5px; }
-यहां, `e.target.name` का मतलब `नाम` प्रॉपर्टी है जो `` DOM तत्व को दी गई है।
+यहां, `e.target.name` का मतलब `name` प्रॉपर्टी है जो `` DOM एलिमेंट को दी गई है।
## नेस्टेड ऑब्जेक्ट को अपडेट करना {/*updating-a-nested-object*/}
-इस तरह एक नेस्टेड ऑब्जेक्ट संरचना पर विचार करें:
+इस तरह एक नेस्टेड ऑब्जेक्ट स्ट्रक्चर पर विचार करें:
```js
const [person, setPerson] = useState({
@@ -454,13 +454,13 @@ const [person, setPerson] = useState({
});
```
-यदि आप `person.artwork.city` को अपडेट करना चाहते हैं, तो यह स्पष्ट है कि इसे उत्परिवर्तन के साथ कैसे किया जाए:
+यदि आप `person.artwork.city` को अपडेट करना चाहते हैं, तो यह स्पष्ट है कि इसे म्युटेशन के साथ कैसे किया जाए:
```js
person.artwork.city = 'New Delhi';
```
-लेकिन React में, आप ऑब्जेक्ट को अपरिवर्तनीय मानते हैं! `शहर` को बदलने के लिए, आपको पहले नई `कलाकृति` ऑब्जेक्ट (पिछले एक से डेटा के साथ पूर्व-आबादी) का उत्पादन करना होगा, और फिर नई `व्यक्ति` ऑब्जेक्ट का उत्पादन करना होगा जो नई `कलाकृति` पर इंगित करता है:
+लेकिन React में, आप ऑब्जेक्ट को अपरिवर्तनीय मानते हैं! `city` को बदलने के लिए, आपको पहले नई `artwork` ऑब्जेक्ट (पिछले वाले से प्री-पॉपुलटेड डेटा के साथ) का उत्पादन करना होगा, और फिर नई `person` ऑब्जेक्ट का उत्पादन करना होगा जो नई `artwork` पर पॉइंट करता है:
```js
const nextArtwork = { ...person.artwork, city: 'New Delhi' };
From cf53d01c0407cfc1c1b2c64ff06c57e169543952 Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Mon, 17 Oct 2022 23:10:39 +0530
Subject: [PATCH 18/26] Update updating-objects-in-state.md
---
.../pages/learn/updating-objects-in-state.md | 31 ++++++++++---------
1 file changed, 16 insertions(+), 15 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index 8ee9ae18d..777737d29 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -174,7 +174,8 @@ body { margin: 0; padding: 0; height: 250px; }
position.x = e.clientX;
position.y = e.clientY;
```
-लेकिन इस तरह का कोड *बिल्कुल ठीक* है क्योंकि आप एक ताज़े ऑब्जेक् को बदल रहे हैं जिसे आपने *अभी बनाया है*:
+
+ लेकिन इस तरह का कोड *बिल्कुल ठीक* है क्योंकि आप एक ताज़े ऑब्जेक् को बदल रहे हैं जिसे आपने *अभी बनाया है*:
```js
const nextPosition = {};
@@ -266,6 +267,7 @@ input { margin-left: 5px; margin-bottom: 5px; }
+
उदाहरण के लिए, यह लाइन स्टेट को पिछले रेंडर से बदल देती है:
```js
person.firstName = e.target.value;
@@ -468,7 +470,7 @@ const nextPerson = { ...person, artwork: nextArtwork };
setPerson(nextPerson);
```
-या, एकल फ़ंक्शन कॉल के रूप में लिखा गया है:
+या, एक ही फ़ंक्शन कॉल के रूप में लिखा गया है:
```js
setPerson({
@@ -480,7 +482,7 @@ setPerson({
});
```
-यह थोड़ा चिंताजनक है, लेकिन यह कई मामलों में ठीक काम करता है:
+यह थोड़ा ज़्यादा वर्ड्स वाला हो जाता है, लेकिन यह ज़्यादातर ठीक काम करता है:
@@ -603,7 +605,7 @@ let obj = {
};
```
-हालांकि, "नेस्टिंग " ऑब्जेक्ट्स के व्यवहार के बारे में सोचने का एक गलत तरीका है। जब कोड निष्पादित होता है, तो "नेस्टेड" ऑब्जेक्ट जैसी कोई चीज़ नहीं होती है। आप वास्तव में दो अलग-अलग ऑब्जेक्ट को देख रहे हैं:
+हालांकि, "नेस्टिंग" ऑब्जेक्ट्स के व्यवहार के बारे में सोचने का एक गलत तरीका है। जब कोड एक्ज़िक्युट होता है, तो "नेस्टेड" ऑब्जेक्ट जैसी कोई चीज़ नहीं होती है। आप वास्तव में दो अलग-अलग ऑब्जेक्ट को देख रहे हैं:
```js
let obj1 = {
@@ -618,7 +620,7 @@ let obj2 = {
};
```
-`obj1` ऑब्जेक्ट "अंदर" `obj2` नहीं है। उदाहरण के लिए, `obj3` `obj1` पर भी "बिंदु" कर सकता है:
+`obj1` ऑब्जेक्ट `obj2` के "अंदर" नहीं है। उदाहरण के लिए, `obj3` `obj1` पर भी "पॉइंट" कर सकता है:
```js
let obj1 = {
@@ -638,14 +640,13 @@ let obj3 = {
};
```
-अगर आप `obj3.artwork.city` को बदलते हैं, तो यह `obj2.artwork.city` और `obj1.city` दोनों को प्रभावित करेगा। ऐसा इसलिए है क्योंकि `obj3.artwork`, `obj2.artwork`, और `obj1` एक ही ऑब्जेक्ट हैं। यह देखना मुश्किल है कि आप ऑब्जेक्ट्स को "नेस्टेड" के रूप में कब सोचते हैं। इसके बजाय, वे अलग-अलग ऑब्जेक्ट हैं जो गुणों के साथ एक दूसरे पर "इंगित" करती हैं।
+अगर आप `obj3.artwork.city` को बदलते हैं, तो यह `obj2.artwork.city` और `obj1.city` दोनों को प्रभावित करेगा। ऐसा इसलिए है क्योंकि `obj3.artwork`, `obj2.artwork`, और `obj1` एक ही ऑब्जेक्ट हैं। जब आप ऑब्जेक्ट्स को "नेस्टेड" रुट में सोचते है तो यह देखना मुश्किल होता है। इसके बजाय, वे अलग-अलग ऑब्जेक्ट हैं जो प्रॉपर्टीज के साथ एक दूसरे पर "पॉइंट" करती हैं।
-
-### Immer के साथ संक्षिप्त अद्यतन तर्क लिखें {/*write-concise-update-logic-with-immer*/}
+### Immer के साथ संक्षिप्त अपडेट लॉजिक लिखें {/*write-concise-update-logic-with-immer*/}
-यदि आपका स्टेट गहरा नेस्टेड है, तो आप [इसे समतल करना](/learn/choosing-the-state-structure#avoid-deeply-nested-state) पर विचार करना चाहेंगे। लेकिन, यदि आप अपनी स्टेट संरचना को बदलना नहीं चाहते हैं, तो आप नेस्टेड स्प्रेड के लिए एक शॉर्टकट पसंद कर सकते हैं। [इमर](https://github.com/immerjs/use-immer) एक लोकप्रिय लाइब्रेरी है जो आपको सुविधाजनक लेकिन परिवर्तनशील सिंटैक्स का उपयोग करके लिखने देता है और आपके लिए प्रतियां तैयार करने का ख्याल रखता है। Immer के साथ, आपके द्वारा लिखा गया कोड ऐसा लगता है जैसे आप "नियम तोड़ रहे हैं" और किसी वस्तु को बदल रहे हैं:
+यदि आपका स्टेट ज़्यादा नेस्टेड है, तो आप [इसे फ्लाय्टन करने](/learn/choosing-the-state-structure#avoid-deeply-nested-state) पर विचार करना चाहेंगे। लेकिन, यदि आप अपनी स्टेट स्ट्रक्चर को बदलना नहीं चाहते हैं, तो आप नेस्टेड स्प्रेड के लिए एक शॉर्टकट पसंद कर सकते हैं। [Immer](https://github.com/immerjs/use-immer) एक लोकप्रिय लाइब्रेरी है जो आपको सुविधाजनक लेकिन मुटेटिंग सिंटैक्स का उपयोग करके लिखने देता है और आपके लिए का ख्याल रखता है। Immer के साथ, आपके द्वारा लिखा गया कोड ऐसा लगता है जैसे आप "नियम तोड़ रहे हैं" और किसी ऑब्जेक्ट को मुटेट कर रहे हैं:
```js
updatePerson(draft => {
@@ -653,20 +654,20 @@ updatePerson(draft => {
});
```
-लेकिन एक नियमित उत्परिवर्तन के विपरीत, यह पिछली स्थिति को अधिलेखित नहीं करता है!
+लेकिन एक रेगुलर म्युटेशन के विपरीत, यह पिछले स्टेट को ओवरराईट नहीं करता है!
-Immer द्वारा प्रदान किया गया `ड्राफ़्ट` एक विशेष प्रकार की ऑब्जेक्ट है, जिसे [प्रॉक्सी](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) कहा जाता है, जो "रिकॉर्ड करता है" "आप इसके साथ क्या करते हैं। यही कारण है कि आप इसे जितना चाहें उतना स्वतंत्र रूप से बदल सकते हैं! हुड के तहत, Immer यह पता लगाता है कि `ड्राफ़्ट` के किन हिस्सों को बदल दिया गया है, और एक पूरी तरह से नया ऑब्जेक्ट तैयार करता है जिसमें आपके संपादन शामिल हैं।
+Immer द्वारा प्रदान किया गया `ड्राफ़्ट` एक विशेष प्रकार का ऑब्जेक्ट है, जिसे [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) कहा जाता है, जो आप इसके साथ क्या करते हैं उसे "रिकॉर्ड करता है"। यही कारण है कि आप इसे जितना चाहें उतना स्वतंत्र रूप से बदल सकते हैं! हुड के तहत, Immer यह पता लगाता है कि `ड्राफ़्ट` के किन हिस्सों को बदल दिया गया है, और एक पूरी तरह से नया ऑब्जेक्ट तैयार करता है जिसमें आपके बदलाव शामिल हैं।
इमर को आजमाने के लिए:
-1. डिपेंडेंसी के रूप में अपने `package.json` में `use-immer` जोड़ें
-2. रन `एनपीएम इंस्टॉल
-3. फिर `import {useState} को 'react' से बदलकर `import {useImmer} से 'use-immer'` से बदलें
+1. डिपेंडेंसी के रूप में अपने `package.json` में `use-immer` ऐड करें
+2. `npm install` रन करें
+3. फिर `import {useState} from 'react'` से बदलकर `import {useImmer} from 'use-immer'` से बदलें
-यहाँ उदाहरण Immer में परिवर्तित किया गया है:
+यहाँ ऊपर दिया गया उदाहरण Immer में परिवर्तित किया गया है:
From 763bc9b2a755b7440d62da34d65f0acf4f888d49 Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Mon, 17 Oct 2022 23:12:31 +0530
Subject: [PATCH 19/26] Update updating-objects-in-state.md
---
beta/src/pages/learn/updating-objects-in-state.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index 777737d29..eae24dfa2 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -659,6 +659,7 @@ updatePerson(draft => {
Immer द्वारा प्रदान किया गया `ड्राफ़्ट` एक विशेष प्रकार का ऑब्जेक्ट है, जिसे [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) कहा जाता है, जो आप इसके साथ क्या करते हैं उसे "रिकॉर्ड करता है"। यही कारण है कि आप इसे जितना चाहें उतना स्वतंत्र रूप से बदल सकते हैं! हुड के तहत, Immer यह पता लगाता है कि `ड्राफ़्ट` के किन हिस्सों को बदल दिया गया है, और एक पूरी तरह से नया ऑब्जेक्ट तैयार करता है जिसमें आपके बदलाव शामिल हैं।
+
इमर को आजमाने के लिए:
From 17841abea68bd3762b776588e304bca046fbfdd2 Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Tue, 18 Oct 2022 17:05:40 +0530
Subject: [PATCH 20/26] Update updating-objects-in-state.md
---
beta/src/pages/learn/updating-objects-in-state.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index eae24dfa2..b0a658ab8 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -646,7 +646,7 @@ let obj3 = {
### Immer के साथ संक्षिप्त अपडेट लॉजिक लिखें {/*write-concise-update-logic-with-immer*/}
-यदि आपका स्टेट ज़्यादा नेस्टेड है, तो आप [इसे फ्लाय्टन करने](/learn/choosing-the-state-structure#avoid-deeply-nested-state) पर विचार करना चाहेंगे। लेकिन, यदि आप अपनी स्टेट स्ट्रक्चर को बदलना नहीं चाहते हैं, तो आप नेस्टेड स्प्रेड के लिए एक शॉर्टकट पसंद कर सकते हैं। [Immer](https://github.com/immerjs/use-immer) एक लोकप्रिय लाइब्रेरी है जो आपको सुविधाजनक लेकिन मुटेटिंग सिंटैक्स का उपयोग करके लिखने देता है और आपके लिए का ख्याल रखता है। Immer के साथ, आपके द्वारा लिखा गया कोड ऐसा लगता है जैसे आप "नियम तोड़ रहे हैं" और किसी ऑब्जेक्ट को मुटेट कर रहे हैं:
+यदि आपका स्टेट ज़्यादा नेस्टेड है, तो आप [इसे फ्लाय्टन करने](/learn/choosing-the-state-structure#avoid-deeply-nested-state) पर विचार करना चाहेंगे। लेकिन, यदि आप अपनी स्टेट स्ट्रक्चर को बदलना नहीं चाहते हैं, तो आप नेस्टेड स्प्रेड के लिए एक शॉर्टकट पसंद कर सकते हैं। [Immer](https://github.com/immerjs/use-immer) एक लोकप्रिय लाइब्रेरी है जो आपको सुविधाजनक लेकिन मुटेटिंग सिंटैक्स का उपयोग करके लिखने देता है और आपके लिए कॉपीस बनाने का ख्याल रखता है। Immer के साथ, आपके द्वारा लिखा गया कोड ऐसा लगता है जैसे आप "नियम तोड़ रहे हैं" और किसी ऑब्जेक्ट को मुटेट कर रहे हैं:
```js
updatePerson(draft => {
From 2b59cb982a602e368beae3ea2af2cd604725360a Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Thu, 20 Oct 2022 17:48:52 +0530
Subject: [PATCH 21/26] Update updating-objects-in-state.md
---
beta/src/pages/learn/updating-objects-in-state.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index b0a658ab8..71fed7bf4 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -643,6 +643,7 @@ let obj3 = {
अगर आप `obj3.artwork.city` को बदलते हैं, तो यह `obj2.artwork.city` और `obj1.city` दोनों को प्रभावित करेगा। ऐसा इसलिए है क्योंकि `obj3.artwork`, `obj2.artwork`, और `obj1` एक ही ऑब्जेक्ट हैं। जब आप ऑब्जेक्ट्स को "नेस्टेड" रुट में सोचते है तो यह देखना मुश्किल होता है। इसके बजाय, वे अलग-अलग ऑब्जेक्ट हैं जो प्रॉपर्टीज के साथ एक दूसरे पर "पॉइंट" करती हैं।
+
### Immer के साथ संक्षिप्त अपडेट लॉजिक लिखें {/*write-concise-update-logic-with-immer*/}
From be3f794deae87a7e6c7167c8488cb224f1abfe50 Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Thu, 20 Oct 2022 17:51:59 +0530
Subject: [PATCH 22/26] Update updating-objects-in-state.md
---
beta/src/pages/learn/updating-objects-in-state.md | 1 -
1 file changed, 1 deletion(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index 71fed7bf4..55d7f2a1e 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -646,7 +646,6 @@ let obj3 = {
### Immer के साथ संक्षिप्त अपडेट लॉजिक लिखें {/*write-concise-update-logic-with-immer*/}
-
यदि आपका स्टेट ज़्यादा नेस्टेड है, तो आप [इसे फ्लाय्टन करने](/learn/choosing-the-state-structure#avoid-deeply-nested-state) पर विचार करना चाहेंगे। लेकिन, यदि आप अपनी स्टेट स्ट्रक्चर को बदलना नहीं चाहते हैं, तो आप नेस्टेड स्प्रेड के लिए एक शॉर्टकट पसंद कर सकते हैं। [Immer](https://github.com/immerjs/use-immer) एक लोकप्रिय लाइब्रेरी है जो आपको सुविधाजनक लेकिन मुटेटिंग सिंटैक्स का उपयोग करके लिखने देता है और आपके लिए कॉपीस बनाने का ख्याल रखता है। Immer के साथ, आपके द्वारा लिखा गया कोड ऐसा लगता है जैसे आप "नियम तोड़ रहे हैं" और किसी ऑब्जेक्ट को मुटेट कर रहे हैं:
```js
From 02a993850f535d768fa4cbc28640f0cbfa755b6f Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Thu, 20 Oct 2022 17:56:03 +0530
Subject: [PATCH 23/26] Update updating-objects-in-state.md
---
beta/src/pages/learn/updating-objects-in-state.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index 55d7f2a1e..88293fa30 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -794,6 +794,7 @@ img { width: 200px; height: 200px; }
* **सरल कार्यान्वयन:** क्योंकि React म्यूटेशन पर निर्भर नहीं है, इसलिए इसे आपकी वस्तुओं के साथ कुछ खास करने की आवश्यकता नहीं है। इसे अपनी संपत्तियों को हाईजैक करने की आवश्यकता नहीं है, हमेशा उन्हें प्रॉक्सी में लपेटें, या प्रारंभ में अन्य कार्य करें जैसा कि कई "प्रतिक्रियाशील" समाधान करते हैं। यही कारण है कि React आपको किसी भी वस्तु को राज्य में रखने देता है - चाहे वह कितना भी बड़ा हो - बिना अतिरिक्त प्रदर्शन या शुद्धता के नुकसान के।
व्यवहार में, आप अक्सर React में उत्परिवर्तित अवस्था के साथ "दूर हो सकते हैं", लेकिन हम आपको दृढ़ता से सलाह देते हैं कि आप ऐसा न करें ताकि आप इस दृष्टिकोण को ध्यान में रखते हुए विकसित नई React सुविधाओं का उपयोग कर सकें। भविष्य के योगदानकर्ता और शायद आपका भविष्य स्वयं भी आपको धन्यवाद देगा!
+
From 037f90ed1222e1ba95d451c53126671795ba5f9d Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Thu, 20 Oct 2022 18:00:53 +0530
Subject: [PATCH 24/26] Update updating-objects-in-state.md
---
beta/src/pages/learn/updating-objects-in-state.md | 1 -
1 file changed, 1 deletion(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index 88293fa30..9ae158542 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -957,7 +957,6 @@ input { margin-left: 5px; margin-bottom: 5px; }
`हैंडलप्लसक्लिक` के साथ समस्या यह थी कि इसने `प्लेयर` ऑब्जेक्ट को बदल दिया। नतीजतन, रिएक्ट को यह नहीं पता था कि फिर से रेरेन्दर करने का एक कारण है, और स्क्रीन पर स्कोर को अपडेट नहीं किया। यही कारण है कि, जब आपने पहले नाम को संपादित किया, तो राज्य अपडेट हो गया, एक री-रेंडर को ट्रिगर किया जिसने स्क्रीन पर स्कोर को अपडेट किया।
-
`हैंडललास्टनाम चेंज` के साथ समस्या यह थी कि इसने मौजूदा `...प्लेयर` फ़ील्ड को नए ऑब्जेक्ट में कॉपी नहीं किया। यही कारण है कि आपके द्वारा अंतिम नाम संपादित करने के बाद स्कोर खो गया है।
From d02ff50aacdacb443384f0051403c493bb77df4c Mon Sep 17 00:00:00 2001
From: Akshat Jain <101265586+Akshat2Jain@users.noreply.github.com>
Date: Tue, 1 Nov 2022 21:59:37 +0530
Subject: [PATCH 25/26] Update updating-objects-in-state.md
---
.../pages/learn/updating-objects-in-state.md | 52 +++++++++----------
1 file changed, 26 insertions(+), 26 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index 9ae158542..67f7aa09b 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -781,31 +781,31 @@ img { width: 200px; height: 200px; }
-ध्यान दें कि ईवेंट हैंडलर कितने अधिक संक्षिप्त हो गए हैं। आप जितना चाहें उतना एक ही कॉम्पोनेन्ट में `useState` और `useImmer` को मिला सकते हैं। इमर अपडेट हैंडलर को संक्षिप्त रखने का एक शानदार तरीका है, खासकर यदि आपके स्टेट में नेस्टिंग है, और ऑब्जेक्ट की प्रतिलिपि बनाने से दोहराव कोड होता है।
+ध्यान दें कि ईवेंट हैंडलर कितने अधिक संक्षिप्त हो गए हैं। आप जितना चाहें उतना एक ही कौम्पोनॅन्ट में `useState` और `useImmer` को मिला सकते हैं। Immer अपडेट हैंडलर को संक्षिप्त रखने का यह एक शानदार तरीका है, खासकर यदि आपके स्टेट में नेस्टिंग है, और ऑब्जेक्ट की कॉपी बनाने से रिपीट कोड होता है।
कुछ कारण हैं:
-* **डिबगिंग:** यदि आप `console.log` का उपयोग करते हैं और स्टेट को परिवर्तित नहीं करते हैं, तो आपके पिछले लॉग हाल के स्टेट परिवर्तनों से प्रभावित नहीं होंगे। तो आप स्पष्ट रूप से देख सकते हैं कि रेंडरर्स के बीच सताते कैसे बदल गया है।
-* **ऑप्टिमिजाशंस:** कॉमन रिएक्ट [ऑप्टिमाइज़ेशन स्ट्रेटेजी](/learn/skipping-unchanged-trees) लंघन कार्य पर भरोसा करते हैं यदि पिछले प्रॉप्स या स्टेट अगले वाले के समान हैं। यदि आप कभी भी स्टेट को उत्परिवर्तित नहीं करते हैं, तो यह जांचना बहुत तेज़ है कि क्या कोई परिवर्तन हुआ है। यदि `prevObj === obj` है, तो आप सुनिश्चित हो सकते हैं कि इसके अंदर कुछ भी नहीं बदला होगा।
-* **नए विशेषताएँ:** हम जो नई रिएक्ट सुविधाएँ बना रहे हैं, वे राज्य के [स्नैपशॉट की तरह व्यवहार](/learn/state-as-a-snapshot) पर निर्भर हैं। यदि आप राज्य के पिछले संस्करणों को बदल रहे हैं, तो यह आपको नई सुविधाओं का उपयोग करने से रोक सकता है।
-* **आवश्यकता परिवर्तन:** कुछ एप्लिकेशन सुविधाएं, जैसे पूर्ववत करें/फिर से करें को लागू करना, परिवर्तनों का इतिहास दिखाना, या उपयोगकर्ता को किसी फ़ॉर्म को पहले के मानों पर रीसेट करने देना, तब करना आसान होता है जब कुछ भी उत्परिवर्तित नहीं होता है। ऐसा इसलिए है क्योंकि आप स्टेट की पिछली प्रतियों को स्मृति में रख सकते हैं, और उपयुक्त होने पर उनका पुन: उपयोग कर सकते हैं। यदि आप एक परिवर्तनशील दृष्टिकोण से शुरू करते हैं, तो इस तरह की सुविधाओं को बाद में जोड़ना मुश्किल हो सकता है।
-* **सरल कार्यान्वयन:** क्योंकि React म्यूटेशन पर निर्भर नहीं है, इसलिए इसे आपकी वस्तुओं के साथ कुछ खास करने की आवश्यकता नहीं है। इसे अपनी संपत्तियों को हाईजैक करने की आवश्यकता नहीं है, हमेशा उन्हें प्रॉक्सी में लपेटें, या प्रारंभ में अन्य कार्य करें जैसा कि कई "प्रतिक्रियाशील" समाधान करते हैं। यही कारण है कि React आपको किसी भी वस्तु को राज्य में रखने देता है - चाहे वह कितना भी बड़ा हो - बिना अतिरिक्त प्रदर्शन या शुद्धता के नुकसान के।
+* **डिबगिंग:** यदि आप `console.log` का उपयोग करते हैं और स्टेट को परिवर्तित नहीं करते हैं, तो आपके पिछले लॉग नए स्टेट परिवर्तनों से प्रभावित नहीं होंगे। तो आप स्पष्ट रूप से देख सकते हैं कि रेंडरर्स के बीच स्टेट कैसे बदल गया है।
+* **ऑप्टिमिजाशंस:** कॉमन React [ऑप्टिमाइज़ेशन स्ट्रेटेजी](/learn/skipping-unchanged-trees) काम छोड़ने पर भरोसा करते हैं यदि पिछले प्रॉप्स या स्टेट अगले वाले के समान हैं। यदि आप कभी भी स्टेट को उत्परिवर्तित नहीं करते हैं, यह बहुत तेज़ी में जांचा जा सकता है कि क्या कोई परिवर्तन हुआ है। यदि `prevObj === obj` है, तो आप सुनिश्चित हो सकते हैं कि इसके अंदर कुछ भी नहीं बदला होगा।
+* **नए फीचर्स:** हम जो नए React फीचर्स बना रहे हैं, वे इसपर निर्भर करता है की स्टेट को [स्नैपशॉट की तरह समझा जाये](/learn/state-as-a-snapshot)। यदि आप स्टेट के पिछले संस्करणों को बदल रहे हैं, तो यह आपको नए फीचर्स का उपयोग करने से रोक सकता है।
+* **आवश्यकता परिवर्तन:** कुछ एप्लिकेशन फीचर्स, जैसे Undo/Redo, परिवर्तनों की हिस्ट्री दिखाना, या यूज़र्स को किसी फ़ॉर्म को के पहले की वैल्यूज पर रीसेट करने देना, तब करना आसान होता है जब कुछ भी म्यूटेट नहीं होता है। ऐसा इसलिए है क्योंकि आप स्टेट की पिछली कॉपीस को मेमोरी में रख सकते हैं, और उपयुक्त होने पर उनका पुन: उपयोग कर सकते हैं। यदि आप एक म्यूटेटिव अप्रोच से शुरू करते हैं, तो इस तरह के फीचर्स को बाद में ऐड करना मुश्किल हो सकता है।
+* **सरल इम्प्लीमेंटेशन:** क्योंकि React म्यूटेशन पर निर्भर नहीं है, इसलिए इसे आपकी ऑब्जेक्ट्स के साथ कुछ खास करने की आवश्यकता नहीं है। इसे अपनी प्रॉपर्टीज को हाईजैक करने की आवश्यकता नहीं है, हमेशा उन्हें Proxies में लपेटें, या प्रारंभ में अन्य कार्य करें जैसा कि कई "रिएक्टिव" समाधान करते हैं। यही कारण है कि React आपको किसी भी ऑब्जेक्ट को स्टेट में रखने देता है - चाहे वह कितना भी बड़ा हो - बिना अतिरिक्त परफॉरमेंस या करेक्टनेस के नुकसान के।
-व्यवहार में, आप अक्सर React में उत्परिवर्तित अवस्था के साथ "दूर हो सकते हैं", लेकिन हम आपको दृढ़ता से सलाह देते हैं कि आप ऐसा न करें ताकि आप इस दृष्टिकोण को ध्यान में रखते हुए विकसित नई React सुविधाओं का उपयोग कर सकें। भविष्य के योगदानकर्ता और शायद आपका भविष्य स्वयं भी आपको धन्यवाद देगा!
+व्यवहार में, आप अक्सर React में म्यूटेटिंग स्टेट के साथ "काम चला सकते हैं", लेकिन हम आपको दृढ़ता से सलाह देते हैं कि आप ऐसा न करें ताकि आप इस अप्रोच को ध्यान में रखते हुए बनाये गए नए React फीचर्स का उपयोग कर सकें। भविष्य के कॉंट्रिब्युटर्स और शायद आप खुद भी भविष्य अपने आपको धन्यवाद देंगे!
-* Recat में सभी स्टेट को अपरिवर्तनीय मानें।
-* जब आप ऑब्जेक्ट को स्टेट में संग्रहीत करते हैं, तो उन्हें उत्परिवर्तित करने से रेंडर ट्रिगर नहीं होंगे और पिछले रेंडर "स्नैपशॉट्स" में स्थिति बदल जाएगी।
-* किसी ऑब्जेक्ट को बदलने के बजाय, उसका एक *नया* संस्करण बनाएं, और उस पर स्थिति सेट करके एक री-रेंडर को ट्रिगर करें।
-* आप ऑब्जेक्ट की प्रतियां बनाने के लिए `{...obj, कुछ: 'newValue'}` ऑब्जेक्ट स्प्रेड सिंटैक्स का उपयोग कर सकते हैं।
-* स्प्रेड सिंटैक्स उथला है: यह केवल एक स्तर को गहराई से कॉपी करता है।
+* React में सभी स्टेट को अपरिवर्तनीय मानें।
+* जब आप ऑब्जेक्ट को स्टेट में स्टोर करते हैं, तो उन्हें म्यूटेट करने से रेंडर ट्रिगर नहीं होंगे और पिछले रेंडर "स्नैपशॉट्स" में स्थिति बदल जाएगी।
+* किसी ऑब्जेक्ट को बदलने के बजाय, उसका एक *नया* वर्शन बनाएं, और उस पर स्टेट को सेट करके एक री-रेंडर को ट्रिगर करें।
+* आप ऑब्जेक्ट की कॉपीस बनाने के लिए ऑब्जेक्ट स्प्रेड सिंटैक्स `{...obj, something: 'newValue'}` का उपयोग कर सकते हैं।
+* स्प्रेड सिंटैक्स शैलो है: यह केवल एक लेवल तक की गहराई से कॉपी करता है।
* नेस्टेड ऑब्जेक्ट को अपडेट करने के लिए, आपको उस जगह से ऊपर तक कॉपी बनानी होगी, जहां आप अपडेट कर रहे हैं।
-* दोहराए जाने वाले प्रतिलिपि कोड को कम करने के लिए, Immer का उपयोग करें।
+* रिपीट होने वाले प्रतिलिपि कोड को कम करने के लिए, Immer का उपयोग करें।
@@ -813,11 +813,11 @@ img { width: 200px; height: 200px; }
-### गलत स्थिति अपडेट को ठीक करें {/*fix-incorrect-state-updates*/}
+### गलत स्टेट अपडेट को ठीक करना {/*fix-incorrect-state-updates*/}
-इस फॉर्म में कुछ बग हैं। उस बटन पर क्लिक करें जो स्कोर को कुछ गुना बढ़ा देता है। ध्यान दें कि यह नहीं बढ़ता है। फिर पहले नाम को संपादित करें, और ध्यान दें कि आपके परिवर्तनों के साथ स्कोर अचानक "पकड़ गया" है। अंत में, अंतिम नाम संपादित करें, और ध्यान दें कि स्कोर पूरी तरह से गायब हो गया है।
+इस फॉर्म में कुछ बग हैं। उस बटन पर क्लिक करें जो स्कोर को कुछ गुना बढ़ा देता है। ध्यान दें कि यह नहीं बढ़ता है। फिर पहले नाम को एडिट करें, और ध्यान दें कि आपके परिवर्तनों के साथ स्कोर अचानक "आपके बदलाव के अनुसार सही हो गया" है। अंत में, अंतिम नाम एडिट करें, और ध्यान दें कि स्कोर पूरी तरह से गायब हो गया है।
-आपका काम इन सभी बगों को ठीक करना है। जैसे ही आप उन्हें ठीक करते हैं, समझाएं कि उनमें से प्रत्येक क्यों होता है।
+आपका काम इन सभी बगों को ठीक करना है। जैसे-जैसे आप उन्हें ठीक करते हैं, यह समझाएं कि उनमें से प्रत्येक क्यों होते हैं।
@@ -885,7 +885,7 @@ input { margin-left: 5px; margin-bottom: 5px; }
-यहाँ एक संस्करण है जिसमें दोनों बग फिक्स हैं:
+यहाँ एक वर्शन है जिसमें दोनों बग फिक्स हैं:
@@ -955,23 +955,23 @@ input { margin-left: 5px; margin-bottom: 5px; }
-`हैंडलप्लसक्लिक` के साथ समस्या यह थी कि इसने `प्लेयर` ऑब्जेक्ट को बदल दिया। नतीजतन, रिएक्ट को यह नहीं पता था कि फिर से रेरेन्दर करने का एक कारण है, और स्क्रीन पर स्कोर को अपडेट नहीं किया। यही कारण है कि, जब आपने पहले नाम को संपादित किया, तो राज्य अपडेट हो गया, एक री-रेंडर को ट्रिगर किया जिसने स्क्रीन पर स्कोर को अपडेट किया।
+`handlePlusClick` के साथ समस्या यह थी कि इसने `player` ऑब्जेक्ट को बदल दिया। जिसकी वजह से, React को यह नहीं पता था कि फिर से री-रेंडर करने का एक कारण है, और स्क्रीन पर स्कोर को एडिट नहीं किया। यही कारण है कि, जब आपने पहले नाम को संपादित किया, तो स्टेट अपडेट हो गया, एक री-रेंडर को भी ट्रिगर किया जिसने स्क्रीन पर स्कोर को अपडेट किया।
-`हैंडललास्टनाम चेंज` के साथ समस्या यह थी कि इसने मौजूदा `...प्लेयर` फ़ील्ड को नए ऑब्जेक्ट में कॉपी नहीं किया। यही कारण है कि आपके द्वारा अंतिम नाम संपादित करने के बाद स्कोर खो गया है।
+`handleLastNameChange` के साथ समस्या यह थी कि इसने मौजूदा `...player` फ़ील्ड को नए ऑब्जेक्ट में कॉपी नहीं किया। यही कारण है कि आपके द्वारा अंतिम नाम एडिट करने के बाद स्कोर गायब हो गया।
-### उत्परिवर्तन खोजें और ठीक करें {/*find-and-fix-the-mutation*/}
+### म्यूटेशन ढूंढे और ठीक करें {/*find-and-fix-the-mutation*/}
स्टैटिक बैकग्राउंड पर ड्रैग करने योग्य बॉक्स होता है। आप चुनिंदा इनपुट का उपयोग करके बॉक्स का रंग बदल सकते हैं।
-लेकिन एक बग है। यदि आप पहले बॉक्स को घुमाते हैं, और फिर उसका रंग बदलते हैं, तो बैकग्राउंड (जिसे हिलना नहीं चाहिए!) बॉक्स की स्थिति में "कूद" जाएगा। लेकिन ऐसा नहीं होना चाहिए: 'बैकग्राउंड' का 'पोजिशन' प्रोप 'आरंभिक स्थिति' पर सेट है, जो कि '{x: 0, y: 0}' है। रंग बदलने के बाद बैकग्राउंड क्यों हिल रहा है?
+लेकिन एक बग है। यदि आप पहले बॉक्स को घुमाते हैं, और फिर उसका रंग बदलते हैं, तो बैकग्राउंड (जिसे हिलना नहीं चाहिए!) बॉक्स की जगह पर "कूद" जाएगा। लेकिन ऐसा नहीं होना चाहिए: 'Background' का 'position' prop 'initialPosition' पर सेट है, जो कि '{ x: 0, y: 0 }' है। रंग बदलने के बाद बैकग्राउंड क्यों हिल रहा है?
बग ढूंढें और इसे ठीक करें।
-यदि कुछ अनपेक्षित परिवर्तन होता है, तो एक म्युटेशन होता है। `App.js` में उत्परिवर्तन खोजें और इसे ठीक करें।
+यदि कुछ अनएक्सपेक्टेड बदलता होता है, तो एक म्युटेशन होता है।`App.js` में म्यूटेशन ढूंढे और उसे ठीक करें।
@@ -1121,9 +1121,9 @@ select { margin-bottom: 10px; }
-समस्या `हैंडलमोव` के अंदर उत्परिवर्तन में थी। इसने `shape.position` को बदल दिया, लेकिन यह वही ऑब्जेक्ट है जिस पर `initialPosition` इंगित करता है। यही कारण है कि आकार और बैकग्राउंड दोनों चलते हैं। (यह एक उत्परिवर्तन है, इसलिए परिवर्तन एक असंबंधित अद्यतन तक स्क्रीन पर प्रतिबिंबित नहीं होता है - रंग परिवर्तन - एक पुन: प्रस्तुत करना ट्रिगर करता है।)
+समस्या `handleMove` के अंदर म्यूटेशन में थी। इसने `shape.position` को बदल दिया, लेकिन यह वही ऑब्जेक्ट है जिस पर `initialPosition` पॉइंट करता है। यही कारण है कि शेप और बैकग्राउंड दोनों मूव होते हैं। (यह एक म्यूटेशन है, इसलिए परिवर्तन एक अनरिलेटेड अपडेट तक स्क्रीन पर रिफ्लेक्ट नहीं होता है--रंग परिवर्तन--एक री-रेंडर करना ट्रिगर करता है।)
-फिक्स म्यूटेशन को `हैंडलमोव` से हटाना है, और आकृति को कॉपी करने के लिए स्प्रेड सिंटैक्स का उपयोग करना है। ध्यान दें कि `+=` एक उत्परिवर्तन है, इसलिए आपको नियमित `+` ऑपरेशन का उपयोग करने के लिए इसे फिर से लिखना होगा।
+इसका फिक्स म्यूटेशन को `handleMove` से हटाना है, और shape को कॉपी करने के लिए स्प्रेड सिंटैक्स का उपयोग करना है। ध्यान दें कि `+=` एक म्यूटेशन है, इसलिए आपको नियमित `+` ऑपरेशन का उपयोग करने के लिए इसे फिर से लिखना होगा।
@@ -1278,7 +1278,7 @@ select { margin-bottom: 10px; }
### Immer के साथ किसी ऑब्जेक्ट को अपडेट करें {/*update-an-object-with-immer*/}
-पिछली चुनौती की तरह यह वही buggy उदाहरण है। इस बार, इमर का उपयोग करके उत्परिवर्तन को ठीक करें। आपकी सुविधा के लिए, `useImmer` पहले से ही आयात किया जा चुका है, इसलिए इसका उपयोग करने के लिए आपको `आकार` स्थिति चर को बदलना होगा।
+पिछले चैलेंज की तरह यह वही buggy उदाहरण है। इस बार, Immer का उपयोग करके म्यूटेशन को ठीक करें। आपकी सुविधा के लिए, `useImmer` पहले से ही इम्पोर्ट किया जा चुका है, इसलिए इसका उपयोग करने के लिए आपको `shape` स्टेट वेरिएबल को बदलना होगा।
@@ -1445,7 +1445,7 @@ select { margin-bottom: 10px; }
-यह इमर के साथ फिर से लिखा गया समाधान है। ध्यान दें कि कैसे ईवेंट हैंडलर एक परिवर्तनशील तरीके से लिखे जाते हैं, लेकिन बग नहीं होता है। ऐसा इसलिए है क्योंकि हुड के निचे , इमर मौजूदा ऑब्जेक्ट्स को कभी भी उत्परिवर्तित नहीं करता है।
+यह Immer के साथ फिर से लिखा गया समाधान है। ध्यान दें कि कैसे ईवेंट हैंडलर एक म्यूटेटिंग तरीके से लिखे जाते हैं, लेकिन बग नहीं आता है। ऐसा इसलिए है क्योंकि हुड के निचे , Immer मौजूदा ऑब्जेक्ट्स को कभी भी म्यूटेट नहीं करता है।
From c2960a0251bf22ebb0becf2f5ecbd42ae3917fbf Mon Sep 17 00:00:00 2001
From: Arshad Kazmi
Date: Tue, 1 Nov 2022 19:18:54 +0100
Subject: [PATCH 26/26] Typo fix
---
beta/src/pages/learn/updating-objects-in-state.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md
index 67f7aa09b..8c7cda3d3 100644
--- a/beta/src/pages/learn/updating-objects-in-state.md
+++ b/beta/src/pages/learn/updating-objects-in-state.md
@@ -805,7 +805,7 @@ img { width: 200px; height: 200px; }
* आप ऑब्जेक्ट की कॉपीस बनाने के लिए ऑब्जेक्ट स्प्रेड सिंटैक्स `{...obj, something: 'newValue'}` का उपयोग कर सकते हैं।
* स्प्रेड सिंटैक्स शैलो है: यह केवल एक लेवल तक की गहराई से कॉपी करता है।
* नेस्टेड ऑब्जेक्ट को अपडेट करने के लिए, आपको उस जगह से ऊपर तक कॉपी बनानी होगी, जहां आप अपडेट कर रहे हैं।
-* रिपीट होने वाले प्रतिलिपि कोड को कम करने के लिए, Immer का उपयोग करें।
+* रिपीट होने वाले कोड को कम करने के लिए, Immer का उपयोग करें।
@@ -955,7 +955,7 @@ input { margin-left: 5px; margin-bottom: 5px; }
-`handlePlusClick` के साथ समस्या यह थी कि इसने `player` ऑब्जेक्ट को बदल दिया। जिसकी वजह से, React को यह नहीं पता था कि फिर से री-रेंडर करने का एक कारण है, और स्क्रीन पर स्कोर को एडिट नहीं किया। यही कारण है कि, जब आपने पहले नाम को संपादित किया, तो स्टेट अपडेट हो गया, एक री-रेंडर को भी ट्रिगर किया जिसने स्क्रीन पर स्कोर को अपडेट किया।
+`handlePlusClick` के साथ समस्या यह थी कि इसने `player` ऑब्जेक्ट को बदल दिया। जिसकी वजह से, React को यह नहीं पता था कि फिर से री-रेंडर करने का एक कारण है, और स्क्रीन पर स्कोर को अपडेट नहीं किया। यही कारण है कि, जब आपने पहले नाम को एडिट किया, तो स्टेट अपडेट हो गया, एक री-रेंडर को _भी_ ट्रिगर किया जिसने स्क्रीन पर स्कोर को अपडेट किया।
`handleLastNameChange` के साथ समस्या यह थी कि इसने मौजूदा `...player` फ़ील्ड को नए ऑब्जेक्ट में कॉपी नहीं किया। यही कारण है कि आपके द्वारा अंतिम नाम एडिट करने के बाद स्कोर गायब हो गया।