diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md
index 9a848862a..7af27e70b 100644
--- a/src/content/learn/removing-effect-dependencies.md
+++ b/src/content/learn/removing-effect-dependencies.md
@@ -1,26 +1,26 @@
---
-title: 'Removing Effect Dependencies'
+title: 'Effect Dependency সরানো'
---
-When you write an Effect, the linter will verify that you've included every reactive value (like props and state) that the Effect reads in the list of your Effect's dependencies. This ensures that your Effect remains synchronized with the latest props and state of your component. Unnecessary dependencies may cause your Effect to run too often, or even create an infinite loop. Follow this guide to review and remove unnecessary dependencies from your Effects.
+যখন আপনি একটি Effect লিখেন, linter যাচাই করবে যে আপনি প্রতিটি reactive value (যেমন props এবং state) যা Effect পড়ে তা আপনার Effect এর dependency এর তালিকায় অন্তর্ভুক্ত করেছেন। এটি নিশ্চিত করে যে আপনার Effect আপনার কম্পোনেন্টের সর্বশেষ props এবং state এর সাথে সিঙ্ক্রোনাইজড থাকে। অপ্রয়োজনীয় dependency আপনার Effect কে খুব ঘন ঘন চালু করতে পারে, এমনকি একটি infinite loop তৈরি করতে পারে। আপনার Effect থেকে অপ্রয়োজনীয় dependency পর্যালোচনা এবং সরাতে এই গাইড অনুসরণ করুন।
-- How to fix infinite Effect dependency loops
-- What to do when you want to remove a dependency
-- How to read a value from your Effect without "reacting" to it
-- How and why to avoid object and function dependencies
-- Why suppressing the dependency linter is dangerous, and what to do instead
+- কিভাবে infinite Effect dependency loop ঠিক করবেন
+- যখন আপনি একটি dependency সরাতে চান তখন কি করতে হবে
+- কিভাবে আপনার Effect থেকে একটি মান পড়বেন এটির প্রতি "react" না করে
+- কিভাবে এবং কেন object এবং function dependency এড়াতে হবে
+- কেন dependency linter suppress করা বিপজ্জনক, এবং পরিবর্তে কি করতে হবে
-## Dependencies should match the code {/*dependencies-should-match-the-code*/}
+## Dependency কোডের সাথে মিলতে হবে {/*dependencies-should-match-the-code*/}
-When you write an Effect, you first specify how to [start and stop](/learn/lifecycle-of-reactive-effects#the-lifecycle-of-an-effect) whatever you want your Effect to be doing:
+যখন আপনি একটি Effect লিখেন, আপনি প্রথমে নির্দিষ্ট করেন কিভাবে [start এবং stop](/learn/lifecycle-of-reactive-effects#the-lifecycle-of-an-effect) করতে হবে যা আপনি আপনার Effect দিয়ে করতে চান:
```js {5-7}
const serverUrl = 'https://localhost:1234';
@@ -34,7 +34,7 @@ function ChatRoom({ roomId }) {
}
```
-Then, if you leave the Effect dependencies empty (`[]`), the linter will suggest the correct dependencies:
+তারপর, যদি আপনি Effect dependency খালি (`[]`) রাখেন, linter সঠিক dependency সুপারিশ করবে:
@@ -96,7 +96,7 @@ button { margin-left: 10px; }
-Fill them in according to what the linter says:
+linter যা বলে সেই অনুযায়ী সেগুলি পূরণ করুন:
```js {6}
function ChatRoom({ roomId }) {
@@ -104,12 +104,13 @@ function ChatRoom({ roomId }) {
const connection = createConnection(serverUrl, roomId);
connection.connect();
return () => connection.disconnect();
- }, [roomId]); // ✅ All dependencies declared
+ }, [roomId]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
}
```
-[Effects "react" to reactive values.](/learn/lifecycle-of-reactive-effects#effects-react-to-reactive-values) Since `roomId` is a reactive value (it can change due to a re-render), the linter verifies that you've specified it as a dependency. If `roomId` receives a different value, React will re-synchronize your Effect. This ensures that the chat stays connected to the selected room and "reacts" to the dropdown:
+[Effect "react" করে reactive value এর প্রতি।](/learn/lifecycle-of-reactive-effects#effects-react-to-reactive-values) যেহেতু `roomId` একটি reactive value (এটি একটি re-render এর কারণে পরিবর্তিত হতে পারে), linter যাচাই করে যে আপনি এটি একটি dependency হিসাবে নির্দিষ্ট করেছেন। যদি `roomId` একটি ভিন্ন মান পায়, React আপনার Effect পুনরায় সিঙ্ক্রোনাইজ করবে। এটি নিশ্চিত করে যে chat নির্বাচিত room এর সাথে সংযুক্ত থাকে এবং dropdown এর প্রতি "react" করে:
+
@@ -171,24 +172,24 @@ button { margin-left: 10px; }
-### To remove a dependency, prove that it's not a dependency {/*to-remove-a-dependency-prove-that-its-not-a-dependency*/}
+### একটি dependency সরাতে, প্রমাণ করুন যে এটি একটি dependency নয় {/*to-remove-a-dependency-prove-that-its-not-a-dependency*/}
-Notice that you can't "choose" the dependencies of your Effect. Every reactive value used by your Effect's code must be declared in your dependency list. The dependency list is determined by the surrounding code:
+লক্ষ্য করুন যে আপনি আপনার Effect এর dependency "বেছে নিতে" পারবেন না। আপনার Effect এর কোড দ্বারা ব্যবহৃত প্রতিটি reactive value অবশ্যই আপনার dependency তালিকায় ডিক্লেয়ার করতে হবে। dependency তালিকা আশেপাশের কোড দ্বারা নির্ধারিত হয়:
```js [[2, 3, "roomId"], [2, 5, "roomId"], [2, 8, "roomId"]]
const serverUrl = 'https://localhost:1234';
-function ChatRoom({ roomId }) { // This is a reactive value
+function ChatRoom({ roomId }) { // এটি একটি reactive value
useEffect(() => {
- const connection = createConnection(serverUrl, roomId); // This Effect reads that reactive value
+ const connection = createConnection(serverUrl, roomId); // এই Effect সেই reactive value পড়ে
connection.connect();
return () => connection.disconnect();
- }, [roomId]); // ✅ So you must specify that reactive value as a dependency of your Effect
+ }, [roomId]); // ✅ তাই আপনাকে অবশ্যই সেই reactive value টি আপনার Effect এর dependency হিসাবে নির্দিষ্ট করতে হবে
// ...
}
```
-[Reactive values](/learn/lifecycle-of-reactive-effects#all-variables-declared-in-the-component-body-are-reactive) include props and all variables and functions declared directly inside of your component. Since `roomId` is a reactive value, you can't remove it from the dependency list. The linter wouldn't allow it:
+[Reactive value](/learn/lifecycle-of-reactive-effects#all-variables-declared-in-the-component-body-are-reactive) এর মধ্যে রয়েছে props এবং সমস্ত variable এবং function যা সরাসরি আপনার কম্পোনেন্টের ভিতরে ডিক্লেয়ার করা হয়েছে। যেহেতু `roomId` একটি reactive value, আপনি এটি dependency তালিকা থেকে সরাতে পারবেন না। linter এটি অনুমতি দেবে না:
```js {8}
const serverUrl = 'https://localhost:1234';
@@ -203,25 +204,25 @@ function ChatRoom({ roomId }) {
}
```
-And the linter would be right! Since `roomId` may change over time, this would introduce a bug in your code.
+এবং linter সঠিক হবে! যেহেতু `roomId` সময়ের সাথে পরিবর্তিত হতে পারে, এটি আপনার কোডে একটি bug introduce করবে।
-**To remove a dependency, "prove" to the linter that it *doesn't need* to be a dependency.** For example, you can move `roomId` out of your component to prove that it's not reactive and won't change on re-renders:
+**একটি dependency সরাতে, linter কে "প্রমাণ" করুন যে এটি একটি dependency হওয়ার *প্রয়োজন নেই*।** উদাহরণস্বরূপ, আপনি `roomId` কে আপনার কম্পোনেন্টের বাইরে সরাতে পারেন এটি প্রমাণ করতে যে এটি reactive নয় এবং re-render এ পরিবর্তিত হবে না:
```js {2,9}
const serverUrl = 'https://localhost:1234';
-const roomId = 'music'; // Not a reactive value anymore
+const roomId = 'music'; // আর reactive value নয়
function ChatRoom() {
useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connection.connect();
return () => connection.disconnect();
- }, []); // ✅ All dependencies declared
+ }, []); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
}
```
-Now that `roomId` is not a reactive value (and can't change on a re-render), it doesn't need to be a dependency:
+এখন যেহেতু `roomId` একটি reactive value নয় (এবং re-render এ পরিবর্তিত হতে পারে না), এটি একটি dependency হওয়ার প্রয়োজন নেই:
@@ -263,43 +264,43 @@ button { margin-left: 10px; }
-This is why you could now specify an [empty (`[]`) dependency list.](/learn/lifecycle-of-reactive-effects#what-an-effect-with-empty-dependencies-means) Your Effect *really doesn't* depend on any reactive value anymore, so it *really doesn't* need to re-run when any of the component's props or state change.
+এই কারণেই আপনি এখন একটি [খালি (`[]`) dependency তালিকা](/learn/lifecycle-of-reactive-effects#what-an-effect-with-empty-dependencies-means) নির্দিষ্ট করতে পারেন। আপনার Effect *সত্যিই* আর কোনো reactive value এর উপর নির্ভর করে না, তাই এটি *সত্যিই* পুনরায় চালু হওয়ার প্রয়োজন নেই যখন কম্পোনেন্টের কোনো props বা state পরিবর্তিত হয়।
-### To change the dependencies, change the code {/*to-change-the-dependencies-change-the-code*/}
+### Dependency পরিবর্তন করতে, কোড পরিবর্তন করুন {/*to-change-the-dependencies-change-the-code*/}
-You might have noticed a pattern in your workflow:
+আপনি হয়তো আপনার workflow এ একটি pattern লক্ষ্য করেছেন:
-1. First, you **change the code** of your Effect or how your reactive values are declared.
-2. Then, you follow the linter and adjust the dependencies to **match the code you have changed.**
-3. If you're not happy with the list of dependencies, you **go back to the first step** (and change the code again).
+1. প্রথমে, আপনি আপনার Effect এর **কোড পরিবর্তন করেন** বা আপনার reactive value কিভাবে ডিক্লেয়ার করা হয়েছে তা পরিবর্তন করেন।
+2. তারপর, আপনি linter অনুসরণ করেন এবং **আপনার পরিবর্তিত কোডের সাথে মিলানোর জন্য** dependency সামঞ্জস্য করেন।
+3. যদি আপনি dependency এর তালিকায় সন্তুষ্ট না হন, আপনি **প্রথম ধাপে ফিরে যান** (এবং আবার কোড পরিবর্তন করেন)।
-The last part is important. **If you want to change the dependencies, change the surrounding code first.** You can think of the dependency list as [a list of all the reactive values used by your Effect's code.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) You don't *choose* what to put on that list. The list *describes* your code. To change the dependency list, change the code.
+শেষ অংশটি গুরুত্বপূর্ণ। **যদি আপনি dependency পরিবর্তন করতে চান, প্রথমে আশেপাশের কোড পরিবর্তন করুন।** আপনি dependency তালিকাকে [আপনার Effect এর কোড দ্বারা ব্যবহৃত সমস্ত reactive value এর একটি তালিকা](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) হিসাবে ভাবতে পারেন। আপনি সেই তালিকায় কি রাখবেন তা *বেছে নেন না*। তালিকাটি আপনার কোড *বর্ণনা* করে। dependency তালিকা পরিবর্তন করতে, কোড পরিবর্তন করুন।
-This might feel like solving an equation. You might start with a goal (for example, to remove a dependency), and you need to "find" the code matching that goal. Not everyone finds solving equations fun, and the same thing could be said about writing Effects! Luckily, there is a list of common recipes that you can try below.
+এটি একটি equation সমাধান করার মতো মনে হতে পারে। আপনি একটি লক্ষ্য নিয়ে শুরু করতে পারেন (উদাহরণস্বরূপ, একটি dependency সরাতে), এবং আপনাকে সেই লক্ষ্যের সাথে মিলে এমন কোড "খুঁজে বের করতে" হবে। সবাই equation সমাধান করা মজাদার মনে করে না, এবং Effect লেখার ক্ষেত্রেও একই কথা বলা যেতে পারে! সৌভাগ্যবশত, নিচে সাধারণ recipe এর একটি তালিকা রয়েছে যা আপনি চেষ্টা করতে পারেন।
-If you have an existing codebase, you might have some Effects that suppress the linter like this:
+যদি আপনার একটি বিদ্যমান codebase থাকে, আপনার কিছু Effect থাকতে পারে যা এইভাবে linter suppress করে:
```js {3-4}
useEffect(() => {
// ...
- // 🔴 Avoid suppressing the linter like this:
+ // 🔴 এইভাবে linter suppress করা এড়িয়ে চলুন:
// eslint-ignore-next-line react-hooks/exhaustive-deps
}, []);
```
-**When dependencies don't match the code, there is a very high risk of introducing bugs.** By suppressing the linter, you "lie" to React about the values your Effect depends on.
+**যখন dependency কোডের সাথে মিলে না, তখন bug introduce করার খুব বেশি ঝুঁকি থাকে।** linter suppress করে, আপনি React কে আপনার Effect যে value এর উপর নির্ভর করে সে সম্পর্কে "মিথ্যা বলেন"।
-Instead, use the techniques below.
+পরিবর্তে, নিচের কৌশলগুলি ব্যবহার করুন।
-#### Why is suppressing the dependency linter so dangerous? {/*why-is-suppressing-the-dependency-linter-so-dangerous*/}
+#### কেন dependency linter suppress করা এত বিপজ্জনক? {/*why-is-suppressing-the-dependency-linter-so-dangerous*/}
-Suppressing the linter leads to very unintuitive bugs that are hard to find and fix. Here's one example:
+linter suppress করা খুব unintuitive bug এর দিকে নিয়ে যায় যা খুঁজে পাওয়া এবং ঠিক করা কঠিন। এখানে একটি উদাহরণ:
@@ -348,31 +349,31 @@ button { margin: 10px; }
-Let's say that you wanted to run the Effect "only on mount". You've read that [empty (`[]`) dependencies](/learn/lifecycle-of-reactive-effects#what-an-effect-with-empty-dependencies-means) do that, so you've decided to ignore the linter, and forcefully specified `[]` as the dependencies.
+ধরা যাক আপনি Effect টি "শুধুমাত্র mount এ" চালাতে চেয়েছিলেন। আপনি পড়েছেন যে [খালি (`[]`) dependency](/learn/lifecycle-of-reactive-effects#what-an-effect-with-empty-dependencies-means) এটি করে, তাই আপনি linter উপেক্ষা করার সিদ্ধান্ত নিয়েছেন, এবং জোর করে `[]` dependency হিসাবে নির্দিষ্ট করেছেন।
-This counter was supposed to increment every second by the amount configurable with the two buttons. However, since you "lied" to React that this Effect doesn't depend on anything, React forever keeps using the `onTick` function from the initial render. [During that render,](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) `count` was `0` and `increment` was `1`. This is why `onTick` from that render always calls `setCount(0 + 1)` every second, and you always see `1`. Bugs like this are harder to fix when they're spread across multiple components.
+এই counter টি দুটি button দিয়ে configurable পরিমাণ দ্বারা প্রতি সেকেন্ডে বৃদ্ধি পাওয়ার কথা ছিল। তবে, যেহেতু আপনি React কে "মিথ্যা বলেছেন" যে এই Effect কিছুর উপর নির্ভর করে না, React চিরকাল initial render থেকে `onTick` function ব্যবহার করতে থাকে। [সেই render এর সময়,](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) `count` ছিল `0` এবং `increment` ছিল `1`। এই কারণেই সেই render থেকে `onTick` সর্বদা প্রতি সেকেন্ডে `setCount(0 + 1)` কল করে, এবং আপনি সর্বদা `1` দেখেন। এই ধরনের bug ঠিক করা আরও কঠিন যখন তারা একাধিক কম্পোনেন্ট জুড়ে ছড়িয়ে থাকে।
-There's always a better solution than ignoring the linter! To fix this code, you need to add `onTick` to the dependency list. (To ensure the interval is only setup once, [make `onTick` an Effect Event.](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events))
+linter উপেক্ষা করার চেয়ে সর্বদা একটি ভালো সমাধান আছে! এই কোড ঠিক করতে, আপনাকে dependency তালিকায় `onTick` যোগ করতে হবে। (interval শুধুমাত্র একবার setup হয় তা নিশ্চিত করতে, [`onTick` কে একটি Effect Event করুন।](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events))
-**We recommend treating the dependency lint error as a compilation error. If you don't suppress it, you will never see bugs like this.** The rest of this page documents the alternatives for this and other cases.
+**আমরা dependency lint error কে একটি compilation error হিসাবে বিবেচনা করার সুপারিশ করি। যদি আপনি এটি suppress না করেন, আপনি কখনও এই ধরনের bug দেখবেন না।** এই পৃষ্ঠার বাকি অংশ এই এবং অন্যান্য ক্ষেত্রে বিকল্পগুলি নথিভুক্ত করে।
-## Removing unnecessary dependencies {/*removing-unnecessary-dependencies*/}
+## অপ্রয়োজনীয় dependency সরানো {/*removing-unnecessary-dependencies*/}
-Every time you adjust the Effect's dependencies to reflect the code, look at the dependency list. Does it make sense for the Effect to re-run when any of these dependencies change? Sometimes, the answer is "no":
+প্রতিবার যখন আপনি কোড প্রতিফলিত করতে Effect এর dependency সামঞ্জস্য করেন, dependency তালিকার দিকে তাকান। এই dependency গুলির যেকোনো একটি পরিবর্তিত হলে Effect পুনরায় চালু হওয়া কি বোধগম্য? কখনও কখনও, উত্তর হল "না":
-* You might want to re-execute *different parts* of your Effect under different conditions.
-* You might want to only read the *latest value* of some dependency instead of "reacting" to its changes.
-* A dependency may change too often *unintentionally* because it's an object or a function.
+* আপনি বিভিন্ন শর্তে আপনার Effect এর *বিভিন্ন অংশ* পুনরায় execute করতে চাইতে পারেন।
+* আপনি কিছু dependency এর পরিবর্তনের প্রতি "react" করার পরিবর্তে শুধুমাত্র তার *সর্বশেষ মান* পড়তে চাইতে পারেন।
+* একটি dependency *অনিচ্ছাকৃতভাবে* খুব ঘন ঘন পরিবর্তিত হতে পারে কারণ এটি একটি object বা একটি function।
-To find the right solution, you'll need to answer a few questions about your Effect. Let's walk through them.
+সঠিক সমাধান খুঁজে পেতে, আপনাকে আপনার Effect সম্পর্কে কয়েকটি প্রশ্নের উত্তর দিতে হবে। আসুন তাদের মধ্য দিয়ে যাই।
-### Should this code move to an event handler? {/*should-this-code-move-to-an-event-handler*/}
+### এই কোড কি একটি event handler এ সরানো উচিত? {/*should-this-code-move-to-an-event-handler*/}
-The first thing you should think about is whether this code should be an Effect at all.
+আপনার প্রথম যে বিষয়টি চিন্তা করা উচিত তা হল এই কোডটি আদৌ একটি Effect হওয়া উচিত কিনা।
-Imagine a form. On submit, you set the `submitted` state variable to `true`. You need to send a POST request and show a notification. You've put this logic inside an Effect that "reacts" to `submitted` being `true`:
+একটি form কল্পনা করুন। submit এ, আপনি `submitted` state variable `true` তে set করেন। আপনাকে একটি POST request পাঠাতে হবে এবং একটি notification দেখাতে হবে। আপনি এই logic একটি Effect এর ভিতরে রেখেছেন যা `submitted` `true` হওয়ার প্রতি "react" করে:
```js {6-8}
function Form() {
@@ -380,7 +381,7 @@ function Form() {
useEffect(() => {
if (submitted) {
- // 🔴 Avoid: Event-specific logic inside an Effect
+ // 🔴 এড়িয়ে চলুন: Event-specific logic একটি Effect এর ভিতরে
post('/api/register');
showNotification('Successfully registered!');
}
@@ -394,7 +395,7 @@ function Form() {
}
```
-Later, you want to style the notification message according to the current theme, so you read the current theme. Since `theme` is declared in the component body, it is a reactive value, so you add it as a dependency:
+পরে, আপনি বর্তমান theme অনুযায়ী notification message style করতে চান, তাই আপনি বর্তমান theme পড়েন। যেহেতু `theme` component body তে ডিক্লেয়ার করা হয়েছে, এটি একটি reactive value, তাই আপনি এটি একটি dependency হিসাবে যোগ করেন:
```js {3,9,11}
function Form() {
@@ -403,11 +404,11 @@ function Form() {
useEffect(() => {
if (submitted) {
- // 🔴 Avoid: Event-specific logic inside an Effect
+ // 🔴 এড়িয়ে চলুন: Event-specific logic একটি Effect এর ভিতরে
post('/api/register');
showNotification('Successfully registered!', theme);
}
- }, [submitted, theme]); // ✅ All dependencies declared
+ }, [submitted, theme]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
function handleSubmit() {
setSubmitted(true);
@@ -417,16 +418,16 @@ function Form() {
}
```
-By doing this, you've introduced a bug. Imagine you submit the form first and then switch between Dark and Light themes. The `theme` will change, the Effect will re-run, and so it will display the same notification again!
+এটি করে, আপনি একটি bug introduce করেছেন। কল্পনা করুন আপনি প্রথমে form submit করেছেন এবং তারপর Dark এবং Light theme এর মধ্যে switch করেছেন। `theme` পরিবর্তিত হবে, Effect পুনরায় চালু হবে, এবং এটি আবার একই notification প্রদর্শন করবে!
-**The problem here is that this shouldn't be an Effect in the first place.** You want to send this POST request and show the notification in response to *submitting the form,* which is a particular interaction. To run some code in response to particular interaction, put that logic directly into the corresponding event handler:
+**এখানে সমস্যা হল এটি প্রথম স্থানে একটি Effect হওয়া উচিত নয়।** আপনি এই POST request পাঠাতে এবং notification দেখাতে চান *form submit করার* প্রতিক্রিয়ায়, যা একটি নির্দিষ্ট interaction। নির্দিষ্ট interaction এর প্রতিক্রিয়ায় কিছু কোড চালাতে, সেই logic সরাসরি সংশ্লিষ্ট event handler এ রাখুন:
```js {6-7}
function Form() {
const theme = useContext(ThemeContext);
function handleSubmit() {
- // ✅ Good: Event-specific logic is called from event handlers
+ // ✅ ভালো: Event-specific logic event handler থেকে কল করা হয়
post('/api/register');
showNotification('Successfully registered!', theme);
}
@@ -435,13 +436,13 @@ function Form() {
}
```
-Now that the code is in an event handler, it's not reactive--so it will only run when the user submits the form. Read more about [choosing between event handlers and Effects](/learn/separating-events-from-effects#reactive-values-and-reactive-logic) and [how to delete unnecessary Effects.](/learn/you-might-not-need-an-effect)
+এখন যেহেতু কোডটি একটি event handler এ আছে, এটি reactive নয়—তাই এটি শুধুমাত্র তখনই চালু হবে যখন ব্যবহারকারী form submit করবে। [event handler এবং Effect এর মধ্যে বেছে নেওয়া](/learn/separating-events-from-effects#reactive-values-and-reactive-logic) এবং [কিভাবে অপ্রয়োজনীয় Effect মুছে ফেলতে হয়](/learn/you-might-not-need-an-effect) সম্পর্কে আরও পড়ুন।
-### Is your Effect doing several unrelated things? {/*is-your-effect-doing-several-unrelated-things*/}
+### আপনার Effect কি বিভিন্ন সম্পর্কহীন কাজ করছে? {/*is-your-effect-doing-several-unrelated-things*/}
-The next question you should ask yourself is whether your Effect is doing several unrelated things.
+পরবর্তী প্রশ্ন যা আপনার নিজেকে জিজ্ঞাসা করা উচিত তা হল আপনার Effect বিভিন্ন সম্পর্কহীন কাজ করছে কিনা।
-Imagine you're creating a shipping form where the user needs to choose their city and area. You fetch the list of `cities` from the server according to the selected `country` to show them in a dropdown:
+কল্পনা করুন আপনি একটি shipping form তৈরি করছেন যেখানে ব্যবহারকারীকে তাদের city এবং area বেছে নিতে হবে। আপনি নির্বাচিত `country` অনুযায়ী server থেকে `cities` এর তালিকা fetch করেন একটি dropdown এ দেখানোর জন্য:
```js
function ShippingForm({ country }) {
@@ -460,14 +461,14 @@ function ShippingForm({ country }) {
return () => {
ignore = true;
};
- }, [country]); // ✅ All dependencies declared
+ }, [country]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
```
-This is a good example of [fetching data in an Effect.](/learn/you-might-not-need-an-effect#fetching-data) You are synchronizing the `cities` state with the network according to the `country` prop. You can't do this in an event handler because you need to fetch as soon as `ShippingForm` is displayed and whenever the `country` changes (no matter which interaction causes it).
+এটি [একটি Effect এ data fetching](/learn/you-might-not-need-an-effect#fetching-data) এর একটি ভালো উদাহরণ। আপনি `country` prop অনুযায়ী network এর সাথে `cities` state সিঙ্ক্রোনাইজ করছেন। আপনি এটি একটি event handler এ করতে পারবেন না কারণ আপনাকে fetch করতে হবে যখনই `ShippingForm` প্রদর্শিত হয় এবং যখনই `country` পরিবর্তিত হয় (কোন interaction এটি ঘটায় তা বিবেচনা না করে)।
-Now let's say you're adding a second select box for city areas, which should fetch the `areas` for the currently selected `city`. You might start by adding a second `fetch` call for the list of areas inside the same Effect:
+এখন ধরা যাক আপনি city area এর জন্য একটি দ্বিতীয় select box যোগ করছেন, যা বর্তমানে নির্বাচিত `city` এর জন্য `areas` fetch করবে। আপনি একই Effect এর ভিতরে area এর তালিকার জন্য একটি দ্বিতীয় `fetch` call যোগ করে শুরু করতে পারেন:
```js {15-24,28}
function ShippingForm({ country }) {
@@ -484,7 +485,7 @@ function ShippingForm({ country }) {
setCities(json);
}
});
- // 🔴 Avoid: A single Effect synchronizes two independent processes
+ // 🔴 এড়িয়ে চলুন: একটি একক Effect দুটি স্বতন্ত্র প্রক্রিয়া সিঙ্ক্রোনাইজ করে
if (city) {
fetch(`/api/areas?city=${city}`)
.then(response => response.json())
@@ -497,19 +498,20 @@ function ShippingForm({ country }) {
return () => {
ignore = true;
};
- }, [country, city]); // ✅ All dependencies declared
+ }, [country, city]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
```
-However, since the Effect now uses the `city` state variable, you've had to add `city` to the list of dependencies. That, in turn, introduced a problem: when the user selects a different city, the Effect will re-run and call `fetchCities(country)`. As a result, you will be unnecessarily refetching the list of cities many times.
+তবে, যেহেতু Effect এখন `city` state variable ব্যবহার করে, আপনাকে dependency এর তালিকায় `city` যোগ করতে হয়েছে। এটি, পরিবর্তে, একটি সমস্যা introduce করেছে: যখন ব্যবহারকারী একটি ভিন্ন city নির্বাচন করে, Effect পুনরায় চালু হবে এবং `fetchCities(country)` কল করবে। ফলস্বরূপ, আপনি অপ্রয়োজনীয়ভাবে city এর তালিকা অনেকবার refetch করবেন।
+
+**এই কোডের সমস্যা হল আপনি দুটি ভিন্ন সম্পর্কহীন জিনিস সিঙ্ক্রোনাইজ করছেন:**
-**The problem with this code is that you're synchronizing two different unrelated things:**
+1. আপনি `country` prop এর উপর ভিত্তি করে network এর সাথে `cities` state সিঙ্ক্রোনাইজ করতে চান।
+2. আপনি `city` state এর উপর ভিত্তি করে network এর সাথে `areas` state সিঙ্ক্রোনাইজ করতে চান।
-1. You want to synchronize the `cities` state to the network based on the `country` prop.
-1. You want to synchronize the `areas` state to the network based on the `city` state.
-Split the logic into two Effects, each of which reacts to the prop that it needs to synchronize with:
+logic টি দুটি Effect এ বিভক্ত করুন, যার প্রতিটি সেই prop এর প্রতি react করে যার সাথে এটি সিঙ্ক্রোনাইজ করতে হবে:
```js {19-33}
function ShippingForm({ country }) {
@@ -526,7 +528,7 @@ function ShippingForm({ country }) {
return () => {
ignore = true;
};
- }, [country]); // ✅ All dependencies declared
+ }, [country]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
const [city, setCity] = useState(null);
const [areas, setAreas] = useState(null);
@@ -544,18 +546,18 @@ function ShippingForm({ country }) {
ignore = true;
};
}
- }, [city]); // ✅ All dependencies declared
+ }, [city]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
```
-Now the first Effect only re-runs if the `country` changes, while the second Effect re-runs when the `city` changes. You've separated them by purpose: two different things are synchronized by two separate Effects. Two separate Effects have two separate dependency lists, so they won't trigger each other unintentionally.
+এখন প্রথম Effect শুধুমাত্র তখনই পুনরায় চালু হয় যখন `country` পরিবর্তিত হয়, যখন দ্বিতীয় Effect পুনরায় চালু হয় যখন `city` পরিবর্তিত হয়। আপনি তাদের উদ্দেশ্য অনুযায়ী আলাদা করেছেন: দুটি ভিন্ন জিনিস দুটি পৃথক Effect দ্বারা সিঙ্ক্রোনাইজ করা হয়। দুটি পৃথক Effect এর দুটি পৃথক dependency তালিকা আছে, তাই তারা অনিচ্ছাকৃতভাবে একে অপরকে trigger করবে না।
-The final code is longer than the original, but splitting these Effects is still correct. [Each Effect should represent an independent synchronization process.](/learn/lifecycle-of-reactive-effects#each-effect-represents-a-separate-synchronization-process) In this example, deleting one Effect doesn't break the other Effect's logic. This means they *synchronize different things,* and it's good to split them up. If you're concerned about duplication, you can improve this code by [extracting repetitive logic into a custom Hook.](/learn/reusing-logic-with-custom-hooks#when-to-use-custom-hooks)
+চূড়ান্ত কোডটি মূল কোডের চেয়ে দীর্ঘ, কিন্তু এই Effect গুলি বিভক্ত করা এখনও সঠিক। [প্রতিটি Effect একটি স্বতন্ত্র synchronization প্রক্রিয়া প্রতিনিধিত্ব করা উচিত।](/learn/lifecycle-of-reactive-effects#each-effect-represents-a-separate-synchronization-process) এই উদাহরণে, একটি Effect মুছে ফেললে অন্য Effect এর logic ভাঙে না। এর মানে তারা *বিভিন্ন জিনিস সিঙ্ক্রোনাইজ করে,* এবং তাদের আলাদা করা ভালো। যদি আপনি duplication নিয়ে চিন্তিত হন, আপনি [একটি custom Hook এ repetitive logic extract করে](/learn/reusing-logic-with-custom-hooks#when-to-use-custom-hooks) এই কোড উন্নত করতে পারেন।
-### Are you reading some state to calculate the next state? {/*are-you-reading-some-state-to-calculate-the-next-state*/}
+### আপনি কি পরবর্তী state গণনা করতে কিছু state পড়ছেন? {/*are-you-reading-some-state-to-calculate-the-next-state*/}
-This Effect updates the `messages` state variable with a newly created array every time a new message arrives:
+এই Effect প্রতিবার একটি নতুন message আসলে একটি নতুন তৈরি array দিয়ে `messages` state variable আপডেট করে:
```js {2,6-8}
function ChatRoom({ roomId }) {
@@ -569,7 +571,7 @@ function ChatRoom({ roomId }) {
// ...
```
-It uses the `messages` variable to [create a new array](/learn/updating-arrays-in-state) starting with all the existing messages and adds the new message at the end. However, since `messages` is a reactive value read by an Effect, it must be a dependency:
+এটি `messages` variable ব্যবহার করে সমস্ত বিদ্যমান message দিয়ে শুরু করে [একটি নতুন array তৈরি করে](/learn/updating-arrays-in-state) এবং শেষে নতুন message যোগ করে। তবে, যেহেতু `messages` একটি reactive value যা একটি Effect দ্বারা পড়া হয়, এটি অবশ্যই একটি dependency হতে হবে:
```js {7,10}
function ChatRoom({ roomId }) {
@@ -581,15 +583,15 @@ function ChatRoom({ roomId }) {
setMessages([...messages, receivedMessage]);
});
return () => connection.disconnect();
- }, [roomId, messages]); // ✅ All dependencies declared
+ }, [roomId, messages]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
```
-And making `messages` a dependency introduces a problem.
+এবং `messages` কে একটি dependency করা একটি সমস্যা introduce করে।
-Every time you receive a message, `setMessages()` causes the component to re-render with a new `messages` array that includes the received message. However, since this Effect now depends on `messages`, this will *also* re-synchronize the Effect. So every new message will make the chat re-connect. The user would not like that!
+প্রতিবার আপনি একটি message পান, `setMessages()` কম্পোনেন্টকে একটি নতুন `messages` array সহ re-render করে যাতে প্রাপ্ত message অন্তর্ভুক্ত থাকে। তবে, যেহেতু এই Effect এখন `messages` এর উপর নির্ভর করে, এটি Effect কেও *পুনরায় সিঙ্ক্রোনাইজ* করবে। তাই প্রতিটি নতুন message chat কে পুনরায় সংযুক্ত করবে। ব্যবহারকারী এটি পছন্দ করবে না!
-To fix the issue, don't read `messages` inside the Effect. Instead, pass an [updater function](/reference/react/useState#updating-state-based-on-the-previous-state) to `setMessages`:
+সমস্যা সমাধান করতে, Effect এর ভিতরে `messages` পড়বেন না। পরিবর্তে, `setMessages` এ একটি [updater function](/reference/react/useState#updating-state-based-on-the-previous-state) পাস করুন:
```js {7,10}
function ChatRoom({ roomId }) {
@@ -601,21 +603,22 @@ function ChatRoom({ roomId }) {
setMessages(msgs => [...msgs, receivedMessage]);
});
return () => connection.disconnect();
- }, [roomId]); // ✅ All dependencies declared
+ }, [roomId]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
```
-**Notice how your Effect does not read the `messages` variable at all now.** You only need to pass an updater function like `msgs => [...msgs, receivedMessage]`. React [puts your updater function in a queue](/learn/queueing-a-series-of-state-updates) and will provide the `msgs` argument to it during the next render. This is why the Effect itself doesn't need to depend on `messages` anymore. As a result of this fix, receiving a chat message will no longer make the chat re-connect.
+**লক্ষ্য করুন কিভাবে আপনার Effect এখন আর `messages` variable পড়ে না।** আপনাকে শুধুমাত্র একটি updater function পাস করতে হবে যেমন `msgs => [...msgs, receivedMessage]`। React [আপনার updater function কে একটি queue এ রাখে](/learn/queueing-a-series-of-state-updates) এবং পরবর্তী render এর সময় এটিকে `msgs` argument প্রদান করবে। এই কারণেই Effect নিজেই আর `messages` এর উপর নির্ভর করতে হবে না। এই fix এর ফলে, একটি chat message পাওয়া আর chat কে পুনরায় সংযুক্ত করবে না।
+
-### Do you want to read a value without "reacting" to its changes? {/*do-you-want-to-read-a-value-without-reacting-to-its-changes*/}
+### আপনি কি একটি মান পড়তে চান এর পরিবর্তনের প্রতি "react" না করে? {/*do-you-want-to-read-a-value-without-reacting-to-its-changes*/}
-This section describes an **experimental API that has not yet been released** in a stable version of React.
+এই অনুচ্ছেদটি একটি **experimental API বর্ণনা করে যা এখনও React এর একটি stable version এ release** হয়নি।
-Suppose that you want to play a sound when the user receives a new message unless `isMuted` is `true`:
+ধরুন আপনি একটি sound play করতে চান যখন ব্যবহারকারী একটি নতুন message পায় যদি না `isMuted` `true` হয়:
```js {3,10-12}
function ChatRoom({ roomId }) {
@@ -634,7 +637,7 @@ function ChatRoom({ roomId }) {
// ...
```
-Since your Effect now uses `isMuted` in its code, you have to add it to the dependencies:
+যেহেতু আপনার Effect এখন তার কোডে `isMuted` ব্যবহার করে, আপনাকে এটি dependency তে যোগ করতে হবে:
```js {10,15}
function ChatRoom({ roomId }) {
@@ -651,13 +654,13 @@ function ChatRoom({ roomId }) {
}
});
return () => connection.disconnect();
- }, [roomId, isMuted]); // ✅ All dependencies declared
+ }, [roomId, isMuted]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
```
-The problem is that every time `isMuted` changes (for example, when the user presses the "Muted" toggle), the Effect will re-synchronize, and reconnect to the chat. This is not the desired user experience! (In this example, even disabling the linter would not work--if you do that, `isMuted` would get "stuck" with its old value.)
+সমস্যা হল প্রতিবার `isMuted` পরিবর্তিত হলে (উদাহরণস্বরূপ, যখন ব্যবহারকারী "Muted" toggle চাপে), Effect পুনরায় সিঙ্ক্রোনাইজ হবে, এবং chat এ পুনরায় সংযুক্ত হবে। এটি কাঙ্ক্ষিত user experience নয়! (এই উদাহরণে, এমনকি linter নিষ্ক্রিয় করাও কাজ করবে না--যদি আপনি তা করেন, `isMuted` তার পুরানো মান নিয়ে "আটকে" যাবে।)
-To solve this problem, you need to extract the logic that shouldn't be reactive out of the Effect. You don't want this Effect to "react" to the changes in `isMuted`. [Move this non-reactive piece of logic into an Effect Event:](/learn/separating-events-from-effects#declaring-an-effect-event)
+এই সমস্যা সমাধান করতে, আপনাকে Effect থেকে সেই logic extract করতে হবে যা reactive হওয়া উচিত নয়। আপনি চান না এই Effect `isMuted` এর পরিবর্তনের প্রতি "react" করুক। [এই non-reactive logic এর অংশটি একটি Effect Event এ সরান:](/learn/separating-events-from-effects#declaring-an-effect-event)
```js {1,7-12,18,21}
import { useState, useEffect, useEffectEvent } from 'react';
@@ -680,15 +683,15 @@ function ChatRoom({ roomId }) {
onMessage(receivedMessage);
});
return () => connection.disconnect();
- }, [roomId]); // ✅ All dependencies declared
+ }, [roomId]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
```
-Effect Events let you split an Effect into reactive parts (which should "react" to reactive values like `roomId` and their changes) and non-reactive parts (which only read their latest values, like `onMessage` reads `isMuted`). **Now that you read `isMuted` inside an Effect Event, it doesn't need to be a dependency of your Effect.** As a result, the chat won't re-connect when you toggle the "Muted" setting on and off, solving the original issue!
+Effect Event আপনাকে একটি Effect কে reactive অংশে (যা reactive value যেমন `roomId` এবং তাদের পরিবর্তনের প্রতি "react" করা উচিত) এবং non-reactive অংশে (যা শুধুমাত্র তাদের সর্বশেষ মান পড়ে, যেমন `onMessage` `isMuted` পড়ে) বিভক্ত করতে দেয়। **এখন যেহেতু আপনি একটি Effect Event এর ভিতরে `isMuted` পড়েন, এটি আপনার Effect এর একটি dependency হওয়ার প্রয়োজন নেই।** ফলস্বরূপ, যখন আপনি "Muted" setting on এবং off toggle করেন তখন chat পুনরায় সংযুক্ত হবে না, মূল সমস্যা সমাধান করে!
-#### Wrapping an event handler from the props {/*wrapping-an-event-handler-from-the-props*/}
+#### Props থেকে একটি event handler wrap করা {/*wrapping-an-event-handler-from-the-props*/}
-You might run into a similar problem when your component receives an event handler as a prop:
+আপনি একটি অনুরূপ সমস্যায় পড়তে পারেন যখন আপনার component একটি event handler prop হিসাবে পায়:
```js {1,8,11}
function ChatRoom({ roomId, onReceiveMessage }) {
@@ -701,11 +704,11 @@ function ChatRoom({ roomId, onReceiveMessage }) {
onReceiveMessage(receivedMessage);
});
return () => connection.disconnect();
- }, [roomId, onReceiveMessage]); // ✅ All dependencies declared
+ }, [roomId, onReceiveMessage]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
```
-Suppose that the parent component passes a *different* `onReceiveMessage` function on every render:
+ধরুন parent component প্রতিটি render এ একটি *ভিন্ন* `onReceiveMessage` function পাস করে:
```js {3-5}
```
-Since `onReceiveMessage` is a dependency, it would cause the Effect to re-synchronize after every parent re-render. This would make it re-connect to the chat. To solve this, wrap the call in an Effect Event:
+যেহেতু `onReceiveMessage` একটি dependency, এটি প্রতিটি parent re-render এর পরে Effect কে পুনরায় সিঙ্ক্রোনাইজ করবে। এটি chat এ পুনরায় সংযুক্ত করবে। এটি সমাধান করতে, call টি একটি Effect Event এ wrap করুন:
```js {4-6,12,15}
function ChatRoom({ roomId, onReceiveMessage }) {
@@ -733,17 +736,18 @@ function ChatRoom({ roomId, onReceiveMessage }) {
onMessage(receivedMessage);
});
return () => connection.disconnect();
- }, [roomId]); // ✅ All dependencies declared
+ }, [roomId]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
```
-Effect Events aren't reactive, so you don't need to specify them as dependencies. As a result, the chat will no longer re-connect even if the parent component passes a function that's different on every re-render.
+Effect Event reactive নয়, তাই আপনাকে তাদের dependency হিসাবে নির্দিষ্ট করতে হবে না। ফলস্বরূপ, এমনকি parent component প্রতিটি re-render এ একটি ভিন্ন function পাস করলেও chat আর পুনরায় সংযুক্ত হবে না।
-#### Separating reactive and non-reactive code {/*separating-reactive-and-non-reactive-code*/}
-In this example, you want to log a visit every time `roomId` changes. You want to include the current `notificationCount` with every log, but you *don't* want a change to `notificationCount` to trigger a log event.
+#### Reactive এবং non-reactive কোড আলাদা করা {/*separating-reactive-and-non-reactive-code*/}
-The solution is again to split out the non-reactive code into an Effect Event:
+এই উদাহরণে, আপনি প্রতিবার `roomId` পরিবর্তিত হলে একটি visit log করতে চান। আপনি প্রতিটি log এর সাথে বর্তমান `notificationCount` অন্তর্ভুক্ত করতে চান, কিন্তু আপনি *চান না* `notificationCount` এর পরিবর্তন একটি log event trigger করুক।
+
+সমাধান আবার non-reactive কোড একটি Effect Event এ আলাদা করা:
```js {2-4,7}
function Chat({ roomId, notificationCount }) {
@@ -753,16 +757,16 @@ function Chat({ roomId, notificationCount }) {
useEffect(() => {
onVisit(roomId);
- }, [roomId]); // ✅ All dependencies declared
+ }, [roomId]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
}
```
-You want your logic to be reactive with regards to `roomId`, so you read `roomId` inside of your Effect. However, you don't want a change to `notificationCount` to log an extra visit, so you read `notificationCount` inside of the Effect Event. [Learn more about reading the latest props and state from Effects using Effect Events.](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events)
+আপনি চান আপনার logic `roomId` এর সাপেক্ষে reactive হোক, তাই আপনি আপনার Effect এর ভিতরে `roomId` পড়েন। তবে, আপনি চান না `notificationCount` এর পরিবর্তন একটি অতিরিক্ত visit log করুক, তাই আপনি Effect Event এর ভিতরে `notificationCount` পড়েন। [Effect Event ব্যবহার করে Effect থেকে সর্বশেষ props এবং state পড়া সম্পর্কে আরও জানুন।](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events)
-### Does some reactive value change unintentionally? {/*does-some-reactive-value-change-unintentionally*/}
+### কিছু reactive value কি অনিচ্ছাকৃতভাবে পরিবর্তিত হয়? {/*does-some-reactive-value-change-unintentionally*/}
-Sometimes, you *do* want your Effect to "react" to a certain value, but that value changes more often than you'd like--and might not reflect any actual change from the user's perspective. For example, let's say that you create an `options` object in the body of your component, and then read that object from inside of your Effect:
+কখনও কখনও, আপনি *চান* আপনার Effect একটি নির্দিষ্ট মানের প্রতি "react" করুক, কিন্তু সেই মান আপনার পছন্দের চেয়ে বেশি ঘন ঘন পরিবর্তিত হয়--এবং ব্যবহারকারীর দৃষ্টিকোণ থেকে কোনো প্রকৃত পরিবর্তন প্রতিফলিত নাও করতে পারে। উদাহরণস্বরূপ, ধরা যাক আপনি আপনার component এর body তে একটি `options` object তৈরি করেন, এবং তারপর আপনার Effect এর ভিতর থেকে সেই object পড়েন:
```js {3-6,9}
function ChatRoom({ roomId }) {
@@ -778,7 +782,7 @@ function ChatRoom({ roomId }) {
// ...
```
-This object is declared in the component body, so it's a [reactive value.](/learn/lifecycle-of-reactive-effects#effects-react-to-reactive-values) When you read a reactive value like this inside an Effect, you declare it as a dependency. This ensures your Effect "reacts" to its changes:
+এই object component body তে ডিক্লেয়ার করা হয়েছে, তাই এটি একটি [reactive value।](/learn/lifecycle-of-reactive-effects#effects-react-to-reactive-values) যখন আপনি একটি Effect এর ভিতরে এইরকম একটি reactive value পড়েন, আপনি এটি একটি dependency হিসাবে ডিক্লেয়ার করেন। এটি নিশ্চিত করে যে আপনার Effect এর পরিবর্তনের প্রতি "react" করে:
```js {3,6}
// ...
@@ -786,11 +790,11 @@ This object is declared in the component body, so it's a [reactive value.](/lear
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
- }, [options]); // ✅ All dependencies declared
+ }, [options]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
```
-It is important to declare it as a dependency! This ensures, for example, that if the `roomId` changes, your Effect will re-connect to the chat with the new `options`. However, there is also a problem with the code above. To see it, try typing into the input in the sandbox below, and watch what happens in the console:
+এটি একটি dependency হিসাবে ডিক্লেয়ার করা গুরুত্বপূর্ণ! এটি নিশ্চিত করে, উদাহরণস্বরূপ, যদি `roomId` পরিবর্তিত হয়, আপনার Effect নতুন `options` দিয়ে chat এ পুনরায় সংযুক্ত হবে। তবে, উপরের কোডেও একটি সমস্যা আছে। এটি দেখতে, নিচের sandbox এ input এ টাইপ করার চেষ্টা করুন, এবং console এ কি ঘটে তা দেখুন:
@@ -867,11 +871,11 @@ button { margin-left: 10px; }
-In the sandbox above, the input only updates the `message` state variable. From the user's perspective, this should not affect the chat connection. However, every time you update the `message`, your component re-renders. When your component re-renders, the code inside of it runs again from scratch.
+উপরের sandbox এ, input শুধুমাত্র `message` state variable আপডেট করে। ব্যবহারকারীর দৃষ্টিকোণ থেকে, এটি chat connection কে প্রভাবিত করা উচিত নয়। তবে, প্রতিবার আপনি `message` আপডেট করেন, আপনার component re-render হয়। যখন আপনার component re-render হয়, এর ভিতরের কোড আবার শুরু থেকে চালু হয়।
-A new `options` object is created from scratch on every re-render of the `ChatRoom` component. React sees that the `options` object is a *different object* from the `options` object created during the last render. This is why it re-synchronizes your Effect (which depends on `options`), and the chat re-connects as you type.
+প্রতিটি `ChatRoom` component এর re-render এ একটি নতুন `options` object শুরু থেকে তৈরি হয়। React দেখে যে `options` object শেষ render এর সময় তৈরি `options` object থেকে একটি *ভিন্ন object*। এই কারণেই এটি আপনার Effect পুনরায় সিঙ্ক্রোনাইজ করে (যা `options` এর উপর নির্ভর করে), এবং আপনি টাইপ করার সাথে সাথে chat পুনরায় সংযুক্ত হয়।
-**This problem only affects objects and functions. In JavaScript, each newly created object and function is considered distinct from all the others. It doesn't matter that the contents inside of them may be the same!**
+**এই সমস্যা শুধুমাত্র object এবং function কে প্রভাবিত করে। JavaScript এ, প্রতিটি নতুন তৈরি object এবং function অন্য সবগুলি থেকে আলাদা বলে বিবেচিত হয়। এটি কোন ব্যাপার না যে তাদের ভিতরের content একই হতে পারে!**
```js {7-8}
// During the first render
@@ -884,13 +888,14 @@ const options2 = { serverUrl: 'https://localhost:1234', roomId: 'music' };
console.log(Object.is(options1, options2)); // false
```
-**Object and function dependencies can make your Effect re-synchronize more often than you need.**
+**Object এবং function dependency আপনার Effect কে আপনার প্রয়োজনের চেয়ে বেশি ঘন ঘন পুনরায় সিঙ্ক্রোনাইজ করতে পারে।**
+
+এই কারণেই, যখনই সম্ভব, আপনার Effect এর dependency হিসাবে object এবং function এড়ানোর চেষ্টা করা উচিত। পরিবর্তে, তাদের component এর বাইরে, Effect এর ভিতরে সরানোর চেষ্টা করুন, অথবা তাদের থেকে primitive value extract করুন।
-This is why, whenever possible, you should try to avoid objects and functions as your Effect's dependencies. Instead, try moving them outside the component, inside the Effect, or extracting primitive values out of them.
-#### Move static objects and functions outside your component {/*move-static-objects-and-functions-outside-your-component*/}
+#### Static object এবং function আপনার component এর বাইরে সরান {/*move-static-objects-and-functions-outside-your-component*/}
-If the object does not depend on any props and state, you can move that object outside your component:
+যদি object কোনো props এবং state এর উপর নির্ভর না করে, আপনি সেই object আপনার component এর বাইরে সরাতে পারেন:
```js {1-4,13}
const options = {
@@ -905,13 +910,13 @@ function ChatRoom() {
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
- }, []); // ✅ All dependencies declared
+ }, []); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
```
-This way, you *prove* to the linter that it's not reactive. It can't change as a result of a re-render, so it doesn't need to be a dependency. Now re-rendering `ChatRoom` won't cause your Effect to re-synchronize.
+এইভাবে, আপনি linter কে *প্রমাণ* করেন যে এটি reactive নয়। এটি একটি re-render এর ফলে পরিবর্তিত হতে পারে না, তাই এটি একটি dependency হওয়ার প্রয়োজন নেই। এখন `ChatRoom` re-render করলে আপনার Effect পুনরায় সিঙ্ক্রোনাইজ হবে না।
-This works for functions too:
+এটি function এর জন্যও কাজ করে:
```js {1-6,12}
function createOptions() {
@@ -929,15 +934,15 @@ function ChatRoom() {
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
- }, []); // ✅ All dependencies declared
+ }, []); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
```
-Since `createOptions` is declared outside your component, it's not a reactive value. This is why it doesn't need to be specified in your Effect's dependencies, and why it won't ever cause your Effect to re-synchronize.
+যেহেতু `createOptions` আপনার component এর বাইরে ডিক্লেয়ার করা হয়েছে, এটি একটি reactive value নয়। এই কারণেই এটি আপনার Effect এর dependency তে নির্দিষ্ট করার প্রয়োজন নেই, এবং কেন এটি কখনও আপনার Effect কে পুনরায় সিঙ্ক্রোনাইজ করবে না।
-#### Move dynamic objects and functions inside your Effect {/*move-dynamic-objects-and-functions-inside-your-effect*/}
+#### Dynamic object এবং function আপনার Effect এর ভিতরে সরান {/*move-dynamic-objects-and-functions-inside-your-effect*/}
-If your object depends on some reactive value that may change as a result of a re-render, like a `roomId` prop, you can't pull it *outside* your component. You can, however, move its creation *inside* of your Effect's code:
+যদি আপনার object কোনো reactive value এর উপর নির্ভর করে যা একটি re-render এর ফলে পরিবর্তিত হতে পারে, যেমন একটি `roomId` prop, আপনি এটি আপনার component এর *বাইরে* টানতে পারবেন না। তবে, আপনি এর creation আপনার Effect এর কোডের *ভিতরে* সরাতে পারেন:
```js {7-10,11,14}
const serverUrl = 'https://localhost:1234';
@@ -953,11 +958,11 @@ function ChatRoom({ roomId }) {
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
- }, [roomId]); // ✅ All dependencies declared
+ }, [roomId]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
```
-Now that `options` is declared inside of your Effect, it is no longer a dependency of your Effect. Instead, the only reactive value used by your Effect is `roomId`. Since `roomId` is not an object or function, you can be sure that it won't be *unintentionally* different. In JavaScript, numbers and strings are compared by their content:
+এখন যেহেতু `options` আপনার Effect এর ভিতরে ডিক্লেয়ার করা হয়েছে, এটি আর আপনার Effect এর একটি dependency নয়। পরিবর্তে, আপনার Effect দ্বারা ব্যবহৃত একমাত্র reactive value হল `roomId`। যেহেতু `roomId` একটি object বা function নয়, আপনি নিশ্চিত হতে পারেন যে এটি *অনিচ্ছাকৃতভাবে* ভিন্ন হবে না। JavaScript এ, number এবং string তাদের content দ্বারা তুলনা করা হয়:
```js {7-8}
// During the first render
@@ -970,7 +975,7 @@ const roomId2 = 'music';
console.log(Object.is(roomId1, roomId2)); // true
```
-Thanks to this fix, the chat no longer re-connects if you edit the input:
+এই fix এর জন্য ধন্যবাদ, যদি আপনি input edit করেন তাহলে chat আর পুনরায় সংযুক্ত হয় না:
@@ -1044,9 +1049,9 @@ button { margin-left: 10px; }
-However, it *does* re-connect when you change the `roomId` dropdown, as you would expect.
+তবে, এটি *পুনরায় সংযুক্ত হয়* যখন আপনি `roomId` dropdown পরিবর্তন করেন, যেমনটি আপনি আশা করবেন।
-This works for functions, too:
+এটি function এর জন্যও কাজ করে:
```js {7-12,14}
const serverUrl = 'https://localhost:1234';
@@ -1066,15 +1071,16 @@ function ChatRoom({ roomId }) {
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
- }, [roomId]); // ✅ All dependencies declared
+ }, [roomId]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
```
-You can write your own functions to group pieces of logic inside your Effect. As long as you also declare them *inside* your Effect, they're not reactive values, and so they don't need to be dependencies of your Effect.
+আপনি আপনার Effect এর ভিতরে logic এর অংশগুলি group করতে আপনার নিজস্ব function লিখতে পারেন। যতক্ষণ আপনি তাদের আপনার Effect এর *ভিতরে* ডিক্লেয়ার করেন, তারা reactive value নয়, এবং তাই তাদের আপনার Effect এর dependency হওয়ার প্রয়োজন নেই।
-#### Read primitive values from objects {/*read-primitive-values-from-objects*/}
-Sometimes, you may receive an object from props:
+#### Object থেকে primitive value পড়ুন {/*read-primitive-values-from-objects*/}
+
+কখনও কখনও, আপনি props থেকে একটি object পেতে পারেন:
```js {1,5,8}
function ChatRoom({ options }) {
@@ -1084,11 +1090,11 @@ function ChatRoom({ options }) {
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
- }, [options]); // ✅ All dependencies declared
+ }, [options]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
```
-The risk here is that the parent component will create the object during rendering:
+এখানে ঝুঁকি হল parent component rendering এর সময় object তৈরি করবে:
```js {3-6}
```
-This would cause your Effect to re-connect every time the parent component re-renders. To fix this, read information from the object *outside* the Effect, and avoid having object and function dependencies:
+এটি আপনার Effect কে প্রতিবার parent component re-render হলে পুনরায় সংযুক্ত করবে। এটি ঠিক করতে, Effect এর *বাইরে* object থেকে information পড়ুন, এবং object এবং function dependency থাকা এড়িয়ে চলুন:
```js {4,7-8,12}
function ChatRoom({ options }) {
@@ -1114,15 +1120,15 @@ function ChatRoom({ options }) {
});
connection.connect();
return () => connection.disconnect();
- }, [roomId, serverUrl]); // ✅ All dependencies declared
+ }, [roomId, serverUrl]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
```
-The logic gets a little repetitive (you read some values from an object outside an Effect, and then create an object with the same values inside the Effect). But it makes it very explicit what information your Effect *actually* depends on. If an object is re-created unintentionally by the parent component, the chat would not re-connect. However, if `options.roomId` or `options.serverUrl` really are different, the chat would re-connect.
+Logic টি একটু repetitive হয় (আপনি একটি Effect এর বাইরে একটি object থেকে কিছু value পড়েন, এবং তারপর Effect এর ভিতরে একই value দিয়ে একটি object তৈরি করেন)। কিন্তু এটি খুব স্পষ্ট করে যে আপনার Effect *আসলে* কোন information এর উপর নির্ভর করে। যদি parent component দ্বারা অনিচ্ছাকৃতভাবে একটি object পুনরায় তৈরি করা হয়, chat পুনরায় সংযুক্ত হবে না। তবে, যদি `options.roomId` বা `options.serverUrl` সত্যিই ভিন্ন হয়, chat পুনরায় সংযুক্ত হবে।
-#### Calculate primitive values from functions {/*calculate-primitive-values-from-functions*/}
+#### Function থেকে primitive value গণনা করুন {/*calculate-primitive-values-from-functions*/}
-The same approach can work for functions. For example, suppose the parent component passes a function:
+একই পদ্ধতি function এর জন্য কাজ করতে পারে। উদাহরণস্বরূপ, ধরুন parent component একটি function পাস করে:
```js {3-8}
```
-To avoid making it a dependency (and causing it to re-connect on re-renders), call it outside the Effect. This gives you the `roomId` and `serverUrl` values that aren't objects, and that you can read from inside your Effect:
+এটি একটি dependency করা এড়াতে (এবং re-render এ পুনরায় সংযুক্ত হওয়া এড়াতে), Effect এর বাইরে এটি call করুন। এটি আপনাকে `roomId` এবং `serverUrl` value দেয় যা object নয়, এবং যা আপনি আপনার Effect এর ভিতর থেকে পড়তে পারেন:
```js {1,4}
function ChatRoom({ getOptions }) {
@@ -1150,36 +1156,36 @@ function ChatRoom({ getOptions }) {
});
connection.connect();
return () => connection.disconnect();
- }, [roomId, serverUrl]); // ✅ All dependencies declared
+ }, [roomId, serverUrl]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
// ...
```
-This only works for [pure](/learn/keeping-components-pure) functions because they are safe to call during rendering. If your function is an event handler, but you don't want its changes to re-synchronize your Effect, [wrap it into an Effect Event instead.](#do-you-want-to-read-a-value-without-reacting-to-its-changes)
+এটি শুধুমাত্র [pure](/learn/keeping-components-pure) function এর জন্য কাজ করে কারণ rendering এর সময় তাদের call করা নিরাপদ। যদি আপনার function একটি event handler হয়, কিন্তু আপনি চান না এর পরিবর্তন আপনার Effect পুনরায় সিঙ্ক্রোনাইজ করুক, [পরিবর্তে এটি একটি Effect Event এ wrap করুন।](#do-you-want-to-read-a-value-without-reacting-to-its-changes)
-- Dependencies should always match the code.
-- When you're not happy with your dependencies, what you need to edit is the code.
-- Suppressing the linter leads to very confusing bugs, and you should always avoid it.
-- To remove a dependency, you need to "prove" to the linter that it's not necessary.
-- If some code should run in response to a specific interaction, move that code to an event handler.
-- If different parts of your Effect should re-run for different reasons, split it into several Effects.
-- If you want to update some state based on the previous state, pass an updater function.
-- If you want to read the latest value without "reacting" it, extract an Effect Event from your Effect.
-- In JavaScript, objects and functions are considered different if they were created at different times.
-- Try to avoid object and function dependencies. Move them outside the component or inside the Effect.
+- Dependency সর্বদা কোডের সাথে মিলতে হবে।
+- যখন আপনি আপনার dependency নিয়ে সন্তুষ্ট নন, আপনাকে যা edit করতে হবে তা হল কোড।
+- Linter suppress করা খুব বিভ্রান্তিকর bug এর দিকে নিয়ে যায়, এবং আপনার সর্বদা এটি এড়ানো উচিত।
+- একটি dependency সরাতে, আপনাকে linter কে "প্রমাণ" করতে হবে যে এটি প্রয়োজনীয় নয়।
+- যদি কিছু কোড একটি নির্দিষ্ট interaction এর প্রতিক্রিয়ায় চালু হওয়া উচিত, সেই কোড একটি event handler এ সরান।
+- যদি আপনার Effect এর বিভিন্ন অংশ বিভিন্ন কারণে পুনরায় চালু হওয়া উচিত, এটি বিভিন্ন Effect এ বিভক্ত করুন।
+- যদি আপনি পূর্ববর্তী state এর উপর ভিত্তি করে কিছু state আপডেট করতে চান, একটি updater function পাস করুন।
+- যদি আপনি "react" না করে সর্বশেষ মান পড়তে চান, আপনার Effect থেকে একটি Effect Event extract করুন।
+- JavaScript এ, object এবং function ভিন্ন বলে বিবেচিত হয় যদি তারা বিভিন্ন সময়ে তৈরি করা হয়।
+- Object এবং function dependency এড়ানোর চেষ্টা করুন। তাদের component এর বাইরে বা Effect এর ভিতরে সরান।
-#### Fix a resetting interval {/*fix-a-resetting-interval*/}
+#### একটি resetting interval ঠিক করুন {/*fix-a-resetting-interval*/}
-This Effect sets up an interval that ticks every second. You've noticed something strange happening: it seems like the interval gets destroyed and re-created every time it ticks. Fix the code so that the interval doesn't get constantly re-created.
+এই Effect একটি interval setup করে যা প্রতি সেকেন্ডে tick করে। আপনি কিছু অদ্ভুত ঘটতে দেখেছেন: মনে হচ্ছে interval প্রতিবার tick করার সময় destroy এবং re-create হয়। কোড ঠিক করুন যাতে interval ক্রমাগত পুনরায় তৈরি না হয়।
-It seems like this Effect's code depends on `count`. Is there some way to not need this dependency? There should be a way to update the `count` state based on its previous value without adding a dependency on that value.
+মনে হচ্ছে এই Effect এর কোড `count` এর উপর নির্ভর করে। এই dependency এর প্রয়োজন না হওয়ার কোনো উপায় আছে কি? সেই value এ dependency যোগ না করে তার পূর্ববর্তী মানের উপর ভিত্তি করে `count` state আপডেট করার একটি উপায় থাকা উচিত।
@@ -1211,9 +1217,9 @@ export default function Timer() {
-You want to update the `count` state to be `count + 1` from inside the Effect. However, this makes your Effect depend on `count`, which changes with every tick, and that's why your interval gets re-created on every tick.
+আপনি Effect এর ভিতর থেকে `count` state কে `count + 1` এ আপডেট করতে চান। তবে, এটি আপনার Effect কে `count` এর উপর নির্ভরশীল করে, যা প্রতিটি tick এ পরিবর্তিত হয়, এবং এই কারণেই আপনার interval প্রতিটি tick এ পুনরায় তৈরি হয়।
-To solve this, use the [updater function](/reference/react/useState#updating-state-based-on-the-previous-state) and write `setCount(c => c + 1)` instead of `setCount(count + 1)`:
+এটি সমাধান করতে, [updater function](/reference/react/useState#updating-state-based-on-the-previous-state) ব্যবহার করুন এবং `setCount(count + 1)` এর পরিবর্তে `setCount(c => c + 1)` লিখুন:
@@ -1241,19 +1247,20 @@ export default function Timer() {
-Instead of reading `count` inside the Effect, you pass a `c => c + 1` instruction ("increment this number!") to React. React will apply it on the next render. And since you don't need to read the value of `count` inside your Effect anymore, you can keep your Effect's dependencies empty (`[]`). This prevents your Effect from re-creating the interval on every tick.
+Effect এর ভিতরে `count` পড়ার পরিবর্তে, আপনি React কে `c => c + 1` instruction ("এই number বৃদ্ধি করুন!") পাস করেন। React এটি পরবর্তী render এ প্রয়োগ করবে। এবং যেহেতু আপনাকে আর আপনার Effect এর ভিতরে `count` এর মান পড়তে হবে না, আপনি আপনার Effect এর dependency খালি (`[]`) রাখতে পারেন। এই fix interval কে প্রতিটি tick এ পুনরায় তৈরি হওয়া থেকে বাধা দেয়।
-#### Fix a retriggering animation {/*fix-a-retriggering-animation*/}
-In this example, when you press "Show", a welcome message fades in. The animation takes a second. When you press "Remove", the welcome message immediately disappears. The logic for the fade-in animation is implemented in the `animation.js` file as plain JavaScript [animation loop.](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) You don't need to change that logic. You can treat it as a third-party library. Your Effect creates an instance of `FadeInAnimation` for the DOM node, and then calls `start(duration)` or `stop()` to control the animation. The `duration` is controlled by a slider. Adjust the slider and see how the animation changes.
+#### একটি retriggering animation ঠিক করুন {/*fix-a-retriggering-animation*/}
+
+এই উদাহরণে, যখন আপনি "Show" চাপেন, একটি welcome message fade in হয়। animation এক সেকেন্ড সময় নেয়। যখন আপনি "Remove" চাপেন, welcome message অবিলম্বে অদৃশ্য হয়ে যায়। fade-in animation এর logic `animation.js` file এ plain JavaScript [animation loop](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) হিসাবে implement করা হয়েছে। আপনাকে সেই logic পরিবর্তন করতে হবে না। আপনি এটিকে একটি third-party library হিসাবে বিবেচনা করতে পারেন। আপনার Effect DOM node এর জন্য `FadeInAnimation` এর একটি instance তৈরি করে, এবং তারপর animation নিয়ন্ত্রণ করতে `start(duration)` বা `stop()` call করে। `duration` একটি slider দ্বারা নিয়ন্ত্রিত হয়। slider সামঞ্জস্য করুন এবং দেখুন animation কিভাবে পরিবর্তিত হয়।
-This code already works, but there is something you want to change. Currently, when you move the slider that controls the `duration` state variable, it retriggers the animation. Change the behavior so that the Effect does not "react" to the `duration` variable. When you press "Show", the Effect should use the current `duration` on the slider. However, moving the slider itself should not by itself retrigger the animation.
+এই কোড ইতিমধ্যে কাজ করে, কিন্তু আপনি কিছু পরিবর্তন করতে চান। বর্তমানে, যখন আপনি slider সরান যা `duration` state variable নিয়ন্ত্রণ করে, এটি animation পুনরায় trigger করে। আচরণ পরিবর্তন করুন যাতে Effect `duration` variable এর প্রতি "react" না করে। যখন আপনি "Show" চাপেন, Effect slider এ বর্তমান `duration` ব্যবহার করা উচিত। তবে, slider সরানো নিজে থেকে animation পুনরায় trigger করা উচিত নয়।
-Is there a line of code inside the Effect that should not be reactive? How can you move non-reactive code out of the Effect?
+Effect এর ভিতরে কি কোডের একটি লাইন আছে যা reactive হওয়া উচিত নয়? আপনি কিভাবে non-reactive কোড Effect থেকে বের করতে পারেন?
@@ -1382,7 +1389,7 @@ html, body { min-height: 300px; }
-Your Effect needs to read the latest value of `duration`, but you don't want it to "react" to changes in `duration`. You use `duration` to start the animation, but starting animation isn't reactive. Extract the non-reactive line of code into an Effect Event, and call that function from your Effect.
+আপনার Effect কে `duration` এর সর্বশেষ মান পড়তে হবে, কিন্তু আপনি চান না এটি `duration` এর পরিবর্তনের প্রতি "react" করুক। আপনি animation শুরু করতে `duration` ব্যবহার করেন, কিন্তু animation শুরু করা reactive নয়। non-reactive কোডের লাইনটি একটি Effect Event এ extract করুন, এবং আপনার Effect থেকে সেই function call করুন।
@@ -1505,19 +1512,20 @@ html, body { min-height: 300px; }
-Effect Events like `onAppear` are not reactive, so you can read `duration` inside without retriggering the animation.
+`onAppear` এর মতো Effect Event reactive নয়, তাই আপনি animation পুনরায় trigger না করে এর ভিতরে `duration` পড়তে পারেন।
-#### Fix a reconnecting chat {/*fix-a-reconnecting-chat*/}
-In this example, every time you press "Toggle theme", the chat re-connects. Why does this happen? Fix the mistake so that the chat re-connects only when you edit the Server URL or choose a different chat room.
+#### একটি reconnecting chat ঠিক করুন {/*fix-a-reconnecting-chat*/}
-Treat `chat.js` as an external third-party library: you can consult it to check its API, but don't edit it.
+এই উদাহরণে, প্রতিবার আপনি "Toggle theme" চাপলে, chat পুনরায় সংযুক্ত হয়। এটি কেন ঘটে? ভুল ঠিক করুন যাতে chat শুধুমাত্র তখনই পুনরায় সংযুক্ত হয় যখন আপনি Server URL edit করেন বা একটি ভিন্ন chat room বেছে নেন।
+
+`chat.js` কে একটি external third-party library হিসাবে বিবেচনা করুন: আপনি এর API চেক করতে এটি consult করতে পারেন, কিন্তু এটি edit করবেন না।
-There's more than one way to fix this, but ultimately you want to avoid having an object as your dependency.
+এটি ঠিক করার একাধিক উপায় আছে, কিন্তু শেষ পর্যন্ত আপনি একটি object কে আপনার dependency হিসাবে রাখা এড়াতে চান।
@@ -1611,9 +1619,9 @@ label, button { display: block; margin-bottom: 5px; }
-Your Effect is re-running because it depends on the `options` object. Objects can be re-created unintentionally, you should try to avoid them as dependencies of your Effects whenever possible.
+আপনার Effect পুনরায় চালু হচ্ছে কারণ এটি `options` object এর উপর নির্ভর করে। Object অনিচ্ছাকৃতভাবে পুনরায় তৈরি হতে পারে, আপনার যখনই সম্ভব তাদের আপনার Effect এর dependency হিসাবে এড়ানোর চেষ্টা করা উচিত।
-The least invasive fix is to read `roomId` and `serverUrl` right outside the Effect, and then make the Effect depend on those primitive values (which can't change unintentionally). Inside the Effect, create an object and pass it to `createConnection`:
+সবচেয়ে কম invasive fix হল Effect এর ঠিক বাইরে `roomId` এবং `serverUrl` পড়া, এবং তারপর Effect কে সেই primitive value এর উপর নির্ভরশীল করা (যা অনিচ্ছাকৃতভাবে পরিবর্তিত হতে পারে না)। Effect এর ভিতরে, একটি object তৈরি করুন এবং এটি `createConnection` এ পাস করুন:
@@ -1707,7 +1715,7 @@ label, button { display: block; margin-bottom: 5px; }
-It would be even better to replace the object `options` prop with the more specific `roomId` and `serverUrl` props:
+object `options` prop কে আরও নির্দিষ্ট `roomId` এবং `serverUrl` props দিয়ে প্রতিস্থাপন করা আরও ভালো হবে:
@@ -1798,25 +1806,25 @@ label, button { display: block; margin-bottom: 5px; }
-Sticking to primitive props where possible makes it easier to optimize your components later.
+যখনই সম্ভব primitive props এ লেগে থাকা পরে আপনার component optimize করা সহজ করে।
-#### Fix a reconnecting chat, again {/*fix-a-reconnecting-chat-again*/}
+#### আবার একটি reconnecting chat ঠিক করুন {/*fix-a-reconnecting-chat-again*/}
-This example connects to the chat either with or without encryption. Toggle the checkbox and notice the different messages in the console when the encryption is on and off. Try changing the room. Then, try toggling the theme. When you're connected to a chat room, you will receive new messages every few seconds. Verify that their color matches the theme you've picked.
+এই উদাহরণ encryption সহ বা ছাড়া chat এ সংযুক্ত হয়। checkbox toggle করুন এবং console এ বিভিন্ন message লক্ষ্য করুন যখন encryption on এবং off থাকে। room পরিবর্তন করার চেষ্টা করুন। তারপর, theme toggle করার চেষ্টা করুন। যখন আপনি একটি chat room এ সংযুক্ত থাকেন, আপনি প্রতি কয়েক সেকেন্ডে নতুন message পাবেন। যাচাই করুন যে তাদের রঙ আপনার বেছে নেওয়া theme এর সাথে মিলে।
-In this example, the chat re-connects every time you try to change the theme. Fix this. After the fix, changing the theme should not re-connect the chat, but toggling encryption settings or changing the room should re-connect.
+এই উদাহরণে, প্রতিবার আপনি theme পরিবর্তন করার চেষ্টা করলে chat পুনরায় সংযুক্ত হয়। এটি ঠিক করুন। fix এর পরে, theme পরিবর্তন করলে chat পুনরায় সংযুক্ত হওয়া উচিত নয়, কিন্তু encryption setting toggle করা বা room পরিবর্তন করলে পুনরায় সংযুক্ত হওয়া উচিত।
-Don't change any code in `chat.js`. Other than that, you can change any code as long as it results in the same behavior. For example, you may find it helpful to change which props are being passed down.
+`chat.js` এ কোনো কোড পরিবর্তন করবেন না। এটি ছাড়া, আপনি যেকোনো কোড পরিবর্তন করতে পারেন যতক্ষণ এটি একই আচরণের ফলাফল দেয়। উদাহরণস্বরূপ, আপনি কোন props পাস করা হচ্ছে তা পরিবর্তন করা সহায়ক মনে করতে পারেন।
-You're passing down two functions: `onMessage` and `createConnection`. Both of them are created from scratch every time `App` re-renders. They are considered to be new values every time, which is why they re-trigger your Effect.
+আপনি দুটি function পাস করছেন: `onMessage` এবং `createConnection`। উভয়ই প্রতিবার `App` re-render হলে শুরু থেকে তৈরি হয়। তারা প্রতিবার নতুন value হিসাবে বিবেচিত হয়, যে কারণে তারা আপনার Effect পুনরায় trigger করে।
-One of these functions is an event handler. Do you know some way to call an event handler an Effect without "reacting" to the new values of the event handler function? That would come in handy!
+এই function গুলির একটি একটি event handler। আপনি কি এমন কোনো উপায় জানেন যে একটি Effect এ একটি event handler call করা যায় event handler function এর নতুন value এর প্রতি "react" না করে? এটি কাজে আসবে!
-Another of these functions only exists to pass some state to an imported API method. Is this function really necessary? What is the essential information that's being passed down? You might need to move some imports from `App.js` to `ChatRoom.js`.
+অন্য function টি শুধুমাত্র একটি imported API method এ কিছু state পাস করার জন্য বিদ্যমান। এই function কি সত্যিই প্রয়োজনীয়? কোন essential information পাস করা হচ্ছে? আপনাকে `App.js` থেকে `ChatRoom.js` এ কিছু import সরাতে হতে পারে।
@@ -2031,11 +2039,11 @@ label, button { display: block; margin-bottom: 5px; }
-There's more than one correct way to solve this, but here is one possible solution.
+এটি সমাধান করার একাধিক সঠিক উপায় আছে, কিন্তু এখানে একটি সম্ভাব্য সমাধান।
-In the original example, toggling the theme caused different `onMessage` and `createConnection` functions to be created and passed down. Since the Effect depended on these functions, the chat would re-connect every time you toggle the theme.
+মূল উদাহরণে, theme toggle করা বিভিন্ন `onMessage` এবং `createConnection` function তৈরি এবং পাস করার কারণ হয়। যেহেতু Effect এই function গুলির উপর নির্ভর করে, প্রতিবার আপনি theme toggle করলে chat পুনরায় সংযুক্ত হত।
-To fix the problem with `onMessage`, you needed to wrap it into an Effect Event:
+`onMessage` এর সমস্যা ঠিক করতে, আপনাকে এটি একটি Effect Event এ wrap করতে হয়েছিল:
```js {1,2,6}
export default function ChatRoom({ roomId, createConnection, onMessage }) {
@@ -2047,9 +2055,9 @@ export default function ChatRoom({ roomId, createConnection, onMessage }) {
// ...
```
-Unlike the `onMessage` prop, the `onReceiveMessage` Effect Event is not reactive. This is why it doesn't need to be a dependency of your Effect. As a result, changes to `onMessage` won't cause the chat to re-connect.
+`onMessage` prop এর বিপরীতে, `onReceiveMessage` Effect Event reactive নয়। এই কারণেই এটি আপনার Effect এর একটি dependency হওয়ার প্রয়োজন নেই। ফলস্বরূপ, `onMessage` এর পরিবর্তন chat কে পুনরায় সংযুক্ত করবে না।
-You can't do the same with `createConnection` because it *should* be reactive. You *want* the Effect to re-trigger if the user switches between an encrypted and an unencryption connection, or if the user switches the current room. However, because `createConnection` is a function, you can't check whether the information it reads has *actually* changed or not. To solve this, instead of passing `createConnection` down from the `App` component, pass the raw `roomId` and `isEncrypted` values:
+আপনি `createConnection` এর সাথে একই কাজ করতে পারবেন না কারণ এটি *reactive হওয়া উচিত*। আপনি *চান* Effect পুনরায় trigger হোক যদি ব্যবহারকারী একটি encrypted এবং একটি unencrypted connection এর মধ্যে switch করে, অথবা যদি ব্যবহারকারী বর্তমান room switch করে। তবে, যেহেতু `createConnection` একটি function, আপনি চেক করতে পারবেন না যে এটি যে information পড়ে তা *আসলে* পরিবর্তিত হয়েছে কিনা। এটি সমাধান করতে, `App` component থেকে `createConnection` পাস করার পরিবর্তে, raw `roomId` এবং `isEncrypted` value পাস করুন:
```js {2-3}
```
-Now you can move the `createConnection` function *inside* the Effect instead of passing it down from the `App`:
+এখন আপনি `App` থেকে পাস করার পরিবর্তে Effect এর *ভিতরে* `createConnection` function সরাতে পারেন:
```js {1-4,6,10-20}
import {
@@ -2087,7 +2095,7 @@ export default function ChatRoom({ roomId, isEncrypted, onMessage }) {
// ...
```
-After these two changes, your Effect no longer depends on any function values:
+এই দুটি পরিবর্তনের পরে, আপনার Effect আর কোনো function value এর উপর নির্ভর করে না:
```js {1,8,10,21}
export default function ChatRoom({ roomId, isEncrypted, onMessage }) { // Reactive values
@@ -2110,10 +2118,11 @@ export default function ChatRoom({ roomId, isEncrypted, onMessage }) { // Reacti
connection.on('message', (msg) => onReceiveMessage(msg));
connection.connect();
return () => connection.disconnect();
- }, [roomId, isEncrypted]); // ✅ All dependencies declared
+ }, [roomId, isEncrypted]); // ✅ সমস্ত dependency ডিক্লেয়ার করা হয়েছে
```
-As a result, the chat re-connects only when something meaningful (`roomId` or `isEncrypted`) changes:
+ফলস্বরূপ, chat শুধুমাত্র তখনই পুনরায় সংযুক্ত হয় যখন কিছু অর্থপূর্ণ (`roomId` বা `isEncrypted`) পরিবর্তিত হয়:
+