Skip to content

Commit

Permalink
Update src/content/learn/synchronizing-with-effects.md
Browse files Browse the repository at this point in the history
Co-authored-by: Nafis Tiham <nafistiham@gmail.com>

Adjust translation in synchronizing-with-effects.md

Revert React keyword back to English
  • Loading branch information
habibium committed Oct 26, 2024
1 parent 720cdbf commit 226208d
Showing 1 changed file with 13 additions and 13 deletions.
26 changes: 13 additions & 13 deletions src/content/learn/synchronizing-with-effects.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Effects সম্পর্কে শুরুর আগে, আপনার র

<Note>

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

</Note>

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

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

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

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

Expand Down Expand Up @@ -879,7 +879,7 @@ export default function ChatRoom({ roomId }) {
['general']
```
রিয়েক্ট এই ইফেক্টটি রান করে, যা `'general'` চ্যাট রুমের সাথে কানেক্ট করে।
React এই ইফেক্টটি রান করে, যা `'general'` চ্যাট রুমের সাথে কানেক্ট করে।
#### একই dependency নিয়ে রি-রেন্ডার {/*re-render-with-same-dependencies*/}
Expand All @@ -890,7 +890,7 @@ export default function ChatRoom({ roomId }) {
return <h1>Welcome to general!</h1>;
```
রিয়েক্ট দেখে যে রেন্ডারিং আউটপুট একই আছে, তাই সে আর DOM আপডেট করে না।
React দেখে যে রেন্ডারিং আউটপুট একই আছে, তাই সে আর DOM আপডেট করে না।
দ্বিতীয় রেন্ডারের ইফেক্টটি দেখতে এমনঃ
Expand All @@ -905,7 +905,7 @@ export default function ChatRoom({ roomId }) {
['general']
```
রিয়েক্ট ২য় রেন্ডারের `['general']` এর সাথে ১ম রেন্ডারের `['general']` তুলনা করে। **যেহেতু সব dependecy একই আছে, তাই রিয়েক্ট ২য় রেন্ডারের ইফেক্টটিকে *ইগনোর* করে।** সেটিকে কখনোই কল করা হয়না।
React ২য় রেন্ডারের `['general']` এর সাথে ১ম রেন্ডারের `['general']` তুলনা করে। **যেহেতু সব dependecy একই আছে, তাই React ২য় রেন্ডারের ইফেক্টটিকে *ইগনোর* করে।** সেটিকে কখনোই কল করা হয়না।
#### ভিন্ন dependencies নিয়ে রি-রেন্ডার {/*re-render-with-different-dependencies*/}
Expand All @@ -916,7 +916,7 @@ export default function ChatRoom({ roomId }) {
return <h1>Welcome to travel!</h1>;
```
রিয়েক্ট `"Welcome to general"` কে `"Welcome to travel"` এ বদলাতে DOM আপডেট করে।
React `"Welcome to general"` কে `"Welcome to travel"` এ বদলাতে DOM আপডেট করে।
৩য় রেন্ডারের ইফেক্ট দেখতে এমন দেখাবেঃ
Expand All @@ -931,11 +931,11 @@ export default function ChatRoom({ roomId }) {
['travel']
```
রিয়েক্ট ৩য় রেন্ডারের `['travel']` এর সাথে ২য় রেন্ডারের `['general']` এর তুলনা করে। দেখা যাচ্ছে একটি dependency বদলে গেছেঃ `Object.is('travel', 'general')` এর ফলাফল `false` হয়। তাই এই ইফেক্টটি স্কিপ করা যাবেনা।
React ৩য় রেন্ডারের `['travel']` এর সাথে ২য় রেন্ডারের `['general']` এর তুলনা করে। দেখা যাচ্ছে একটি dependency বদলে গেছেঃ `Object.is('travel', 'general')` এর ফলাফল `false` হয়। তাই এই ইফেক্টটি স্কিপ করা যাবেনা।
**তৃতীয় রেন্ডারের ইফেক্ট প্রয়োগ করার আগে, রিয়েক্টকে সর্বশেষ যে ইফেক্ট _রান করেছিলো_ তা ক্লিন-আপ করতে হবে।** ২য় রেন্ডারের ইফেক্টটি স্কিপ করা হয়েছিলো, তাই রিয়েক্টকে প্রথম রেন্ডারের ইফেক্ট ক্লিন-আপ করতে হবে। আপনি যদি উপরে স্ক্রল করে ১ম রেন্ডারের ওখানে যান, দেখবেন যে এর ক্লিন-আপ `createConnection('general')` দিয়ে তৈরি করা কানেকশনের উপর `disconnect()` কল করে। এটি অ্যাপকে `'general'` চ্যাট রুম থেকে ডিসকানেক্ট করে দেয়।
**তৃতীয় রেন্ডারের ইফেক্ট প্রয়োগ করার আগে, React কে সর্বশেষ যে ইফেক্ট _রান করেছিলো_ তা ক্লিন-আপ করতে হবে।** ২য় রেন্ডারের ইফেক্টটি স্কিপ করা হয়েছিলো, তাই React কে প্রথম রেন্ডারের ইফেক্ট ক্লিন-আপ করতে হবে। আপনি যদি উপরে স্ক্রল করে ১ম রেন্ডারের ওখানে যান, দেখবেন যে এর ক্লিন-আপ `createConnection('general')` দিয়ে তৈরি করা কানেকশনের উপর `disconnect()` কল করে। এটি অ্যাপকে `'general'` চ্যাট রুম থেকে ডিসকানেক্ট করে দেয়।
এর পরে, রিয়েক্ট ৩য় রেন্ডারের ইফেক্ট রান করে এবং `'travel'` চ্যাট রুমের সাথে কানেক্ট করে।
এর পরে, React ৩য় রেন্ডারের ইফেক্ট রান করে এবং `'travel'` চ্যাট রুমের সাথে কানেক্ট করে।
#### আনমাউন্ট {/*unmount*/}
Expand All @@ -952,12 +952,12 @@ export default function ChatRoom({ roomId }) {
- ইফেক্ট নিজের রেন্ডারের কারণেই ঘটে, ইভেন্টের মতো নির্দিষ্ট কোনো ইন্টার‍্যাকশনের কারণে ঘটে না।
- ইফেক্ট আপনাকে একটি কম্পোনেন্টের সাথে বাইরের কোনো সিস্টেমের (থার্ড-পার্টি API, নেটওয়ার্ক ইত্যাদি) সামঞ্জস্য তৈরি করতে দেয়।
- ডিফল্ট অবস্থায়, ইফেক্ট প্রত্যেক রেন্ডারের (প্রথমটা সহ) পরে রান করে।
- যদি কোনো ইফেক্টের সকল dependecy সর্বশেষ রেন্ডারের অবিকল থাকে তাহলে রিয়েক্ট ইফেক্টটিকে স্কিপ করবে।
- যদি কোনো ইফেক্টের সকল dependecy সর্বশেষ রেন্ডারের অবিকল থাকে তাহলে React ইফেক্টটিকে স্কিপ করবে।
- আপনি dependencies "বাছাই করতে" পারবেন না। সেগুলো ইফেক্টের ভিতরের কোড দ্বারা নির্ধারিত হয়ে থাকে।
- খালি dependecy অ্যারে (`[]`) এর সম্পর্ক হলো কম্পোনেন্ট "mounting" এর সাথে অর্থাৎ, যখন সেটি স্ক্রিনে অ্যাড করা হয় তার সাথে।
- Strict Mode-এ, রিয়েক্ট আপনার ইফেক্টসমূহকে ভালোভাবে পরীক্ষা করার জন্য কম্পোনেন্টসমূহকে দুইবার করে মাউন্ট করে (এটা শুধু ডেভেলপমেন্টের সময়ই!)।
- Strict Mode-এ, React আপনার ইফেক্টসমূহকে ভালোভাবে পরীক্ষা করার জন্য কম্পোনেন্টসমূহকে দুইবার করে মাউন্ট করে (এটা শুধু ডেভেলপমেন্টের সময়ই!)।
- যদি আপনার ইফেক্ট বারংবার মাউন্টিংয়ের ফলে ব্রেক করে, এতে বুঝা যায় আপনার একটি ক্লিন-আপ ফাংশন লিখতে হবে।
- ইফেক্ট পরবর্তীবার রান করার পূর্বে এবং কম্পোনেন্ট আনমাউন্টিংয়ের এর সময় রিয়েক্ট আপনার ক্লিন-আপ ফাংশন কল করে।
- ইফেক্ট পরবর্তীবার রান করার পূর্বে এবং কম্পোনেন্ট আনমাউন্টিংয়ের এর সময় React আপনার ক্লিন-আপ ফাংশন কল করে।
</Recap>
Expand Down

0 comments on commit 226208d

Please sign in to comment.