You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- আপনি এটি একটি কম্পোনেন্টকে প্রপ হিসেবে পাস করেন যা [`memo`.](/reference/react/memo). দ্বারা মোড়ানো। মান যদি অপরিবর্তিত থাকে তাহলে আপনি কি-রেন্ডারিং এড়াতে চান। মেমোইজেশন আপনার কম্পোনেন্টকে শুধুমাত্র তখন রি-রেন্ডার করতে দেয় যখন ডিপেন্ডেন্সিসগুলি একই নয়।
152
152
- আপনি যে মানটি পাস করছেন তা পরবর্তীতে কোনো হুকের নির্ভরতা হিসেবে ব্যবহৃত হয়। উদাহরণস্বরূপ, হয়তো অন্য একটি `useMemo` calculation এর মান এটির উপর নির্ভর করে। অথবা হয়তো আপনি এই মানটির উপর [`useEffect.`](/reference/react/useEffect). থেকে নির্ভর করছেন।
153
153
154
-
অন্য ক্ষেত্রে, `useMemo` ব্যবহার করে কোনো calculation মোড়ানোর কোনো সুবিধা নেই। তবে করার ফলে কোনো গুরুতর ক্ষতি হয় না, তাই কিছু টিম প্রতিটি ক্ষেত্রে আলাদাভাবে চিন্তা না করে যতটা সম্ভব মেমোইজ করে। এই পদ্ধতির অসুবিধা হল কোড কম পাঠযোগ্য হয়। এছাড়া, সব মেমোইজেশন কার্যকর নয়: “সর্বদা নতুন” একটি একক মান পুরো কম্পোনেন্টের জন্য মেমোইজেশন ব্যর্থ করতে পারে।
154
+
অন্য ক্ষেত্রে, `useMemo` ব্যবহার করে কোনো calculation মোড়ানোর কোনো সুবিধা নেই। তবে করার ফলে কোনো গুরুতর ক্ষতি হয় না, তাই কিছু টিম প্রতিটি ক্ষেত্রে আলাদাভাবে চিন্তা না করে যতটা সম্ভব মেমোইজ করে। এই পদ্ধতির অসুবিধা হল কোড কম পাঠযোগ্য হয়। এছাড়া, সব মেমোইজেশন কার্যকর নয়: "সর্বদা নতুন" একটি একক মান পুরো কম্পোনেন্টের জন্য মেমোইজেশন ব্যর্থ করতে পারে।
155
155
156
156
**বাস্তবে, কিছু নীতি অনুসরণ করে আপনি অনেক মেমোইজেশন অপ্রয়োজনীয় করে তুলতে পারেন:**
157
157
@@ -1056,12 +1056,9 @@ label {
1056
1056
1057
1057
---
1058
1058
1059
-
<<<<<<< HEAD
1060
-
### অন্য হুকের ডিপেন্ডেন্সিস মেমোইজ করা {/*memoizing-a-dependency-of-another-hook*/}
1061
-
=======
1062
-
### Preventing an Effect from firing too often {/*preventing-an-effect-from-firing-too-often*/}
1059
+
### Effect এর অত্যধিক ফায়ার করা প্রতিরোধ করা {/*preventing-an-effect-from-firing-too-often*/}
1063
1060
1064
-
Sometimes, you might want to use a value inside an [Effect:](/learn/synchronizing-with-effects)
1061
+
কখনও কখনও, আপনি একটি [Effect](/learn/synchronizing-with-effects) এর ভিতরে একটি value ব্যবহার করতে চাইতে পারেন:
1065
1062
1066
1063
```js {4-7,10}
1067
1064
functionChatRoom({ roomId }) {
@@ -1078,19 +1075,18 @@ function ChatRoom({ roomId }) {
1078
1075
// ...
1079
1076
```
1080
1077
1081
-
This creates a problem. [Every reactive value must be declared as a dependency of your Effect.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) However, if you declare `options` as a dependency, it will cause your Effect to constantly reconnect to the chat room:
1082
-
1078
+
এটি একটি সমস্যা তৈরি করে। [আপনার Effect এর প্রতিটি reactive value অবশ্যই dependency হিসেবে ঘোষণা করতে হবে।](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) তবে, যদি আপনি `options` কে dependency হিসেবে ঘোষণা করেন, তাহলে এটি আপনার Effect কে ক্রমাগত চ্যাট রুমে পুনরায় সংযোগ করতে বাধ্য করবে:
1083
1079
1084
1080
```js {5}
1085
1081
useEffect(() => {
1086
1082
constconnection=createConnection(options);
1087
1083
connection.connect();
1088
1084
return () =>connection.disconnect();
1089
-
}, [options]); // 🔴 Problem: This dependency changes on every render
1085
+
}, [options]); // 🔴 সমস্যা: এই dependency প্রতিটি রেন্ডারে পরিবর্তিত হয়
1090
1086
// ...
1091
1087
```
1092
1088
1093
-
To solve this, you can wrap the object you need to call from an Effect in `useMemo`:
1089
+
এটি সমাধান করতে, আপনি Effect থেকে কল করার জন্য প্রয়োজনীয় object কে `useMemo` এ wrap করতে পারেন:
1094
1090
1095
1091
```js {4-9,16}
1096
1092
functionChatRoom({ roomId }) {
@@ -1101,42 +1097,40 @@ function ChatRoom({ roomId }) {
1101
1097
serverUrl:'https://localhost:1234',
1102
1098
roomId: roomId
1103
1099
};
1104
-
}, [roomId]); // ✅ Only changes when roomId changes
1100
+
}, [roomId]); // ✅ শুধুমাত্র roomId পরিবর্তিত হলে পরিবর্তিত হয়
1105
1101
1106
1102
useEffect(() => {
1107
1103
constconnection=createConnection(options);
1108
1104
connection.connect();
1109
1105
return () =>connection.disconnect();
1110
-
}, [options]); // ✅ Only changes when options changes
1106
+
}, [options]); // ✅ শুধুমাত্র options পরিবর্তিত হলে পরিবর্তিত হয়
1111
1107
// ...
1112
1108
```
1113
1109
1114
-
This ensures that the `options`object is the same between re-renders if `useMemo` returns the cached object.
1110
+
এটি নিশ্চিত করে যে `useMemo` cached object রিটার্ন করলে `options` object রি-রেন্ডারের মধ্যে একই থাকে।
1115
1111
1116
-
However, since`useMemo`is performance optimization, not a semantic guarantee, React may throw away the cached value if [there is a specific reason to do that](#caveats). This will also cause the effect to re-fire, **so it's even better to remove the need for a function dependency** by moving your object *inside* the Effect:
1112
+
তবে, যেহেতু`useMemo`একটি performance optimization, semantic guarantee নয়, React cached value পরিত্যাগ করতে পারে যদি [এটি করার একটি নির্দিষ্ট কারণ থাকে](#caveats)। এটি effect কে পুনরায় fire করতে বাধ্য করবে, **তাই আপনার object কে Effect এর *ভিতরে* সরিয়ে function dependency এর প্রয়োজন সম্পূর্ণভাবে সরানো আরও ভাল**:
1117
1113
1118
1114
```js {5-8,13}
1119
1115
functionChatRoom({ roomId }) {
1120
1116
const [message, setMessage] =useState('');
1121
1117
1122
1118
useEffect(() => {
1123
-
constoptions= { // ✅ No need for useMemo or object dependencies!
1119
+
constoptions= { // ✅ useMemo বা object dependencies এর প্রয়োজন নেই!
1124
1120
serverUrl:'https://localhost:1234',
1125
1121
roomId: roomId
1126
1122
}
1127
1123
1128
1124
constconnection=createConnection(options);
1129
1125
connection.connect();
1130
1126
return () =>connection.disconnect();
1131
-
}, [roomId]); // ✅ Only changes when roomId changes
1127
+
}, [roomId]); // ✅ শুধুমাত্র roomId পরিবর্তিত হলে পরিবর্তিত হয়
1132
1128
// ...
1133
1129
```
1134
1130
1135
-
Now your code is simpler and doesn't need `useMemo`. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
1131
+
এখন আপনার কোড সহজ এবং `useMemo` এর প্রয়োজন নেই। [Effect dependencies সরানো সম্পর্কে আরও জানুন।](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
1136
1132
1137
-
1138
-
### Memoizing a dependency of another Hook {/*memoizing-a-dependency-of-another-hook*/}
1139
-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
1133
+
### অন্য হুকের ডিপেন্ডেন্সিস মেমোইজ করা {/*memoizing-a-dependency-of-another-hook*/}
1140
1134
1141
1135
ধরুন আপনি এমন একটি calculation করছেন যা কম্পোনেন্ট বডির মধ্যে সরাসরি তৈরি করা একটি অবজেক্টের উপর নির্ভর করে:
1142
1136
@@ -1177,7 +1171,7 @@ function Dropdown({ allItems, text }) {
1177
1171
// ...
1178
1172
```
1179
1173
1180
-
এখন আপনার calculation `text` এর উপর সরাসরি নির্ভর করে (যা একটি string এবং “আকস্মিকভাবে” পরিবর্তিত হতে পারবে না)।
1174
+
এখন আপনার calculation `text` এর উপর সরাসরি নির্ভর করে (যা একটি string এবং "আকস্মিকভাবে" পরিবর্তিত হতে পারবে না)।
1181
1175
1182
1176
---
1183
1177
@@ -1353,7 +1347,7 @@ function TodoList({ todos, tab }) {
1353
1347
console.log([todos, tab]);
1354
1348
```
1355
1349
1356
-
তারপর আপনি কনসোলে ভিন্ন রি-রেন্ডারের array গুলির উপর রাইট-ক্লিক করে `“Store as a global variable”` নির্বাচন করতে পারেন উভয়ের জন্য। ধরুন প্রথমটি `temp1` হিসেবে এবং দ্বিতীয়টি `temp2` হিসেবে সংরক্ষিত হয়েছে, তাহলে আপনি browser এর কনসোল ব্যবহার করে পরীক্ষা করতে পারেন যে উভয় array প্রতিটি ডিপেন্ডেন্সিস একই কিনা:
1350
+
তারপর আপনি কনসোলে ভিন্ন রি-রেন্ডারের array গুলির উপর রাইট-ক্লিক করে `"Store as a global variable"` নির্বাচন করতে পারেন উভয়ের জন্য। ধরুন প্রথমটি `temp1` হিসেবে এবং দ্বিতীয়টি `temp2` হিসেবে সংরক্ষিত হয়েছে, তাহলে আপনি browser এর কনসোল ব্যবহার করে পরীক্ষা করতে পারেন যে উভয় array প্রতিটি ডিপেন্ডেন্সিস একই কিনা:
1357
1351
1358
1352
```js
1359
1353
Object.is(temp1[0], temp2[0]); // Is the first dependency the same between the arrays?
0 commit comments