diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index e366ea7cc..263591fa7 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -1,52 +1,52 @@
 ---
-title: 'Manipulating the DOM with Refs'
+title: 'Refs के साथ DOM में बदलाव करना'
 ---
 
 <Intro>
 
-React automatically updates the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) to match your render output, so your components won't often need to manipulate it. However, sometimes you might need access to the DOM elements managed by React--for example, to focus a node, scroll to it, or measure its size and position. There is no built-in way to do those things in React, so you will need a *ref* to the DOM node.
+React स्वचालित रूप से [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) को आपके रेंडर आउटपुट के अनुसार अपडेट करता है, जिससे आपके कौम्पोनॅन्टस को अक्सर इसे मैन्युपुलेट करने की आवश्यकता नहीं होती। हालांकि, कभी-कभी आपको React द्वारा मैनेज किए गए DOM एलिमेंट्स तक पहुंचने की आवश्यकता हो सकती है—जैसे किसी नोड को फोकस करना, स्क्रॉल करना, या उसका आकार और स्थिति मापना। React में इन चीज़ों के लिए कोई बिल्ट-इन तरीका नहीं है, इसलिए आपको DOM नोड के लिए एक *ref* की आवश्यकता होगी।
 
 </Intro>
 
 <YouWillLearn>
 
-- How to access a DOM node managed by React with the `ref` attribute
-- How the `ref` JSX attribute relates to the `useRef` Hook
-- How to access another component's DOM node
-- In which cases it's safe to modify the DOM managed by React
+- React द्वारा मैनेज किए गए DOM नोड तक `ref` एट्रिब्यूट के साथ कैसे पहुंचें
+- `ref` JSX एट्रिब्यूट का `useRef` हुक से क्या संबंध है
+- किसी दूसरे कौम्पोनॅन्ट के DOM नोड तक कैसे पहुंचें
+- किन मामलों में React द्वारा मैनेज किए गए DOM को बदलना सुरक्षित है
 
 </YouWillLearn>
 
-## Getting a ref to the node {/*getting-a-ref-to-the-node*/}
+## नोड के लिए ref प्राप्त करना {/*getting-a-ref-to-the-node*/}
 
-To access a DOM node managed by React, first, import the `useRef` Hook:
+React द्वारा मैनेज किए गए DOM नोड तक पहुंचने के लिए, सबसे पहले `useRef` हुक को इम्पोर्ट करें:
 
 ```js
 import { useRef } from 'react';
 ```
 
-Then, use it to declare a ref inside your component:
+फिर, इसे अपने कौम्पोनॅन्ट के अंदर एक ref डिक्लेअर करने के लिए उपयोग करें:
 
 ```js
 const myRef = useRef(null);
 ```
 
-Finally, pass your ref as the `ref` attribute to the JSX tag for which you want to get the DOM node:
+अंत में, अपने ref को उस JSX टैग के `ref` एट्रिब्यूट के रूप में पास करें जिसके लिए आप DOM नोड प्राप्त करना चाहते हैं:
 
 ```js
 <div ref={myRef}>
 ```
 
