forwardref 90% done

Author: nafistiham

src/content/reference/react/forwardRef.md

@@ -94,7 +94,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 });
 ```
 
-You will receive a <CodeStep step={1}>ref</CodeStep> as the second argument after props. Pass it to the DOM node that you want to expose:
+আপনি props এর পর দ্বিতীয় আর্গুমেন্ট হিসেবে একটি <CodeStep step={1}>ref</CodeStep> রিসিভ করবেন। আপনি যেই DOM নোড এক্সপোজ করতে চান সেখানে এটি পাস করে দিনঃ
 
 ```js {8} [[1, 3, "ref"], [1, 8, "ref", 30]]
 import { forwardRef } from 'react';
@@ -110,7 +110,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 });
 ```
 
-This lets the parent `Form` component access the <CodeStep step={2}>`<input>` DOM node</CodeStep> exposed by `MyInput`:
+এইটা প্যারেন্ট `Form` কম্পোনেন্টকে `MyInput` এর কারণে এক্সপোজ হওয়া <CodeStep step={2}>`<input>` DOM নোড</CodeStep> এক্সেসের সুযোগ দেয়।  
 
 ```js [[1, 2, "ref"], [1, 10, "ref", 41], [2, 5, "ref.current"]]
 function Form() {
@@ -131,15 +131,15 @@ function Form() {
 }
 ```
 
-This `Form` component [passes a ref](/reference/react/useRef#manipulating-the-dom-with-a-ref) to `MyInput`. The `MyInput` component *forwards* that ref to the `<input>` browser tag. As a result, the `Form` component can access that `<input>` DOM node and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it.
+এই `Form` কম্পোনেন্টটি `MyInput` এ [একটি ref পাস করে।](/reference/react/useRef#manipulating-the-dom-with-a-ref) `MyInput` কম্পোনেন্ট এই ref কে `<input>` ব্রাউজার ট্যাগে  *ফরোয়ার্ড* করে দেয়। ফলে, `Form` কম্পোনেন্ট ঐ `<input>` DOM নোডে এক্সেস করতে পারে এবং এতে [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) কল দিতে পারে।
 
-Keep in mind that exposing a ref to the DOM node inside your component makes it harder to change your component's internals later. You will typically expose DOM nodes from reusable low-level components like buttons or text inputs, but you won't do it for application-level components like an avatar or a comment.
+মনে রাখবেন যে, আপনার কম্পোনেন্টের মধ্যে একটি ref এক্সপোজ করার ফোলে আপনার কম্পোনেন্টের ভেতরকার তথ্য পরিবর্তন করা কঠিন হয়ে পড়ে। আপনি বাটন বা টেক্সট ইনপুটের মত পুনরায় ব্যবহারযোগ্য লো-লেভেল কম্পোনেন্ট থেকেই সাধরণত DOM nodes এক্সপোজ করবেন, কিন্তু আপনি এপ্লিকেশন-লেভেল কম্পোনেন্ট যেমন avatar বা কমেন্ট এর জন্য এটি করবেন না।
 
-<Recipes titleText="Examples of forwarding a ref">
+<Recipes titleText="ref ফরোওয়ার্ডের উদাহরণ">
 
-#### Focusing a text input {/*focusing-a-text-input*/}
+#### একটি টেক্সট ইনপুটে ফোকাস করা {/*focusing-a-text-input*/}
 
-Clicking the button will focus the input. The `Form` component defines a ref and passes it to the `MyInput` component. The `MyInput` component forwards that ref to the browser `<input>`. This lets the `Form` component focus the `<input>`.
+বাটনে ক্লিক করা হলে ইনপুট ফোকাস হবে। `Form` কম্পোনেন্ট একটি ref ডিফাইন করে এবং `MyInput` কম্পোনেন্টে পাস করে দেয়। `MyInput` কম্পোনেন্ট সেই ref টি ব্রাউজার `<input>` এ ফরোয়ার্ড করে দেয়। এর কারণে `Form` কম্পোনেন্ট `<input>` এ ফোকাস করতে পারে।
 
 <Sandpack>
 
@@ -191,9 +191,9 @@ input {
 
 <Solution />
 
-#### Playing and pausing a video {/*playing-and-pausing-a-video*/}
+#### একটি ভিডিও চালানো এবং থামানো {/*playing-and-pausing-a-video*/}
 
-Clicking the button will 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 a `<video>` DOM node. The `App` component defines a ref and passes it to the `MyVideoPlayer` component. The `MyVideoPlayer` component forwards that ref to the browser `<video>` node. This lets the `App` component play and pause the `<video>`.
+বাটনে ক্লিক করা হলে `<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) কল হবে। `App` কম্পোনেন্ট একটি ref ডিফাইন করে এবং `MyVideoPlayer` কম্পোনেন্টে পাস করে দেয়। The `MyVideoPlayer` কম্পোনেন্ট সেই ref টি ব্রাউজার `<video>` নোডে ফরোয়ার্ড করে দেয়। এটি `App` কম্পোনেন্টকে `<video>` চালানো এবং থামানোর সুযোগ দেয়।
 
 <Sandpack>
 
@@ -252,9 +252,9 @@ button { margin-bottom: 10px; margin-right: 10px; }
 
 ---
 
