From 226208ddf275fa4cce899a0a51e99275a55609c9 Mon Sep 17 00:00:00 2001 From: Habibur Rahman <115046415+habibium@users.noreply.github.com> Date: Sat, 26 Oct 2024 12:27:04 +0600 Subject: [PATCH] Update src/content/learn/synchronizing-with-effects.md Co-authored-by: Nafis Tiham Adjust translation in synchronizing-with-effects.md Revert React keyword back to English --- .../learn/synchronizing-with-effects.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 573ab0a2..7930ac15 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -32,7 +32,7 @@ Effects সম্পর্কে শুরুর আগে, আপনার র -এই পেজে এখানে এবং সামনে, বড় হাতের E যুক্ত "Effect" বা বাংলাতে "ইফেক্ট" উপরের React-specific সংজ্ঞা বোঝায়, অর্থাৎ রেন্ডারিংয়ের ফলে সৃষ্ট side effect। বিস্তৃত এই প্রোগ্রামিং concept টি বুঝাতে, আমরা এটিকে "side effect" (সাইড ইফেক্ট) বলব। +এই পেজে এখানে এবং সামনে, বড় হাতের E যুক্ত "Effect" উপরের React-specific সংজ্ঞা বোঝায়, অর্থাৎ রেন্ডারিংয়ের ফলে সৃষ্ট side effect। বিস্তৃত এই প্রোগ্রামিং concept টি বুঝাতে, আমরা এটিকে "side effect" (সাইড ইফেক্ট) বলব। @@ -64,7 +64,7 @@ import { useEffect } from 'react'; ```js {2-4} function MyComponent() { useEffect(() => { - // *প্রতিবার* রেন্ডারে এখানের code রান হবে + // Code here will run after *every* render }); return
; } @@ -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 করে রাখা:** @@ -879,7 +879,7 @@ export default function ChatRoom({ roomId }) { ['general'] ``` -রিয়েক্ট এই ইফেক্টটি রান করে, যা `'general'` চ্যাট রুমের সাথে কানেক্ট করে। +React এই ইফেক্টটি রান করে, যা `'general'` চ্যাট রুমের সাথে কানেক্ট করে। #### একই dependency নিয়ে রি-রেন্ডার {/*re-render-with-same-dependencies*/} @@ -890,7 +890,7 @@ export default function ChatRoom({ roomId }) { return

Welcome to general!

; ``` -রিয়েক্ট দেখে যে রেন্ডারিং আউটপুট একই আছে, তাই সে আর DOM আপডেট করে না। +React দেখে যে রেন্ডারিং আউটপুট একই আছে, তাই সে আর DOM আপডেট করে না। দ্বিতীয় রেন্ডারের ইফেক্টটি দেখতে এমনঃ @@ -905,7 +905,7 @@ export default function ChatRoom({ roomId }) { ['general'] ``` -রিয়েক্ট ২য় রেন্ডারের `['general']` এর সাথে ১ম রেন্ডারের `['general']` তুলনা করে। **যেহেতু সব dependecy একই আছে, তাই রিয়েক্ট ২য় রেন্ডারের ইফেক্টটিকে *ইগনোর* করে।** সেটিকে কখনোই কল করা হয়না। +React ২য় রেন্ডারের `['general']` এর সাথে ১ম রেন্ডারের `['general']` তুলনা করে। **যেহেতু সব dependecy একই আছে, তাই React ২য় রেন্ডারের ইফেক্টটিকে *ইগনোর* করে।** সেটিকে কখনোই কল করা হয়না। #### ভিন্ন dependencies নিয়ে রি-রেন্ডার {/*re-render-with-different-dependencies*/} @@ -916,7 +916,7 @@ export default function ChatRoom({ roomId }) { return

Welcome to travel!

; ``` -রিয়েক্ট `"Welcome to general"` কে `"Welcome to travel"` এ বদলাতে DOM আপডেট করে। +React `"Welcome to general"` কে `"Welcome to travel"` এ বদলাতে DOM আপডেট করে। ৩য় রেন্ডারের ইফেক্ট দেখতে এমন দেখাবেঃ @@ -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*/} @@ -952,12 +952,12 @@ export default function ChatRoom({ roomId }) { - ইফেক্ট নিজের রেন্ডারের কারণেই ঘটে, ইভেন্টের মতো নির্দিষ্ট কোনো ইন্টার‍্যাকশনের কারণে ঘটে না। - ইফেক্ট আপনাকে একটি কম্পোনেন্টের সাথে বাইরের কোনো সিস্টেমের (থার্ড-পার্টি API, নেটওয়ার্ক ইত্যাদি) সামঞ্জস্য তৈরি করতে দেয়। - ডিফল্ট অবস্থায়, ইফেক্ট প্রত্যেক রেন্ডারের (প্রথমটা সহ) পরে রান করে। -- যদি কোনো ইফেক্টের সকল dependecy সর্বশেষ রেন্ডারের অবিকল থাকে তাহলে রিয়েক্ট ইফেক্টটিকে স্কিপ করবে। +- যদি কোনো ইফেক্টের সকল dependecy সর্বশেষ রেন্ডারের অবিকল থাকে তাহলে React ইফেক্টটিকে স্কিপ করবে। - আপনি dependencies "বাছাই করতে" পারবেন না। সেগুলো ইফেক্টের ভিতরের কোড দ্বারা নির্ধারিত হয়ে থাকে। - খালি dependecy অ্যারে (`[]`) এর সম্পর্ক হলো কম্পোনেন্ট "mounting" এর সাথে অর্থাৎ, যখন সেটি স্ক্রিনে অ্যাড করা হয় তার সাথে। -- Strict Mode-এ, রিয়েক্ট আপনার ইফেক্টসমূহকে ভালোভাবে পরীক্ষা করার জন্য কম্পোনেন্টসমূহকে দুইবার করে মাউন্ট করে (এটা শুধু ডেভেলপমেন্টের সময়ই!)। +- Strict Mode-এ, React আপনার ইফেক্টসমূহকে ভালোভাবে পরীক্ষা করার জন্য কম্পোনেন্টসমূহকে দুইবার করে মাউন্ট করে (এটা শুধু ডেভেলপমেন্টের সময়ই!)। - যদি আপনার ইফেক্ট বারংবার মাউন্টিংয়ের ফলে ব্রেক করে, এতে বুঝা যায় আপনার একটি ক্লিন-আপ ফাংশন লিখতে হবে। -- ইফেক্ট পরবর্তীবার রান করার পূর্বে এবং কম্পোনেন্ট আনমাউন্টিংয়ের এর সময় রিয়েক্ট আপনার ক্লিন-আপ ফাংশন কল করে। +- ইফেক্ট পরবর্তীবার রান করার পূর্বে এবং কম্পোনেন্ট আনমাউন্টিংয়ের এর সময় React আপনার ক্লিন-আপ ফাংশন কল করে।