-The `useRef` Hook returns an object with a single property called `current`. Initially, `myRef.current` will be `null`. When React creates a DOM node for this `<div>`, React will put a reference to this node into `myRef.current`. You can then access this DOM node from your [event handlers](/learn/responding-to-events) and use the built-in [browser APIs](https://developer.mozilla.org/docs/Web/API/Element) defined on it.
+`useRef` हुक एक ऑब्जेक्ट रिटर्न करता है जिसमें एकमात्र प्रॉपर्टी होती है, जिसे `current` कहा जाता है। शुरुआत में, `myRef.current` का मान `null` होगा। जब React इस `<div>` के लिए एक DOM नोड बनाएगा, तो React इस नोड का रेफरेंस `myRef.current` में डाल देगा। इसके बाद आप इस DOM नोड को अपने [इवेंट हैंडलर्स](/learn/responding-to-events) से एक्सेस कर सकते हैं और उसकी बिल्ट-इन [ब्राउज़र APIs](https://developer.mozilla.org/docs/Web/API/Element) का उपयोग कर सकते हैं।
 
 ```js
-// You can use any browser APIs, for example:
+// आप किसी भी ब्राउज़र API का उपयोग कर सकते हैं, उदाहरण के लिए:
 myRef.current.scrollIntoView();
 ```
 
-### Example: Focusing a text input {/*example-focusing-a-text-input*/}
+### उदाहरण: टेक्स्ट इनपुट पर फोकस करना {/*example-focusing-a-text-input*/}
 
-In this example, clicking the button will focus the input:
+इस उदाहरण में, बटन पर क्लिक करने से इनपुट पर फोकस होगा:
 
 <Sandpack>
 
@@ -64,7 +64,7 @@ export default function Form() {
     <>
       <input ref={inputRef} />
       <button onClick={handleClick}>
-        Focus the input
+        इनपुट पर फोकस करें
       </button>
     </>
   );
@@ -73,18 +73,18 @@ export default function Form() {
 
 </Sandpack>
 
-To implement this:
+इसका उपयोग करने के लिए:
 
-1. Declare `inputRef` with the `useRef` Hook.
-2. Pass it as `<input ref={inputRef}>`. This tells React to **put this `<input>`'s DOM node into `inputRef.current`.**
-3. In the `handleClick` function, read the input DOM node from `inputRef.current` and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it with `inputRef.current.focus()`.
-4. Pass the `handleClick` event handler to `<button>` with `onClick`.
+1. `useRef` हुक के साथ `inputRef` डिक्लेअर करें।  
+2. इसे `<input ref={inputRef}>` के रूप में पास करें। यह React को यह बताता है कि **इस `<input>` के DOM नोड को `inputRef.current` में डालें।**  
+3. `handleClick` फंक्शन में, इनपुट DOM नोड को `inputRef.current` से पढ़ें और `focus()` को `inputRef.current.focus()` के साथ कॉल करें।  
+4. `handleClick` इवेंट हैंडलर को `<button>` में `onClick` के साथ पास करें।  
 
-While DOM manipulation is the most common use case for refs, the `useRef` Hook can be used for storing other things outside React, like timer IDs. Similarly to state, refs remain between renders. Refs are like state variables that don't trigger re-renders when you set them. Read about refs in [Referencing Values with Refs.](/learn/referencing-values-with-refs)
+हालांकि DOM मैनिपुलेशन रेफ्स के लिए सबसे आम उपयोग है, `useRef` हुक का उपयोग React के बाहर अन्य चीजों, जैसे टाइमर IDs, को स्टोर करने के लिए भी किया जा सकता है। स्टेट की तरह, रेफ्स रेंडर के बीच बने रहते हैं। रेफ्स स्टेट वेरिएबल्स की तरह हैं, लेकिन इन्हें सेट करने पर री-रेंडर नहीं होता। रेफ्स के बारे में अधिक जानने के लिए पढ़ें [Referencing Values with Refs.](/learn/referencing-values-with-refs)
 
-### Example: Scrolling to an element {/*example-scrolling-to-an-element*/}
+### उदाहरण: किसी एलिमेंट पर स्क्रॉल करना {/*example-scrolling-to-an-element*/}
 
-You can have more than a single ref in a component. In this example, there is a carousel of three images. Each button centers an image by calling the browser [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) method on the corresponding DOM node:
+एक कौम्पोनॅन्ट में एक से अधिक रेफ्स हो सकते हैं। इस उदाहरण में, तीन इमेजेस का कैरोसेल है। प्रत्येक बटन एक इमेज को केंद्रित करता है, इसके लिए ब्राउज़र के [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) मेथड को संबंधित DOM नोड पर कॉल किया जाता है:
 
 <Sandpack>
 
@@ -193,27 +193,27 @@ li {
 
 <DeepDive>
 
-#### How to manage a list of refs using a ref callback {/*how-to-manage-a-list-of-refs-using-a-ref-callback*/}
+#### लिस्ट ऑफ़ रिफ्स को `ref` कॉलबैक का उपयोग करके प्रबंधित करना {/*how-to-manage-a-list-of-refs-using-a-ref-callback*/}
 
-In the above examples, there is a predefined number of refs. However, sometimes you might need a ref to each item in the list, and you don't know how many you will have. Something like this **wouldn't work**:
+उपरोक्त उदाहरणों में, रिफ्स की संख्या पहले से तय होती है। लेकिन कभी-कभी आपको लिस्ट में प्रत्येक आइटम के लिए एक रिफ की ज़रूरत हो सकती है, और आपको पता नहीं होता कि कितने आइटम होंगे। ऐसा कुछ **काम नहीं करेगा**:
 
 ```js
 <ul>
   {items.map((item) => {
-    // Doesn't work!
+    // काम नहीं करेगा!
     const ref = useRef(null);
     return <li ref={ref} />;
   })}
 </ul>
 ```
 
-This is because **Hooks must only be called at the top-level of your component.** You can't call `useRef` in a loop, in a condition, or inside a `map()` call.
+ऐसा इसलिए है क्योंकि **हुक्स को केवल आपके कौम्पोनॅन्ट के शीर्ष स्तर पर ही कॉल किया जाना चाहिए।** आप `useRef` को किसी लूप, कंडीशन, या `map()` कॉल के अंदर नहीं कॉल कर सकते।
 
-One possible way around this is to get a single ref to their parent element, and then use DOM manipulation methods like [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to "find" the individual child nodes from it. However, this is brittle and can break if your DOM structure changes.
+इस समस्या को हल करने का एक तरीका यह है कि उनके पैरेंट एलिमेंट के लिए एक रिफ लें और फिर DOM मैनिपुलेशन विधियों जैसे [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) का उपयोग करके व्यक्तिगत चाइल्ड नोड्स "खोजें"। लेकिन यह तरीका नाजुक है और आपके DOM स्ट्रक्चर के बदलने पर टूट सकता है।
 
-Another solution is to **pass a function to the `ref` attribute.** This is called a [`ref` callback.](/reference/react-dom/components/common#ref-callback) React will call your ref callback with the DOM node when it's time to set the ref, and with `null` when it's time to clear it. This lets you maintain your own array or a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), and access any ref by its index or some kind of ID.
+एक और समाधान है कि **`ref` एट्रिब्यूट को एक फ़ंक्शन पास करें।** इसे [`ref` कॉलबैक](/reference/react-dom/components/common#ref-callback) कहा जाता है। React आपके रिफ कॉलबैक को DOM नोड के साथ तब कॉल करेगा जब रिफ सेट करना हो, और `null` के साथ जब रिफ को क्लियर करना हो। यह आपको अपनी खुद की [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) या ऐरे बनाए रखने देता है और किसी रिफ तक इसकी इंडेक्स या किसी प्रकार के ID के माध्यम से पहुंचने देता है।
 
-This example shows how you can use this approach to scroll to an arbitrary node in a long list:
+यह उदाहरण दिखाता है कि आप इस तरीके का उपयोग करके किसी लंबी लिस्ट में किसी भी नोड को स्क्रॉल कैसे कर सकते हैं:
 
 <Sandpack>
 
@@ -236,7 +236,7 @@ export default function CatFriends() {
 
   function getMap() {
     if (!itemsRef.current) {
-      // Initialize the Map on first usage.
+      // पहली बार उपयोग पर Map को इनिशियलाइज़ करें।
       itemsRef.current = new Map();
     }
     return itemsRef.current;
@@ -311,43 +311,43 @@ li {
 
 </Sandpack>
 
-In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) from item ID to a DOM node. ([Refs can hold any values!](/learn/referencing-values-with-refs)) The [`ref` callback](/reference/react-dom/components/common#ref-callback) on every list item takes care to update the Map:
+इस उदाहरण में, `itemsRef` एक ही DOM नोड को नहीं रखता है। इसके बजाय, यह एक [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) रखता है, जो आइटम ID से DOM नोड को मैप करता है। ([Refs किसी भी वैल्यू को रख सकते हैं!](/learn/referencing-values-with-refs)) प्रत्येक लिस्ट आइटम पर [`ref` कॉलबैक](/reference/react-dom/components/common#ref-callback) Map को अपडेट करने का ध्यान रखता है:
 
 ```js
 <li
   key={cat.id}
   ref={node => {
     const map = getMap();
-    // Add to the Map
+    // Map में जोड़ें
     map.set(cat, node);
 
     return () => {
-      // Remove from the Map
+      // Map से हटाएं
       map.delete(cat);
     };
   }}
 >
 ```
 
-This lets you read individual DOM nodes from the Map later.
+यह आपको बाद में Map से व्यक्तिगत DOM नोड्स पढ़ने की अनुमति देता है।
 
 <Note>
 
-When Strict Mode is enabled, ref callbacks will run twice in development.
+जब Strict Mode सक्षम होता है, तो डेवेलपमेंट में रिफ कॉलबैक दो बार चलेंगे।
 
-Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bugs-found-by-re-running-ref-callbacks-in-development) in callback refs.
+`[Ref]` कॉलबैक को फिर से चलाने से बग कैसे ठीक होते हैं, इसके बारे में अधिक जानें। [यहां पढ़ें](/reference/react/StrictMode#fixing-bugs-found-by-re-running-ref-callbacks-in-development)
 
 </Note>
 
 </DeepDive>
 
-## Accessing another component's DOM nodes {/*accessing-another-components-dom-nodes*/}
+## किसी अन्य कौम्पोनॅन्ट के DOM नोड्स तक पहुंचना {/*accessing-another-components-dom-nodes*/}
 
-<Pitfall>
-Refs are an escape hatch. Manually manipulating _another_ component's DOM nodes can make your code fragile.
+<Pitfall>  
+Refs एक अंतिम उपाय हैं। किसी _दूसरे_ कौम्पोनॅन्ट के DOM नोड्स को मैन्युअली मैनिपुलेट करना आपके कोड को नाजुक बना सकता है।  
 </Pitfall>
 
-You can pass refs from parent component to child components [just like any other prop](/learn/passing-props-to-a-component).
+आप पैरेंट कौम्पोनॅन्ट से चाइल्ड कौम्पोनॅन्टस तक refs को [किसी अन्य प्रॉप की तरह](/learn/passing-props-to-a-component) पास कर सकते हैं।
 
 ```js {3-4,9}
 import { useRef } from 'react';
@@ -358,13 +358,13 @@ function MyInput({ ref }) {
 
 function MyForm() {
   const inputRef = useRef(null);
-  return <MyInput ref={inputRef} />
+  return <MyInput ref={inputRef} />;
 }
 ```
 
-In the above example, a ref is created in the parent component, `MyForm`, and is passed to the child component, `MyInput`. `MyInput` then passes the ref to `<input>`. Because `<input>` is a [built-in component](/reference/react-dom/components/common) React sets the `.current` property of the ref to the `<input>` DOM element.
+ऊपर दिए गए उदाहरण में, एक ref पैरेंट कौम्पोनॅन्ट `MyForm` में बनाया गया है और चाइल्ड कौम्पोनॅन्ट `MyInput` को पास किया गया है। `MyInput` फिर इस ref को `<input>` को पास करता है। चूंकि `<input>` एक [बिल्ट-इन कौम्पोनॅन्ट](/reference/react-dom/components/common) है, React ref की `.current` प्रॉपर्टी को `<input>` DOM एलिमेंट पर सेट करता है।
 
-The `inputRef` created in `MyForm` now points to the `<input>` DOM element returned by `MyInput`. A click handler created in `MyForm` can access `inputRef` and call `focus()` to set the focus on `<input>`.
+`MyForm` में बनाया गया `inputRef` अब `MyInput` द्वारा रिटर्न किए गए `<input>` DOM एलिमेंट को पॉइंट करता है। `MyForm` में बनाया गया एक क्लिक हैंडलर `inputRef` को एक्सेस कर सकता है और `<input>` पर फोकस सेट करने के लिए `focus()` को कॉल कर सकता है।
 
 <Sandpack>
 
@@ -395,11 +395,12 @@ export default function MyForm() {
 
 </Sandpack>
 
-<DeepDive>
+<DeepDive>  
 
-#### Exposing a subset of the API with an imperative handle {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
+#### API के एक सबसेट को एक इम्पेरेटिव हैंडल के साथ एक्सपोज करना {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
 
-In the above example, the ref passed to `MyInput` is passed on to the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with [`useImperativeHandle`](/reference/react/useImperativeHandle):
+ऊपर दिए गए उदाहरण में, `MyInput` को पास किया गया ref ऑरिजिनल DOM इनपुट एलिमेंट तक पास होता है। यह पैरेंट कौम्पोनॅन्ट को इस पर `focus()` कॉल करने की अनुमति देता है। हालांकि, इससे पैरेंट कौम्पोनॅन्ट को कुछ और भी करने की अनुमति मिलती है—उदाहरण के लिए, इसकी CSS स्टाइल्स को बदलना।  
+कुछ असामान्य मामलों में, आप एक्सपोज़ की गई कार्यक्षमता को सीमित करना चाह सकते हैं। आप यह [`useImperativeHandle`](/reference/react/useImperativeHandle) का उपयोग करके कर सकते हैं:
 
 <Sandpack>
 
@@ -409,7 +410,7 @@ import { useRef, useImperativeHandle } from "react";
 function MyInput({ ref }) {
   const realInputRef = useRef(null);
   useImperativeHandle(ref, () => ({
-    // Only expose focus and nothing else
+    // केवल focus को एक्सपोज करें और कुछ नहीं
     focus() {
       realInputRef.current.focus();
     },
@@ -435,28 +436,29 @@ export default function Form() {
 
 </Sandpack>
 
-Here, `realInputRef` inside `MyInput` holds the actual input DOM node. However, [`useImperativeHandle`](/reference/react/useImperativeHandle) instructs React to provide your own special object as the value of a ref to the parent component. So `inputRef.current` inside the `Form` component will only have the `focus` method. In this case, the ref "handle" is not the DOM node, but the custom object you create inside [`useImperativeHandle`](/reference/react/useImperativeHandle) call.
+यहां, `MyInput` के अंदर `realInputRef` असली इनपुट DOM नोड को होल्ड करता है। हालांकि, [`useImperativeHandle`](/reference/react/useImperativeHandle) React को निर्देश देता है कि वह पैरेंट कौम्पोनॅन्ट को एक कस्टम ऑब्जेक्ट को रिफ के रूप में प्रोवाइड करे।  
+इसलिए, `Form` कौम्पोनॅन्ट के अंदर `inputRef.current` केवल `focus` मेथड तक ही पहुंच प्रदान करेगा। इस मामले में, रिफ "हैंडल" DOM नोड नहीं है, बल्कि वह कस्टम ऑब्जेक्ट है जिसे आप [`useImperativeHandle`](/reference/react/useImperativeHandle) कॉल के अंदर बनाते हैं।  
 
-</DeepDive>
+</DeepDive>  
 
-## When React attaches the refs {/*when-react-attaches-the-refs*/}
+## जब React रेफ्स को जोड़ता है {/*when-react-attaches-the-refs*/}
 
-In React, every update is split in [two phases](/learn/render-and-commit#step-3-react-commits-changes-to-the-dom):
+React में, प्रत्येक अपडेट दो चरणों में बाँटा जाता है:
 
-* During **render,** React calls your components to figure out what should be on the screen.
-* During **commit,** React applies changes to the DOM.
+* **रेंडर** के दौरान, React आपके कौम्पोनॅन्टस को कॉल करता है ताकि यह पता लगा सके कि स्क्रीन पर क्या दिखना चाहिए।
+* **कमीट** के दौरान, React DOM में बदलाव लागू करता है।
 
-In general, you [don't want](/learn/referencing-values-with-refs#best-practices-for-refs) to access refs during rendering. That goes for refs holding DOM nodes as well. During the first render, the DOM nodes have not yet been created, so `ref.current` will be `null`. And during the rendering of updates, the DOM nodes haven't been updated yet. So it's too early to read them.
+सामान्यतः, आप **रेंडर** के दौरान रेफ्स तक पहुँचने की कोशिश नहीं करना चाहते हैं। यह उन रेफ्स के लिए भी जाता है जो DOM नोड्स को होल्ड करते हैं। पहले रेंडर के दौरान, DOM नोड्स अभी तक बनाए नहीं गए होते हैं, इसलिए `ref.current` `null` होगा। और अपडेट के दौरान रेंडर करते समय, DOM नोड्स अभी तक अपडेट नहीं हुए होते हैं। इसलिए, उन्हें पढ़ने के लिए यह बहुत जल्दी होता है।
 
-React sets `ref.current` during the commit. Before updating the DOM, React sets the affected `ref.current` values to `null`. After updating the DOM, React immediately sets them to the corresponding DOM nodes.
+React `ref.current` को **कमीट** के दौरान सेट करता है। DOM को अपडेट करने से पहले, React प्रभावित `ref.current` मानों को `null` पर सेट करता है। DOM को अपडेट करने के बाद, React इन्हें तुरंत संबंधित DOM नोड्स पर सेट कर देता है।
 
-**Usually, you will access refs from event handlers.** If you want to do something with a ref, but there is no particular event to do it in, you might need an Effect. We will discuss Effects on the next pages.
+**आमतौर पर, आप रेफ्स तक पहुँचने के लिए इवेंट हैंडलर्स का उपयोग करेंगे।** अगर आप किसी रेफ के साथ कुछ करना चाहते हैं, लेकिन ऐसा कोई विशेष इवेंट नहीं है जिसमें इसे करना हो, तो आपको एक Effect की आवश्यकता हो सकती है। हम अगले पृष्ठों पर Effects के बारे में चर्चा करेंगे।
 
 <DeepDive>
 
-#### Flushing state updates synchronously with flushSync {/*flushing-state-updates-synchronously-with-flush-sync*/}
+#### फ्लशिंग स्टेट अपडेट्स को सिंक्रोनसली फ्लशसिंक के साथ {/*flushing-state-updates-synchronously-with-flush-sync*/}
 
-Consider code like this, which adds a new todo and scrolls the screen down to the last child of the list. Notice how, for some reason, it always scrolls to the todo that was *just before* the last added one:
+ऐसे कोड पर विचार करें, जो एक नया टूडू जोड़ता है और स्क्रीन को लिस्ट के आखिरी चाइल्ड तक स्क्रॉल करता है। ध्यान दें कि, किसी कारणवश, यह हमेशा उस टूडू तक स्क्रॉल करता है जो *अभी हाल ही में जोड़ा गया* था:
 
 <Sandpack>
 
@@ -510,16 +512,16 @@ for (let i = 0; i < 20; i++) {
 
 </Sandpack>
 
-The issue is with these two lines:
+समस्या इन दो लाइनों में है:
 
 ```js
 setTodos([ ...todos, newTodo]);
 listRef.current.lastChild.scrollIntoView();
 ```
 
-In React, [state updates are queued.](/learn/queueing-a-series-of-state-updates) Usually, this is what you want. However, here it causes a problem because `setTodos` does not immediately update the DOM. So the time you scroll the list to its last element, the todo has not yet been added. This is why scrolling always "lags behind" by one item.
+React में, [state अपडेट्स कतारबद्ध होते हैं.](/learn/queueing-a-series-of-state-updates) सामान्यतः, यही वह चीज़ है जो आप चाहते हैं। हालांकि, यहां यह एक समस्या पैदा करता है क्योंकि `setTodos` तुरंत DOM को अपडेट नहीं करता। इसलिए, जब आप लिस्ट को उसके आखिरी एलिमेंट तक स्क्रॉल करते हैं, तब तक टूडू अभी तक जोड़ा नहीं गया होता है। यही कारण है कि स्क्रॉल हमेशा एक आइटम "पीछे" होता है।
 
-To fix this issue, you can force React to update ("flush") the DOM synchronously. To do this, import `flushSync` from `react-dom` and **wrap the state update** into a `flushSync` call:
+इस समस्या को ठीक करने के लिए, आप React को DOM को सिंक्रोनसली अपडेट करने के लिए मजबूर कर सकते हैं ("flush" कर सकते हैं)। ऐसा करने के लिए, `react-dom` से `flushSync` को इम्पोर्ट करें और **state अपडेट को** `flushSync` कॉल में लपेटें:
 
 ```js
 flushSync(() => {
@@ -528,7 +530,7 @@ flushSync(() => {
 listRef.current.lastChild.scrollIntoView();
 ```
 
-This will instruct React to update the DOM synchronously right after the code wrapped in `flushSync` executes. As a result, the last todo will already be in the DOM by the time you try to scroll to it:
+यह React को निर्देश देगा कि वह `flushSync` में लिपटे कोड के निष्पादन के तुरंत बाद DOM को सिंक्रोनसली अपडेट करे। इसके परिणामस्वरूप, आखिरी टूडू DOM में पहले ही मौजूद होगा जब आप उसे स्क्रॉल करने की कोशिश करेंगे:
 
 <Sandpack>
 
@@ -587,15 +589,15 @@ for (let i = 0; i < 20; i++) {
 
 </DeepDive>
 
-## Best practices for DOM manipulation with refs {/*best-practices-for-dom-manipulation-with-refs*/}
+## DOM मैनिपुलेशन के लिए सर्वोत्तम प्रथाएँ {/*best-practices-for-dom-manipulation-with-refs*/}
 
-Refs are an escape hatch. You should only use them when you have to "step outside React". Common examples of this include managing focus, scroll position, or calling browser APIs that React does not expose.
+Refs एक "escape hatch" हैं। आपको इन्हें केवल तब उपयोग करना चाहिए जब आपको "React से बाहर कदम रखना हो"। इसके सामान्य उदाहरणों में फोकस, स्क्रॉल पोजीशन को मैनेज करना, या उन ब्राउज़र APIs को कॉल करना शामिल है जिन्हें React एक्सपोज़ नहीं करता।
 
-If you stick to non-destructive actions like focusing and scrolling, you shouldn't encounter any problems. However, if you try to **modify** the DOM manually, you can risk conflicting with the changes React is making.
+अगर आप नष्ट न करने वाली क्रियाएँ जैसे कि फोकस करना और स्क्रॉल करना करते हैं, तो आपको कोई समस्या नहीं होनी चाहिए। हालांकि, अगर आप **DOM को मैन्युअली संशोधित** करने की कोशिश करते हैं, तो आप React द्वारा किए जा रहे परिवर्तनों से टकरा सकते हैं।
 
-To illustrate this problem, this example includes a welcome message and two buttons. The first button toggles its presence using [conditional rendering](/learn/conditional-rendering) and [state](/learn/state-a-components-memory), as you would usually do in React. The second button uses the [`remove()` DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) to forcefully remove it from the DOM outside of React's control.
+इस समस्या को स्पष्ट करने के लिए, इस उदाहरण में एक स्वागत संदेश और दो बटन हैं। पहला बटन अपनी उपस्थिति को [conditional rendering](/learn/conditional-rendering) और [state](/learn/state-a-components-memory) का उपयोग करके टॉगल करता है, जैसा कि आप सामान्य रूप से React में करते हैं। दूसरा बटन [`remove()` DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) का उपयोग करके इसे React के नियंत्रण से बाहर मजबूरी से हटा देता है।
 
-Try pressing "Toggle with setState" a few times. The message should disappear and appear again. Then press "Remove from the DOM". This will forcefully remove it. Finally, press "Toggle with setState":
+"Toggle with setState" को कुछ बार दबाने का प्रयास करें। संदेश को गायब और फिर से दिखाई देना चाहिए। फिर "Remove from the DOM" दबाएँ। यह इसे मजबूरी से हटा देगा। अंत में, "Toggle with setState" दबाएँ:
 
 <Sandpack>
 
@@ -636,20 +638,20 @@ button {
 
 </Sandpack>
 
-After you've manually removed the DOM element, trying to use `setState` to show it again will lead to a crash. This is because you've changed the DOM, and React doesn't know how to continue managing it correctly.
+एक बार जब आपने मैन्युअली DOM तत्व को हटा दिया, तो `setState` का उपयोग करके उसे फिर से दिखाने की कोशिश करने से क्रैश हो जाएगा। इसका कारण यह है कि आपने DOM को बदल दिया है, और React को यह नहीं पता होता कि इसे सही तरीके से कैसे प्रबंधित किया जाए।
 
-**Avoid changing DOM nodes managed by React.** Modifying, adding children to, or removing children from elements that are managed by React can lead to inconsistent visual results or crashes like above.
+**React द्वारा प्रबंधित DOM नोड्स को बदलने से बचें।** ऐसे तत्वों से बच्चों को संशोधित करना, जोड़ना, या हटाना जो React द्वारा प्रबंधित हैं, असंगत दृश्य परिणामों या ऊपर दिए गए जैसे क्रैश का कारण बन सकता है।
 
-However, this doesn't mean that you can't do it at all. It requires caution. **You can safely modify parts of the DOM that React has _no reason_ to update.** For example, if some `<div>` is always empty in the JSX, React won't have a reason to touch its children list. Therefore, it is safe to manually add or remove elements there.
+हालाँकि, इसका मतलब यह नहीं है कि आप इसे बिलकुल भी नहीं कर सकते। यह सतर्कता की आवश्यकता होती है। **आप उन DOM भागों को सुरक्षित रूप से संशोधित कर सकते हैं जिन्हें React को अपडेट करने का कोई कारण नहीं होता।** उदाहरण के लिए, यदि कोई `<div>` JSX में हमेशा खाली है, तो React को इसके बच्चों की सूची को छेड़ने का कोई कारण नहीं होगा। इसलिए, वहां तत्वों को मैन्युअली जोड़ना या हटाना सुरक्षित है।
 
 <Recap>
 
-- Refs are a generic concept, but most often you'll use them to hold DOM elements.
-- You instruct React to put a DOM node into `myRef.current` by passing `<div ref={myRef}>`.
-- Usually, you will use refs for non-destructive actions like focusing, scrolling, or measuring DOM elements.
-- A component doesn't expose its DOM nodes by default. You can opt into exposing a DOM node by using `forwardRef` and passing the second `ref` argument down to a specific node.
-- Avoid changing DOM nodes managed by React.
-- If you do modify DOM nodes managed by React, modify parts that React has no reason to update.
+- रिफ़्स एक सामान्य अवधारणा हैं, लेकिन सामान्यत: आप इन्हें DOM तत्वों को रखने के लिए उपयोग करेंगे।
+- आप React को `myRef.current` में एक DOM नोड डालने के लिए `<div ref={myRef}>` का उपयोग करके निर्देशित करते हैं।
+- सामान्यत: आप रिफ़्स का उपयोग गैर-हानिकारक क्रियाओं के लिए करेंगे जैसे कि फोकस करना, स्क्रॉल करना, या DOM तत्वों का मापना।
+- एक कौम्पोनॅन्ट डिफ़ॉल्ट रूप से अपने DOM नोड्स को एक्सपोज़ नहीं करता। आप `forwardRef` का उपयोग करके और दूसरे `ref` तर्क को एक विशिष्ट नोड तक भेजकर DOM नोड को एक्सपोज़ करने का विकल्प चुन सकते हैं।
+- React द्वारा प्रबंधित DOM नोड्स को बदलने से बचें।
+- यदि आप React द्वारा प्रबंधित DOM नोड्स को बदलते हैं, तो केवल उन हिस्सों को बदलें जिन्हें React अपडेट करने का कोई कारण नहीं है।
 
 </Recap>
 
@@ -657,9 +659,9 @@ However, this doesn't mean that you can't do it at all. It requires caution. **Y
 
 <Challenges>
 
-#### Play and pause the video {/*play-and-pause-the-video*/}
+#### वीडियो को प्ले और पॉज करें {/*play-and-pause-the-video*/}
 
-In this example, the button toggles a state variable to switch between a playing and a paused state. However, in order to actually play or pause the video, toggling state is not enough. You also need to call [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) and [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) on the DOM element for the `<video>`. Add a ref to it, and make the button work.
+इस उदाहरण में, बटन एक राज्य वेरिएबल को टॉगल करता है ताकि यह प्ले और पॉज्ड स्थिति के बीच स्विच कर सके। हालांकि, वीडियो को वास्तव में प्ले या पॉज करने के लिए, केवल राज्य को टॉगल करना पर्याप्त नहीं है। आपको `<video>` के DOM तत्व पर [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) और [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) को भी कॉल करना होगा। इसके लिए इसे एक ref जोड़ें, और बटन को काम करने योग्य बनाएं।
 
 <Sandpack>
 
@@ -696,11 +698,11 @@ button { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-For an extra challenge, keep the "Play" button in sync with whether the video is playing even if the user right-clicks the video and plays it using the built-in browser media controls. You might want to listen to `onPlay` and `onPause` on the video to do that.
+एक अतिरिक्त चुनौती के लिए, "Play" बटन को वीडियो के प्ले होने की स्थिति के साथ सिंक में रखें, भले ही उपयोगकर्ता वीडियो पर राइट-क्लिक करके और ब्राउज़र के बिल्ट-इन मीडिया कंट्रोल का उपयोग करके वीडियो को प्ले करें। ऐसा करने के लिए, आप वीडियो पर `onPlay` और `onPause` इवेंट्स को सुनना चाहेंगे।
 
 <Solution>
 
-Declare a ref and put it on the `<video>` element. Then call `ref.current.play()` and `ref.current.pause()` in the event handler depending on the next state.
+एक ref डिक्लेअर करें और इसे `<video>` तत्व पर लगाएं। फिर इवेंट हैंडलर में अगले राज्य के आधार पर `ref.current.play()` और `ref.current.pause()` को कॉल करें।
 
 <Sandpack>
 
@@ -749,13 +751,13 @@ button { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-In order to handle the built-in browser controls, you can add `onPlay` and `onPause` handlers to the `<video>` element and call `setIsPlaying` from them. This way, if the user plays the video using the browser controls, the state will adjust accordingly.
+ब्राउज़र के बिल्ट-इन कंट्रोल्स को हैंडल करने के लिए, आप `<video>` तत्व पर `onPlay` और `onPause` हैंडलर्स जोड़ सकते हैं और इनसे `setIsPlaying` को कॉल कर सकते हैं। इस तरह, अगर उपयोगकर्ता ब्राउज़र कंट्रोल्स का उपयोग करके वीडियो प्ले करता है, तो राज्य (state) इसके अनुसार समायोजित हो जाएगा।
 
 </Solution>
 
-#### Focus the search field {/*focus-the-search-field*/}
+#### खोज फ़ील्ड को फ़ोकस करें {/*focus-the-search-field*/}
 
-Make it so that clicking the "Search" button puts focus into the field.
+इस तरह से बनाएं कि "Search" बटन पर क्लिक करने से फ़ोकस फ़ील्ड में चला जाए।
 
 <Sandpack>
 
@@ -782,7 +784,7 @@ button { display: block; margin-bottom: 10px; }
 
 <Solution>
 
-Add a ref to the input, and call `focus()` on the DOM node to focus it:
+इनपुट में एक रेफ जोड़ें, और DOM नोड पर `focus()` कॉल करें ताकि उसे फ़ोकस किया जा सके:
 
 <Sandpack>
 
@@ -817,9 +819,9 @@ button { display: block; margin-bottom: 10px; }
 
 </Solution>
 
-#### Scrolling an image carousel {/*scrolling-an-image-carousel*/}
+#### इमेज कैरोसेल को स्क्रॉल करना {/*scrolling-an-image-carousel*/}
 
-This image carousel has a "Next" button that switches the active image. Make the gallery scroll horizontally to the active image on click. You will want to call [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) on the DOM node of the active image:
+इस इमेज कैरोसेल में एक "Next" बटन है जो सक्रिय इमेज को स्विच करता है। जब बटन पर क्लिक किया जाए, तो गैलरी को सक्रिय इमेज की ओर क्षैतिज रूप से स्क्रॉल करें। आपको सक्रिय इमेज के DOM नोड पर [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) कॉल करना होगा:
 
 ```js
 node.scrollIntoView({
@@ -831,7 +833,7 @@ node.scrollIntoView({
 
 <Hint>
 
-You don't need to have a ref to every image for this exercise. It should be enough to have a ref to the currently active image, or to the list itself. Use `flushSync` to ensure the DOM is updated *before* you scroll.
+इस अभ्यास के लिए आपको हर इमेज के लिए एक `ref` रखने की जरूरत नहीं है। सक्रिय इमेज या पूरी लिस्ट के लिए एक `ref` होना पर्याप्त होगा। DOM को स्क्रॉल करने से पहले अपडेट करने के लिए `flushSync` का उपयोग करें।
 
 </Hint>
 
@@ -926,16 +928,15 @@ img {
 
 <Solution>
 
-You can declare a `selectedRef`, and then pass it conditionally only to the current image:
+आप एक `selectedRef` डिक्लेअर कर सकते हैं, और फिर इसे केवल वर्तमान इमेज पर शर्तों के आधार पर पास कर सकते हैं:
 
 ```js
 <li ref={index === i ? selectedRef : null}>
 ```
 
-When `index === i`, meaning that the image is the selected one, the `<li>` will receive the `selectedRef`. React will make sure that `selectedRef.current` always points at the correct DOM node.
-
-Note that the `flushSync` call is necessary to force React to update the DOM before the scroll. Otherwise, `selectedRef.current` would always point at the previously selected item.
+जब `index === i` होता है, यानी इमेज चयनित होती है, तो `<li>` को `selectedRef` प्राप्त होगा। React यह सुनिश्चित करेगा कि `selectedRef.current` हमेशा सही DOM नोड की ओर इशारा करेगा।
 
+ध्यान दें कि `flushSync` कॉल आवश्यक है ताकि React DOM को स्क्रॉल से पहले अपडेट करने के लिए मजबूर कर सके। अन्यथा, `selectedRef.current` हमेशा पिछले चयनित आइटम की ओर इशारा करेगा।
 <Sandpack>
 
 ```js
@@ -1043,13 +1044,13 @@ img {
 
 </Solution>
 
-#### Focus the search field with separate components {/*focus-the-search-field-with-separate-components*/}
+#### अलग-अलग घटकों के साथ सर्च फील्ड पर फोकस करें {/*focus-the-search-field-with-separate-components*/}
 
-Make it so that clicking the "Search" button puts focus into the field. Note that each component is defined in a separate file and shouldn't be moved out of it. How do you connect them together?
+ऐसा बनाएं कि "Search" बटन पर क्लिक करने से फोकस फ़ील्ड पर आ जाए। ध्यान दें कि प्रत्येक घटक अलग-अलग फ़ाइल में परिभाषित है और इन्हें अपनी फ़ाइल से बाहर नहीं ले जाया जाना चाहिए। आप इन्हें एक साथ कैसे जोड़ेंगे?
 
 <Hint>
 
-You'll need `forwardRef` to opt into exposing a DOM node from your own component like `SearchInput`.
+आपको `forwardRef` की आवश्यकता होगी ताकि आप अपने घटक जैसे `SearchInput` से एक DOM नोड को बाहर एक्सपोज़ कर सकें।
 
 </Hint>
 
@@ -1099,7 +1100,7 @@ button { display: block; margin-bottom: 10px; }
 
 <Solution>
 
-You'll need to add an `onClick` prop to the `SearchButton`, and make the `SearchButton` pass it down to the browser `<button>`. You'll also pass a ref down to `<SearchInput>`, which will forward it to the real `<input>` and populate it. Finally, in the click handler, you'll call `focus` on the DOM node stored inside that ref.
+आपको `SearchButton` में एक `onClick` प्रॉप जोड़ने की आवश्यकता होगी, और `SearchButton` को इसे ब्राउज़र `<button>` पर पास करना होगा। आप एक ref को `<SearchInput>` में भी पास करेंगे, जो इसे असली `<input>` तक अग्रेषित करेगा और उसे आबाद करेगा। अंत में, क्लिक हैंडलर में, आप उस ref के अंदर संग्रहीत DOM नोड पर `focus` कॉल करेंगे।
 
 <Sandpack>