Skip to content

Commit 226208d

Browse files
committed
Update src/content/learn/synchronizing-with-effects.md
Co-authored-by: Nafis Tiham <[email protected]> Adjust translation in synchronizing-with-effects.md Revert React keyword back to English
1 parent 720cdbf commit 226208d

File tree

1 file changed

+13
-13
lines changed

1 file changed

+13
-13
lines changed

src/content/learn/synchronizing-with-effects.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ Effects সম্পর্কে শুরুর আগে, আপনার র
3232

3333
<Note>
3434

35-
এই পেজে এখানে এবং সামনে, বড় হাতের E যুক্ত "Effect" বা বাংলাতে "ইফেক্ট" উপরের React-specific সংজ্ঞা বোঝায়, অর্থাৎ রেন্ডারিংয়ের ফলে সৃষ্ট side effect। বিস্তৃত এই প্রোগ্রামিং concept টি বুঝাতে, আমরা এটিকে "side effect" (সাইড ইফেক্ট) বলব।
35+
এই পেজে এখানে এবং সামনে, বড় হাতের E যুক্ত "Effect" উপরের React-specific সংজ্ঞা বোঝায়, অর্থাৎ রেন্ডারিংয়ের ফলে সৃষ্ট side effect। বিস্তৃত এই প্রোগ্রামিং concept টি বুঝাতে, আমরা এটিকে "side effect" (সাইড ইফেক্ট) বলব।
3636

3737
</Note>
3838

