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
Copy file name to clipboardExpand all lines: src/content/learn/synchronizing-with-effects.md
+13-13Lines changed: 13 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -32,7 +32,7 @@ Effects সম্পর্কে শুরুর আগে, আপনার র
32
32
33
33
<Note>
34
34
35
-
এই পেজে এখানে এবং সামনে, বড় হাতের E যুক্ত "Effect" বা বাংলাতে "ইফেক্ট" উপরের React-specific সংজ্ঞা বোঝায়, অর্থাৎ রেন্ডারিংয়ের ফলে সৃষ্ট side effect। বিস্তৃত এই প্রোগ্রামিং concept টি বুঝাতে, আমরা এটিকে "side effect" (সাইড ইফেক্ট) বলব।
35
+
এই পেজে এখানে এবং সামনে, বড় হাতের E যুক্ত "Effect" উপরের React-specific সংজ্ঞা বোঝায়, অর্থাৎ রেন্ডারিংয়ের ফলে সৃষ্ট side effect। বিস্তৃত এই প্রোগ্রামিং concept টি বুঝাতে, আমরা এটিকে "side effect" (সাইড ইফেক্ট) বলব।
36
36
37
37
</Note>
38
38
@@ -64,7 +64,7 @@ import { useEffect } from 'react';
64
64
```js {2-4}
65
65
functionMyComponent() {
66
66
useEffect(() => {
67
-
//*প্রতিবার* রেন্ডারে এখানের code রান হবে
67
+
//Code here will run after *every* render
68
68
});
69
69
return<div />;
70
70
}
@@ -135,7 +135,7 @@ video { width: 250px; }
135
135
136
136
এই কোডটি সঠিক না হওয়ার কারণ হলো এটি রেন্ডারিং এর সময় DOM node এর সাথে কিছু একটা করার চেষ্টা করে। React এ, [রেন্ডারিং JSX এর pure calculation হওয়া উচিত](/learn/keeping-components-pure) এবং DOM কে modify করে এমন কোন side effects থাকা উচিত নয়।
137
137
138
-
উপরন্তু, যখন `VideoPlayer` কে প্রথমবারের জন্য call করা হয়, এটির DOM তখন exist করে না! `play()` বা `pause()` করার জন্য এখানে কোন DOM node নাই, কারণ React জানে না কি DOM তৈরি হবে যতক্ষণ না আপনি JSX রিটার্ন করেন।
138
+
উপরন্তু, যখন `VideoPlayer` কে প্রথমবারের জন্য call করা হয়, এটির DOM তখন exist করে না! `play()` বা `pause()` করার জন্য এখানে কোন DOM node নাই, কারণ React জানে না কী DOM তৈরি হবে যতক্ষণ না আপনি JSX রিটার্ন করেন।
139
139
140
140
এখানে সমাধানটি হলো **রেন্ডারিং calculation এর বাইরে সরানোর জন্য `useEffect` এর দ্বারা side effect টি wrap করে রাখা:**
রিয়েক্ট ২য় রেন্ডারের `['general']` এর সাথে ১ম রেন্ডারের `['general']` তুলনা করে। **যেহেতু সব dependecy একই আছে, তাই রিয়েক্ট ২য় রেন্ডারের ইফেক্টটিকে *ইগনোর* করে।** সেটিকে কখনোই কল করা হয়না।
908
+
React ২য় রেন্ডারের `['general']` এর সাথে ১ম রেন্ডারের `['general']` তুলনা করে। **যেহেতু সব dependecy একই আছে, তাই React ২য় রেন্ডারের ইফেক্টটিকে *ইগনোর* করে।** সেটিকে কখনোই কল করা হয়না।
909
909
910
910
#### ভিন্ন dependencies নিয়ে রি-রেন্ডার {/*re-render-with-different-dependencies*/}
রিয়েক্ট ৩য় রেন্ডারের `['travel']` এর সাথে ২য় রেন্ডারের `['general']` এর তুলনা করে। দেখা যাচ্ছে একটি dependency বদলে গেছেঃ `Object.is('travel', 'general')` এর ফলাফল `false` হয়। তাই এই ইফেক্টটি স্কিপ করা যাবেনা।
934
+
React ৩য় রেন্ডারের `['travel']` এর সাথে ২য় রেন্ডারের `['general']` এর তুলনা করে। দেখা যাচ্ছে একটি dependency বদলে গেছেঃ `Object.is('travel', 'general')` এর ফলাফল `false` হয়। তাই এই ইফেক্টটি স্কিপ করা যাবেনা।
935
935
936
-
**তৃতীয় রেন্ডারের ইফেক্ট প্রয়োগ করার আগে, রিয়েক্টকে সর্বশেষ যে ইফেক্ট _রান করেছিলো_ তা ক্লিন-আপ করতে হবে।** ২য় রেন্ডারের ইফেক্টটি স্কিপ করা হয়েছিলো, তাই রিয়েক্টকে প্রথম রেন্ডারের ইফেক্ট ক্লিন-আপ করতে হবে। আপনি যদি উপরে স্ক্রল করে ১ম রেন্ডারের ওখানে যান, দেখবেন যে এর ক্লিন-আপ `createConnection('general')` দিয়ে তৈরি করা কানেকশনের উপর `disconnect()` কল করে। এটি অ্যাপকে `'general'` চ্যাট রুম থেকে ডিসকানেক্ট করে দেয়।
936
+
**তৃতীয় রেন্ডারের ইফেক্ট প্রয়োগ করার আগে, React কে সর্বশেষ যে ইফেক্ট _রান করেছিলো_ তা ক্লিন-আপ করতে হবে।** ২য় রেন্ডারের ইফেক্টটি স্কিপ করা হয়েছিলো, তাই React কে প্রথম রেন্ডারের ইফেক্ট ক্লিন-আপ করতে হবে। আপনি যদি উপরে স্ক্রল করে ১ম রেন্ডারের ওখানে যান, দেখবেন যে এর ক্লিন-আপ `createConnection('general')` দিয়ে তৈরি করা কানেকশনের উপর `disconnect()` কল করে। এটি অ্যাপকে `'general'` চ্যাট রুম থেকে ডিসকানেক্ট করে দেয়।
937
937
938
-
এর পরে, রিয়েক্ট ৩য় রেন্ডারের ইফেক্ট রান করে এবং `'travel'` চ্যাট রুমের সাথে কানেক্ট করে।
938
+
এর পরে, React ৩য় রেন্ডারের ইফেক্ট রান করে এবং `'travel'` চ্যাট রুমের সাথে কানেক্ট করে।
0 commit comments