-### Forwarding a ref through multiple components {/*forwarding-a-ref-through-multiple-components*/}
+### একাধিক কম্পোনেন্টের মধ্য দিয়ে ref ফরোয়ার্ড {/*forwarding-a-ref-through-multiple-components*/}
 
-Instead of forwarding a `ref` to a DOM node, you can forward it to your own component like `MyInput`:
+DOM নোডে `ref` ফরোয়ার্ড করার বদলে, আপনি এটি আপনার নিজের কম্পোনেন্ট যেমন `MyInput` এ ফরোয়ার্ড করতে পারেনঃ
 
 ```js {1,5}
 const FormField = forwardRef(function FormField(props, ref) {
@@ -268,7 +268,7 @@ const FormField = forwardRef(function FormField(props, ref) {
 });
 ```
 
-If that `MyInput` component forwards a ref to its `<input>`, a ref to `FormField` will give you that `<input>`:
+যদি `MyInput` কম্পোনেন্ট তার `<input>` এ একটি ref ফরোয়ার্ড করে, `FormField` এর ref আপনাকে সেই `<input>` দিবেঃ
 
 ```js {2,5,10}
 function Form() {
@@ -289,7 +289,7 @@ function Form() {
 }
 ```
 
-The `Form` component defines a ref and passes it to `FormField`. The `FormField` component forwards that ref to `MyInput`, which forwards it to a browser `<input>` DOM node. This is how `Form` accesses that DOM node.
+`Form` কম্পোনেন্ট একটি ref ডিফাইন করে এবং `FormField` কম্পোনেন্টে পাস করে দেয়। `FormField` কম্পোনেন্ট সেই ref টি `MyInput` এ ফরোয়ার্ড করে, যা একে ব্রাউজার DOM নোড `<input>` এ ফরোয়ার্ড করে। এই ভাবে `Form` ঐ DOM নোড এক্সেস করে।
 
 
 <Sandpack>
@@ -367,9 +367,9 @@ input, button {
 
 ---
 
-### Exposing an imperative handle instead of a DOM node {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
+### DOM নোডের বদলে একটি imperative handle এক্সপোজ করা {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
 
-Instead of exposing an entire DOM node, you can expose a custom object, called an *imperative handle,* with a more constrained set of methods. To do this, you'd need to define a separate ref to hold the DOM node:
+সম্পূর্ণ DOM নোড এক্সপোজ করবার বদলে, আপনি একটি কাস্টম অবজেক্ট এক্সপোজ করতে পারেন, যাকে *imperative handle* বলা হয়, যার সীমিত কিছু মেথড আছে। এটা করার জন্য, DOM নোড ধরে রাখতে আপনাকে একটি আলাদা ref ডিফাইন করতে হবেঃ
 
 ```js {2,6}
 const MyInput = forwardRef(function MyInput(props, ref) {
@@ -381,7 +381,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 });
 ```
 
-Pass the `ref` you received to [`useImperativeHandle`](/reference/react/useImperativeHandle) and specify the value you want to expose to the `ref`:
+আপনার রিসিভ করা `ref`, [`useImperativeHandle`](/reference/react/useImperativeHandle) এ পাস করে করে দিন এবং আপনি যেই ভ্যালু `ref` এ এক্সপোজ করতে চান সেটা নির্দেশ করে দিনঃ
 
 ```js {6-15}
 import { forwardRef, useRef, useImperativeHandle } from 'react';
@@ -404,7 +404,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 });
 ```
 
-If some component gets a ref to `MyInput`, it will only receive your `{ focus, scrollIntoView }` object instead of the DOM node. This lets you limit the information you expose about your DOM node to the minimum.
+যদি কোন কম্পোনেন্ট `MyInput` এর ref পায়, এটা DOM নোডের বদলে কেবল আপনার `{ focus, scrollIntoView }` অবজেক্ট রিসিভ করবে। এভাবে আপনি আপনার DOM নোডের তথ্যের সর্বনিম্ন পরিমাণ এক্সপোজ হবে।
 
 <Sandpack>
 
@@ -463,11 +463,11 @@ input {
 
 </Sandpack>
 
-[Read more about using imperative handles.](/reference/react/useImperativeHandle)
+[Imperative handles সম্বন্ধে আরো পড়ুন।](/reference/react/useImperativeHandle)
 
 <Pitfall>
 
-**Do not overuse refs.** You should only use refs for *imperative* behaviors that you can't express as props: for example, scrolling to a node, focusing a node, triggering an animation, selecting text, and so on.
+**Ref অতিরিক্ত ব্যবহার করবেন না।** শুধুমাত্র *imperative* আচরণ যা আপনি prop দিয়ে দেখাতে পারবেন না সেগুলোর ক্ষেত্রেই ref ব্যবহার করবেনঃ যেমন, নোড স্ক্রোল করা, নোড ফোকাস করা, এনিমশন ট্রিগার করা, টেক্সট সিলেক্ট করা, ইত্যাদি।
 
 **If you can express something as a prop, you should not use a ref.** For example, instead of exposing an imperative handle like `{ open, close }` from a `Modal` component, it is better to take `isOpen` as a prop like `<Modal isOpen={isOpen} />`. [Effects](/learn/synchronizing-with-effects) can help you expose imperative behaviors via props.