@@ -64,7 +64,7 @@ import { useEffect } from 'react';
6464
```js {2-4}
6565
function MyComponent() {
6666
useEffect(() => {
67-
// *প্রতিবার* রেন্ডারে এখানের code রান হবে
67+
// Code here will run after *every* render
6868
});
6969
return <div />;
7070
}
@@ -135,7 +135,7 @@ video { width: 250px; }
135135

136136
এই কোডটি সঠিক না হওয়ার কারণ হলো এটি রেন্ডারিং এর সময় DOM node এর সাথে কিছু একটা করার চেষ্টা করে। React এ, [রেন্ডারিং JSX এর pure calculation হওয়া উচিত](/learn/keeping-components-pure) এবং DOM কে modify করে এমন কোন side effects থাকা উচিত নয়।
137137

138-
উপরন্তু, যখন `VideoPlayer` কে প্রথমবারের জন্য call করা হয়, এটির DOM তখন exist করে না! `play()` বা `pause()` করার জন্য এখানে কোন DOM node নাই, কারণ React জানে না কি DOM তৈরি হবে যতক্ষণ না আপনি JSX রিটার্ন করেন।
138+
উপরন্তু, যখন `VideoPlayer` কে প্রথমবারের জন্য call করা হয়, এটির DOM তখন exist করে না! `play()` বা `pause()` করার জন্য এখানে কোন DOM node নাই, কারণ React জানে না কী DOM তৈরি হবে যতক্ষণ না আপনি JSX রিটার্ন করেন।
139139

140140
এখানে সমাধানটি হলো **রেন্ডারিং calculation এর বাইরে সরানোর জন্য `useEffect` এর দ্বারা side effect টি wrap করে রাখা:**
141141

@@ -879,7 +879,7 @@ export default function ChatRoom({ roomId }) {
879879
['general']
880880
```
881881
882-
রিয়েক্ট এই ইফেক্টটি রান করে, যা `'general'` চ্যাট রুমের সাথে কানেক্ট করে।
882+
React এই ইফেক্টটি রান করে, যা `'general'` চ্যাট রুমের সাথে কানেক্ট করে।
883883
884884
#### একই dependency নিয়ে রি-রেন্ডার {/*re-render-with-same-dependencies*/}
885885
@@ -890,7 +890,7 @@ export default function ChatRoom({ roomId }) {
890890
return <h1>Welcome to general!</h1>;
891891
```
892892
893-
রিয়েক্ট দেখে যে রেন্ডারিং আউটপুট একই আছে, তাই সে আর DOM আপডেট করে না।
893+
React দেখে যে রেন্ডারিং আউটপুট একই আছে, তাই সে আর DOM আপডেট করে না।
894894
895895
দ্বিতীয় রেন্ডারের ইফেক্টটি দেখতে এমনঃ
896896
@@ -905,7 +905,7 @@ export default function ChatRoom({ roomId }) {
905905
['general']
906906
```
907907
908-
রিয়েক্ট ২য় রেন্ডারের `['general']` এর সাথে ১ম রেন্ডারের `['general']` তুলনা করে। **যেহেতু সব dependecy একই আছে, তাই রিয়েক্ট ২য় রেন্ডারের ইফেক্টটিকে *ইগনোর* করে।** সেটিকে কখনোই কল করা হয়না।
908+
React ২য় রেন্ডারের `['general']` এর সাথে ১ম রেন্ডারের `['general']` তুলনা করে। **যেহেতু সব dependecy একই আছে, তাই React ২য় রেন্ডারের ইফেক্টটিকে *ইগনোর* করে।** সেটিকে কখনোই কল করা হয়না।
909909
910910
#### ভিন্ন dependencies নিয়ে রি-রেন্ডার {/*re-render-with-different-dependencies*/}
911911
@@ -916,7 +916,7 @@ export default function ChatRoom({ roomId }) {
916916
return <h1>Welcome to travel!</h1>;
917917
```
918918
919-
রিয়েক্ট `"Welcome to general"` কে `"Welcome to travel"` এ বদলাতে DOM আপডেট করে।
919+
React `"Welcome to general"` কে `"Welcome to travel"` এ বদলাতে DOM আপডেট করে।
920920
921921
৩য় রেন্ডারের ইফেক্ট দেখতে এমন দেখাবেঃ
922922
@@ -931,11 +931,11 @@ export default function ChatRoom({ roomId }) {
931931
['travel']
932932
```
933933
934-
রিয়েক্ট ৩য় রেন্ডারের `['travel']` এর সাথে ২য় রেন্ডারের `['general']` এর তুলনা করে। দেখা যাচ্ছে একটি dependency বদলে গেছেঃ `Object.is('travel', 'general')` এর ফলাফল `false` হয়। তাই এই ইফেক্টটি স্কিপ করা যাবেনা।
934+
React ৩য় রেন্ডারের `['travel']` এর সাথে ২য় রেন্ডারের `['general']` এর তুলনা করে। দেখা যাচ্ছে একটি dependency বদলে গেছেঃ `Object.is('travel', 'general')` এর ফলাফল `false` হয়। তাই এই ইফেক্টটি স্কিপ করা যাবেনা।
935935
936-
**তৃতীয় রেন্ডারের ইফেক্ট প্রয়োগ করার আগে, রিয়েক্টকে সর্বশেষ যে ইফেক্ট _রান করেছিলো_ তা ক্লিন-আপ করতে হবে।** ২য় রেন্ডারের ইফেক্টটি স্কিপ করা হয়েছিলো, তাই রিয়েক্টকে প্রথম রেন্ডারের ইফেক্ট ক্লিন-আপ করতে হবে। আপনি যদি উপরে স্ক্রল করে ১ম রেন্ডারের ওখানে যান, দেখবেন যে এর ক্লিন-আপ `createConnection('general')` দিয়ে তৈরি করা কানেকশনের উপর `disconnect()` কল করে। এটি অ্যাপকে `'general'` চ্যাট রুম থেকে ডিসকানেক্ট করে দেয়।
936+
**তৃতীয় রেন্ডারের ইফেক্ট প্রয়োগ করার আগে, React কে সর্বশেষ যে ইফেক্ট _রান করেছিলো_ তা ক্লিন-আপ করতে হবে।** ২য় রেন্ডারের ইফেক্টটি স্কিপ করা হয়েছিলো, তাই React কে প্রথম রেন্ডারের ইফেক্ট ক্লিন-আপ করতে হবে। আপনি যদি উপরে স্ক্রল করে ১ম রেন্ডারের ওখানে যান, দেখবেন যে এর ক্লিন-আপ `createConnection('general')` দিয়ে তৈরি করা কানেকশনের উপর `disconnect()` কল করে। এটি অ্যাপকে `'general'` চ্যাট রুম থেকে ডিসকানেক্ট করে দেয়।
937937
938-
এর পরে, রিয়েক্ট ৩য় রেন্ডারের ইফেক্ট রান করে এবং `'travel'` চ্যাট রুমের সাথে কানেক্ট করে।
938+
এর পরে, React ৩য় রেন্ডারের ইফেক্ট রান করে এবং `'travel'` চ্যাট রুমের সাথে কানেক্ট করে।
939939
940940
#### আনমাউন্ট {/*unmount*/}
941941
@@ -952,12 +952,12 @@ export default function ChatRoom({ roomId }) {
952952
- ইফেক্ট নিজের রেন্ডারের কারণেই ঘটে, ইভেন্টের মতো নির্দিষ্ট কোনো ইন্টার‍্যাকশনের কারণে ঘটে না।
953953
- ইফেক্ট আপনাকে একটি কম্পোনেন্টের সাথে বাইরের কোনো সিস্টেমের (থার্ড-পার্টি API, নেটওয়ার্ক ইত্যাদি) সামঞ্জস্য তৈরি করতে দেয়।
954954
- ডিফল্ট অবস্থায়, ইফেক্ট প্রত্যেক রেন্ডারের (প্রথমটা সহ) পরে রান করে।
955-
- যদি কোনো ইফেক্টের সকল dependecy সর্বশেষ রেন্ডারের অবিকল থাকে তাহলে রিয়েক্ট ইফেক্টটিকে স্কিপ করবে।
955+
- যদি কোনো ইফেক্টের সকল dependecy সর্বশেষ রেন্ডারের অবিকল থাকে তাহলে React ইফেক্টটিকে স্কিপ করবে।
956956
- আপনি dependencies "বাছাই করতে" পারবেন না। সেগুলো ইফেক্টের ভিতরের কোড দ্বারা নির্ধারিত হয়ে থাকে।
957957
- খালি dependecy অ্যারে (`[]`) এর সম্পর্ক হলো কম্পোনেন্ট "mounting" এর সাথে অর্থাৎ, যখন সেটি স্ক্রিনে অ্যাড করা হয় তার সাথে।
958-
- Strict Mode-এ, রিয়েক্ট আপনার ইফেক্টসমূহকে ভালোভাবে পরীক্ষা করার জন্য কম্পোনেন্টসমূহকে দুইবার করে মাউন্ট করে (এটা শুধু ডেভেলপমেন্টের সময়ই!)।
958+
- Strict Mode-এ, React আপনার ইফেক্টসমূহকে ভালোভাবে পরীক্ষা করার জন্য কম্পোনেন্টসমূহকে দুইবার করে মাউন্ট করে (এটা শুধু ডেভেলপমেন্টের সময়ই!)।
959959
- যদি আপনার ইফেক্ট বারংবার মাউন্টিংয়ের ফলে ব্রেক করে, এতে বুঝা যায় আপনার একটি ক্লিন-আপ ফাংশন লিখতে হবে।
960-
- ইফেক্ট পরবর্তীবার রান করার পূর্বে এবং কম্পোনেন্ট আনমাউন্টিংয়ের এর সময় রিয়েক্ট আপনার ক্লিন-আপ ফাংশন কল করে।
960+
- ইফেক্ট পরবর্তীবার রান করার পূর্বে এবং কম্পোনেন্ট আনমাউন্টিংয়ের এর সময় React আপনার ক্লিন-আপ ফাংশন কল করে।
961961
962962
</Recap>
963963

0 commit comments

Comments
 (0)