From 63ac2f680c222412494cba2f3ac1ea2213507b57 Mon Sep 17 00:00:00 2001 From: Taha Date: Sun, 29 Oct 2023 18:24:17 +0600 Subject: [PATCH 01/72] synchronizing-with-effects --- src/content/learn/synchronizing-with-effects.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 7319fdb4f..322722a66 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -10,11 +10,11 @@ Some components need to synchronize with external systems. For example, you migh -- What Effects are -- How Effects are different from events -- How to declare an Effect in your component -- How to skip re-running an Effect unnecessarily -- Why Effects run twice in development and how to fix them +- Effects কি +- কীভাবে Effects গুলো events থেকে আলাদা +- কীভাবে আপনার কম্পোনেন্টে Effect ডিক্লার করবেন +- কীভাবে অকারণে কোন Effect রি-রানিং এড়াবেন +- কেন ডেভেলপমেন্টের সময় Effects দুইবার রান হয় এবং সেগুল কীভাবে ঠিক করবেন From ecc0979476bb3aa73206fc0a62f16bfe92119a4b Mon Sep 17 00:00:00 2001 From: Taha Date: Sun, 29 Oct 2023 18:26:13 +0600 Subject: [PATCH 02/72] synchronizing-with-effects --- src/content/learn/synchronizing-with-effects.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 322722a66..5c90a68ac 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -11,7 +11,7 @@ Some components need to synchronize with external systems. For example, you migh - Effects কি -- কীভাবে Effects গুলো events থেকে আলাদা +- কীভাবে Effect গুলো events থেকে আলাদা - কীভাবে আপনার কম্পোনেন্টে Effect ডিক্লার করবেন - কীভাবে অকারণে কোন Effect রি-রানিং এড়াবেন - কেন ডেভেলপমেন্টের সময় Effects দুইবার রান হয় এবং সেগুল কীভাবে ঠিক করবেন From 2d018cb3ed3e4075d1e770d98fb6f14f6639681e Mon Sep 17 00:00:00 2001 From: Taha Date: Sun, 29 Oct 2023 19:50:04 +0600 Subject: [PATCH 03/72] title and intro --- src/content/learn/synchronizing-with-effects.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 5c90a68ac..4999ae73a 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -1,16 +1,16 @@ --- -title: 'Synchronizing with Effects' +title: 'Effects এর সাথে Synchronizing' --- -Some components need to synchronize with external systems. For example, you might want to control a non-React component based on the React state, set up a server connection, or send an analytics log when a component appears on the screen. *Effects* let you run some code after rendering so that you can synchronize your component with some system outside of React. +কিছু কম্পোনেন্ট কে বাইরের সিস্টেমের সাথে সিংক্রোনাইজ করতে হতে পারে। উদাহরণস্বরূপ, আপনি নন-রিয়েক্ট কম্পোনেন্টকে রিয়েক্ট state এর উপর নির্ভর করে নিয়ন্ত্রণ করতে চান, একটি সার্ভার সংযোগ স্থাপন করতে চান, বা যখন একটি কম্পোনেন্ট স্ক্রিনে দেখা যায় তখন একটি বিশ্লেষণ লগ পাঠাতে চান। *Effects* আপনাকে রেন্ডার এর পর কিছু কোড রান করার সুযোগ দেয় যাতে আপনি আপনার কম্পোনেন্টটি রিয়েক্টের বাইরে কোন সিস্টেম এর সঙ্গে সিংক্রোনাইজ করতে পারেন। -- Effects কি +- Effects কী - কীভাবে Effect গুলো events থেকে আলাদা - কীভাবে আপনার কম্পোনেন্টে Effect ডিক্লার করবেন - কীভাবে অকারণে কোন Effect রি-রানিং এড়াবেন @@ -18,9 +18,9 @@ Some components need to synchronize with external systems. For example, you migh -## What are Effects and how are they different from events? {/*what-are-effects-and-how-are-they-different-from-events*/} +## Effects কী এবং কীভাবে সেগুলো events থেকে আলাদা? {/*what-are-effects-and-how-are-they-different-from-events*/} -Before getting to Effects, you need to be familiar with two types of logic inside React components: +Effects সম্পর্কে শুরুর আগে, আপনার রিয়েক্ট কম্পোনেন্টের ভেতরের দুই প্রকার লজিকের সাথে পরিচিয় থাকতে হবে: - **Rendering code** (introduced in [Describing the UI](/learn/describing-the-ui)) lives at the top level of your component. This is where you take the props and state, transform them, and return the JSX you want to see on the screen. [Rendering code must be pure.](/learn/keeping-components-pure) Like a math formula, it should only _calculate_ the result, but not do anything else. From e3c79b35b2d09c683e4a9aefa323d7db4cfd6e27 Mon Sep 17 00:00:00 2001 From: Taha Date: Wed, 1 Nov 2023 19:19:52 +0600 Subject: [PATCH 04/72] Rendering code of effects --- src/content/learn/synchronizing-with-effects.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 4999ae73a..3dcb7449a 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -22,7 +22,7 @@ title: 'Effects এর সাথে Synchronizing' Effects সম্পর্কে শুরুর আগে, আপনার রিয়েক্ট কম্পোনেন্টের ভেতরের দুই প্রকার লজিকের সাথে পরিচিয় থাকতে হবে: -- **Rendering code** (introduced in [Describing the UI](/learn/describing-the-ui)) lives at the top level of your component. This is where you take the props and state, transform them, and return the JSX you want to see on the screen. [Rendering code must be pure.](/learn/keeping-components-pure) Like a math formula, it should only _calculate_ the result, but not do anything else. +- **রেন্ডারিং কোড** (যা [UI এর বর্ণনা](/learn/describing-the-ui) অধ্যায়ে পরিচয় দেওয়া হয়েছে ) আপনার কম্পোনেন্টের টপ লেভেলে থাকে। এখানে আপনি props এবং state নেন, পরিবর্তন করেন, এবং আপনি যে JSX দেখতে চান তা রিটার্ন করেন। অংকের সূত্রের মত [রেন্ডারিং কোড অবশ্যই পিওর হতে হবে](/learn/keeping-components-pure), শুধুমাত্র ফলাফল গণনা করতে হবে, কিন্তু অন্য কিছু করতে হবে না। - **Event handlers** (introduced in [Adding Interactivity](/learn/adding-interactivity)) are nested functions inside your components that *do* things rather than just calculate them. An event handler might update an input field, submit an HTTP POST request to buy a product, or navigate the user to another screen. Event handlers contain ["side effects"](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) (they change the program's state) caused by a specific user action (for example, a button click or typing). From 2cbcb67bf6ea14680ce22fbf8f9ef3962de509fa Mon Sep 17 00:00:00 2001 From: Taha Date: Wed, 1 Nov 2023 23:31:36 +0600 Subject: [PATCH 05/72] change on rendering code --- src/content/learn/synchronizing-with-effects.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 3dcb7449a..bb3fbf886 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -22,7 +22,7 @@ title: 'Effects এর সাথে Synchronizing' Effects সম্পর্কে শুরুর আগে, আপনার রিয়েক্ট কম্পোনেন্টের ভেতরের দুই প্রকার লজিকের সাথে পরিচিয় থাকতে হবে: -- **রেন্ডারিং কোড** (যা [UI এর বর্ণনা](/learn/describing-the-ui) অধ্যায়ে পরিচয় দেওয়া হয়েছে ) আপনার কম্পোনেন্টের টপ লেভেলে থাকে। এখানে আপনি props এবং state নেন, পরিবর্তন করেন, এবং আপনি যে JSX দেখতে চান তা রিটার্ন করেন। অংকের সূত্রের মত [রেন্ডারিং কোড অবশ্যই পিওর হতে হবে](/learn/keeping-components-pure), শুধুমাত্র ফলাফল গণনা করতে হবে, কিন্তু অন্য কিছু করতে হবে না। +- **রেন্ডারিং কোড** (যা [UI এর বর্ণনা](/learn/describing-the-ui) অধ্যায়ে পরিচয় দেওয়া হয়েছে ) আপনার কম্পোনেন্টের টপ লেভেলে থাকে। এটি সেখান থাকে, যেখানে আপনি props এবং state নেন, তাদের পরিবর্তন করেন, এবং আপনি যে JSX দেখতে চান তা রিটার্ন করেন। [রেন্ডারিং কোড অবশ্যই পিওর হতে হবে](/learn/keeping-components-pure) যেমন একটি গণিত সূত্র, শুধুমাত্র ফলাফল গণনা করতে হবে, কিন্তু অন্য কিছু করতে হবে না। - **Event handlers** (introduced in [Adding Interactivity](/learn/adding-interactivity)) are nested functions inside your components that *do* things rather than just calculate them. An event handler might update an input field, submit an HTTP POST request to buy a product, or navigate the user to another screen. Event handlers contain ["side effects"](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) (they change the program's state) caused by a specific user action (for example, a button click or typing). From beea644b17164e4c5c1ea8ac6166d9254bb38876 Mon Sep 17 00:00:00 2001 From: Taha Date: Thu, 2 Nov 2023 00:28:31 +0600 Subject: [PATCH 06/72] Event handlers part of effect --- src/content/learn/synchronizing-with-effects.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index bb3fbf886..937b1c0b3 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -22,9 +22,9 @@ title: 'Effects এর সাথে Synchronizing' Effects সম্পর্কে শুরুর আগে, আপনার রিয়েক্ট কম্পোনেন্টের ভেতরের দুই প্রকার লজিকের সাথে পরিচিয় থাকতে হবে: -- **রেন্ডারিং কোড** (যা [UI এর বর্ণনা](/learn/describing-the-ui) অধ্যায়ে পরিচয় দেওয়া হয়েছে ) আপনার কম্পোনেন্টের টপ লেভেলে থাকে। এটি সেখান থাকে, যেখানে আপনি props এবং state নেন, তাদের পরিবর্তন করেন, এবং আপনি যে JSX দেখতে চান তা রিটার্ন করেন। [রেন্ডারিং কোড অবশ্যই পিওর হতে হবে](/learn/keeping-components-pure) যেমন একটি গণিত সূত্র, শুধুমাত্র ফলাফল গণনা করতে হবে, কিন্তু অন্য কিছু করতে হবে না। +- **Rendering code** (যা [UI এর বর্ণনা](/learn/describing-the-ui) অধ্যায়ে পরিচয় দেওয়া হয়েছে ) আপনার কম্পোনেন্টের টপ লেভেলে থাকে। এটি সেখানে থাকে, যেখানে আপনি props এবং state নেন, তাদের পরিবর্তন করেন, এবং আপনি যে JSX দেখতে চান তা রিটার্ন করেন। [Rendering code অবশ্যই পিওর হতে হবে](/learn/keeping-components-pure) একটি গণিত সূত্র মতো, যে সূত্রটি শুধু ফলাফিল হিসাব করে, কিন্তু অন্য কিছু করে না। -- **Event handlers** (introduced in [Adding Interactivity](/learn/adding-interactivity)) are nested functions inside your components that *do* things rather than just calculate them. An event handler might update an input field, submit an HTTP POST request to buy a product, or navigate the user to another screen. Event handlers contain ["side effects"](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) (they change the program's state) caused by a specific user action (for example, a button click or typing). +- **Event handlers** (যা [Adding Interactivity](/learn/adding-interactivity) অধ্যায়ে পরিচয় দেওয়া হয়েছে) আপনার কম্পোনেন্টের ভিতরে একটি নেস্টেড ফাংশন যা কেবল সেগুলি গণনা করার পরিবর্তে অন্য কিছু *করে*। এটি যে কাজগুলি করতে পারে সেগুলি হতে পারে একটি ইনপুট ফিল্ড আপডেট করা, একটি পণ্য কিনতে HTTP POST request দেওয়া, অথবা ব্যবহারকারীকে অন্য একটি স্ক্রিনে navigate করা।Event handler এ ["side effects"](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) থাকে (এগুলো program এর অবস্থা পরিবর্তন করে) যা নির্দিষ্ট ব্যবহারকারীর ক্রিয়া (উদাহরণস্বরূপ button click অথবা typing)। Sometimes this isn't enough. Consider a `ChatRoom` component that must connect to the chat server whenever it's visible on the screen. Connecting to a server is not a pure calculation (it's a side effect) so it can't happen during rendering. However, there is no single particular event like a click that causes `ChatRoom` to be displayed. From 36ade1e3cbba0d251f102b2add2010eb150d29c8 Mon Sep 17 00:00:00 2001 From: Taha Date: Thu, 2 Nov 2023 00:32:12 +0600 Subject: [PATCH 07/72] Event handlers part of effect --- src/content/learn/synchronizing-with-effects.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 937b1c0b3..bb0c59882 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -24,7 +24,7 @@ Effects সম্পর্কে শুরুর আগে, আপনার র - **Rendering code** (যা [UI এর বর্ণনা](/learn/describing-the-ui) অধ্যায়ে পরিচয় দেওয়া হয়েছে ) আপনার কম্পোনেন্টের টপ লেভেলে থাকে। এটি সেখানে থাকে, যেখানে আপনি props এবং state নেন, তাদের পরিবর্তন করেন, এবং আপনি যে JSX দেখতে চান তা রিটার্ন করেন। [Rendering code অবশ্যই পিওর হতে হবে](/learn/keeping-components-pure) একটি গণিত সূত্র মতো, যে সূত্রটি শুধু ফলাফিল হিসাব করে, কিন্তু অন্য কিছু করে না। -- **Event handlers** (যা [Adding Interactivity](/learn/adding-interactivity) অধ্যায়ে পরিচয় দেওয়া হয়েছে) আপনার কম্পোনেন্টের ভিতরে একটি নেস্টেড ফাংশন যা কেবল সেগুলি গণনা করার পরিবর্তে অন্য কিছু *করে*। এটি যে কাজগুলি করতে পারে সেগুলি হতে পারে একটি ইনপুট ফিল্ড আপডেট করা, একটি পণ্য কিনতে HTTP POST request দেওয়া, অথবা ব্যবহারকারীকে অন্য একটি স্ক্রিনে navigate করা।Event handler এ ["side effects"](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) থাকে (এগুলো program এর অবস্থা পরিবর্তন করে) যা নির্দিষ্ট ব্যবহারকারীর ক্রিয়া (উদাহরণস্বরূপ button click অথবা typing)। +- **Event handlers** (যা [Adding Interactivity](/learn/adding-interactivity) অধ্যায়ে পরিচয় দেওয়া হয়েছে) আপনার কম্পোনেন্টের ভিতরে একটি নেস্টেড ফাংশন যা কেবল সেগুলি গণনা করার পরিবর্তে অন্য কিছু *করে*। এটি যে কাজগুলি করতে পারে সেগুলি হতে পারে একটি ইনপুট ফিল্ড আপডেট করা, একটি পণ্য কিনতে HTTP POST request দেওয়া, অথবা ব্যবহারকারীকে অন্য একটি স্ক্রিনে navigate করা। Event handler এ ["side effects"](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) থাকে (এগুলো program এর অবস্থা পরিবর্তন করে) যা নির্দিষ্ট ব্যবহারকারীর ক্রিয়া (উদাহরণস্বরূপ button click অথবা typing)। Sometimes this isn't enough. Consider a `ChatRoom` component that must connect to the chat server whenever it's visible on the screen. Connecting to a server is not a pure calculation (it's a side effect) so it can't happen during rendering. However, there is no single particular event like a click that causes `ChatRoom` to be displayed. From 8c2dfdde4cccb16bfe7aa6a54dbc1a2a8d300b72 Mon Sep 17 00:00:00 2001 From: Taha Date: Sat, 4 Nov 2023 16:08:22 +0600 Subject: [PATCH 08/72] before how to write an Effect --- src/content/learn/synchronizing-with-effects.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index bb0c59882..0ebd9f059 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -26,26 +26,26 @@ Effects সম্পর্কে শুরুর আগে, আপনার র - **Event handlers** (যা [Adding Interactivity](/learn/adding-interactivity) অধ্যায়ে পরিচয় দেওয়া হয়েছে) আপনার কম্পোনেন্টের ভিতরে একটি নেস্টেড ফাংশন যা কেবল সেগুলি গণনা করার পরিবর্তে অন্য কিছু *করে*। এটি যে কাজগুলি করতে পারে সেগুলি হতে পারে একটি ইনপুট ফিল্ড আপডেট করা, একটি পণ্য কিনতে HTTP POST request দেওয়া, অথবা ব্যবহারকারীকে অন্য একটি স্ক্রিনে navigate করা। Event handler এ ["side effects"](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) থাকে (এগুলো program এর অবস্থা পরিবর্তন করে) যা নির্দিষ্ট ব্যবহারকারীর ক্রিয়া (উদাহরণস্বরূপ button click অথবা typing)। -Sometimes this isn't enough. Consider a `ChatRoom` component that must connect to the chat server whenever it's visible on the screen. Connecting to a server is not a pure calculation (it's a side effect) so it can't happen during rendering. However, there is no single particular event like a click that causes `ChatRoom` to be displayed. +কখনও কখনও এটা যথেষ্ট নয়। একটি `ChatRoom` কম্পোনেন্ট চিন্তা করুন যখনই স্ক্রিনে দৃশ্যমান হয় তখন অবশ্যই চ্যাট সার্ভারের সাথে সংযোগ করতে হয়। সার্ভারে সংযোগ স্থাপন pure calculation নয় (এটি একটি side effect) তাই এটি রেন্ডার এর সময় সম্পন্ন হয় না। যাইহোক, ক্লিক ইভেন্ট এর মত কোন নির্দিষ্ট ইভেন্ট নাই যা `ChatRoom` ডিসপ্লে করায়। ***Effects* let you specify side effects that are caused by rendering itself, rather than by a particular event.** Sending a message in the chat is an *event* because it is directly caused by the user clicking a specific button. However, setting up a server connection is an *Effect* because it should happen no matter which interaction caused the component to appear. Effects run at the end of a [commit](/learn/render-and-commit) after the screen updates. This is a good time to synchronize the React components with some external system (like network or a third-party library). -Here and later in this text, capitalized "Effect" refers to the React-specific definition above, i.e. a side effect caused by rendering. To refer to the broader programming concept, we'll say "side effect". +এখানে এবং পরে এই পাঠটিতে, বড় হাতের "Effect" উপরের React-specific সংজ্ঞা বোঝায়, অর্থাৎ রেন্ডারিংয়ের ফলে সৃষ্ট side effect। বিস্তৃত এই প্রোগ্রামিং concept টি বুঝাতে, আমরা এটিকে "side effect" বলব। -## You might not need an Effect {/*you-might-not-need-an-effect*/} +## আপনার কোন Effect প্রয়োজন নাও হতে পারে {/*you-might-not-need-an-effect*/} -**Don't rush to add Effects to your components.** Keep in mind that Effects are typically used to "step out" of your React code and synchronize with some *external* system. This includes browser APIs, third-party widgets, network, and so on. If your Effect only adjusts some state based on other state, [you might not need an Effect.](/learn/you-might-not-need-an-effect) +**অপ্রয়োজনে আপনার component এ Effects অ্যাড করবেন না।** মনে রাখবেন যে Effect গুলি সাধারণত আপনার React কোডের "step out" করতে এবং কিছু *বাহ্যিক* সিস্টামের সাথে synchronize করতে ব্যবহৃত হয়। এর মধ্যে রয়েছে browser APIs, third-party widgets, network, এবং আরও অনেক কিছু। যদি আপনার Effect টি কেবল অন্য state এর উপর ভিত্তি করে কিছু state কে সামঞ্জস্য করে, [তবে আপনার কোন Effect প্রয়োজন নাও হতে পারে।](/learn/you-might-not-need-an-effect) -## How to write an Effect {/*how-to-write-an-effect*/} +## কিভাবে একটি Effect লিখবেন {/*how-to-write-an-effect*/} -To write an Effect, follow these three steps: +একটি Effect লিখতে, এই তিনটি ধাপ অনুসরণ করুনঃ -1. **Declare an Effect.** By default, your Effect will run after every render. +1. **Effect ডিক্লার** By default, প্রত্যেক বার রেন্ডারের সময় Effect রান হবে। 2. **Specify the Effect dependencies.** Most Effects should only re-run *when needed* rather than after every render. For example, a fade-in animation should only trigger when a component appears. Connecting and disconnecting to a chat room should only happen when the component appears and disappears, or when the chat room changes. You will learn how to control this by specifying *dependencies.* 3. **Add cleanup if needed.** Some Effects need to specify how to stop, undo, or clean up whatever they were doing. For example, "connect" needs "disconnect", "subscribe" needs "unsubscribe", and "fetch" needs either "cancel" or "ignore". You will learn how to do this by returning a *cleanup function*. From c964d1924c8cae94847f530468a6543ed482c6e8 Mon Sep 17 00:00:00 2001 From: Taha Date: Sun, 5 Nov 2023 00:33:09 +0600 Subject: [PATCH 09/72] before step-1 --- src/content/learn/synchronizing-with-effects.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 0ebd9f059..c07f6663b 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -28,7 +28,7 @@ Effects সম্পর্কে শুরুর আগে, আপনার র কখনও কখনও এটা যথেষ্ট নয়। একটি `ChatRoom` কম্পোনেন্ট চিন্তা করুন যখনই স্ক্রিনে দৃশ্যমান হয় তখন অবশ্যই চ্যাট সার্ভারের সাথে সংযোগ করতে হয়। সার্ভারে সংযোগ স্থাপন pure calculation নয় (এটি একটি side effect) তাই এটি রেন্ডার এর সময় সম্পন্ন হয় না। যাইহোক, ক্লিক ইভেন্ট এর মত কোন নির্দিষ্ট ইভেন্ট নাই যা `ChatRoom` ডিসপ্লে করায়। -***Effects* let you specify side effects that are caused by rendering itself, rather than by a particular event.** Sending a message in the chat is an *event* because it is directly caused by the user clicking a specific button. However, setting up a server connection is an *Effect* because it should happen no matter which interaction caused the component to appear. Effects run at the end of a [commit](/learn/render-and-commit) after the screen updates. This is a good time to synchronize the React components with some external system (like network or a third-party library). +***Effect গুলি* নির্দিষ্ট ইভেন্টের মাধ্যমে নয়, বরং স্বয়ংক্রিয় রেন্ডারিং দ্বারা সৃষ্ট side effect গুলি নির্দিষ্ট করতে দেয়।** চ্যাটে message পাঠানো একটি *event* কারণ এটি সরাসরি একজন ব্যবহারকারীর দ্বারা একটি নির্দিষ্ট বাটনে ক্লিক করার মাধ্যমে ঘটে। তবু, সার্ভারের সাথে সংযোগ স্থাপন একটি *Effect* কারণ এটা উপস্থিত কোম্পোনেন্টের প্রদর্শনের কোন ইন্টারেকশনের কারণে হয় না। Effect গুলি স্ক্রিন আপডেটের পরে একটি [commit](/learn/render-and-commit) এর শেষে চালানো হয়। কিছু external system (যেমন network অথবা একটি third-party library) এর সাথে React component গুলো synchronize করার জন্য এটি একটি ভাল সময় । @@ -46,14 +46,16 @@ Effects সম্পর্কে শুরুর আগে, আপনার র একটি Effect লিখতে, এই তিনটি ধাপ অনুসরণ করুনঃ 1. **Effect ডিক্লার** By default, প্রত্যেক বার রেন্ডারের সময় Effect রান হবে। +2. **Effect এর dependenci গুলো বাছাই করুন** Most Effects should only re-run *when needed* rather than after every render. For example, a fade-in animation should only trigger when a component appears. Connecting and disconnecting to a chat room should only happen when the component appears and disappears, or when the chat room changes. You will learn how to control this by specifying *dependencies.* + 2. **Specify the Effect dependencies.** Most Effects should only re-run *when needed* rather than after every render. For example, a fade-in animation should only trigger when a component appears. Connecting and disconnecting to a chat room should only happen when the component appears and disappears, or when the chat room changes. You will learn how to control this by specifying *dependencies.* 3. **Add cleanup if needed.** Some Effects need to specify how to stop, undo, or clean up whatever they were doing. For example, "connect" needs "disconnect", "subscribe" needs "unsubscribe", and "fetch" needs either "cancel" or "ignore". You will learn how to do this by returning a *cleanup function*. Let's look at each of these steps in detail. -### Step 1: Declare an Effect {/*step-1-declare-an-effect*/} +### ধাপ ১: একটি Effect ডিক্লার {/*step-1-declare-an-effect*/} -To declare an Effect in your component, import the [`useEffect` Hook](/reference/react/useEffect) from React: +আপনার component এ কোন Effect ডিক্লার করতে, [`useEffect` হুক](/reference/react/useEffect) React থেকে import করুন: ```js import { useEffect } from 'react'; From cf519109540c76a8d4dfb9e449aa1171c9900e48 Mon Sep 17 00:00:00 2001 From: Taha Date: Sun, 5 Nov 2023 00:38:32 +0600 Subject: [PATCH 10/72] before step-1 --- src/content/learn/synchronizing-with-effects.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index c07f6663b..0972bd6ae 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -36,7 +36,6 @@ Effects সম্পর্কে শুরুর আগে, আপনার র - ## আপনার কোন Effect প্রয়োজন নাও হতে পারে {/*you-might-not-need-an-effect*/} **অপ্রয়োজনে আপনার component এ Effects অ্যাড করবেন না।** মনে রাখবেন যে Effect গুলি সাধারণত আপনার React কোডের "step out" করতে এবং কিছু *বাহ্যিক* সিস্টামের সাথে synchronize করতে ব্যবহৃত হয়। এর মধ্যে রয়েছে browser APIs, third-party widgets, network, এবং আরও অনেক কিছু। যদি আপনার Effect টি কেবল অন্য state এর উপর ভিত্তি করে কিছু state কে সামঞ্জস্য করে, [তবে আপনার কোন Effect প্রয়োজন নাও হতে পারে।](/learn/you-might-not-need-an-effect) @@ -48,7 +47,6 @@ Effects সম্পর্কে শুরুর আগে, আপনার র 1. **Effect ডিক্লার** By default, প্রত্যেক বার রেন্ডারের সময় Effect রান হবে। 2. **Effect এর dependenci গুলো বাছাই করুন** Most Effects should only re-run *when needed* rather than after every render. For example, a fade-in animation should only trigger when a component appears. Connecting and disconnecting to a chat room should only happen when the component appears and disappears, or when the chat room changes. You will learn how to control this by specifying *dependencies.* -2. **Specify the Effect dependencies.** Most Effects should only re-run *when needed* rather than after every render. For example, a fade-in animation should only trigger when a component appears. Connecting and disconnecting to a chat room should only happen when the component appears and disappears, or when the chat room changes. You will learn how to control this by specifying *dependencies.* 3. **Add cleanup if needed.** Some Effects need to specify how to stop, undo, or clean up whatever they were doing. For example, "connect" needs "disconnect", "subscribe" needs "unsubscribe", and "fetch" needs either "cancel" or "ignore". You will learn how to do this by returning a *cleanup function*. Let's look at each of these steps in detail. From 801f8ae4f162c8096dbc372cca66b393c00d8d2d Mon Sep 17 00:00:00 2001 From: Taha Date: Sun, 5 Nov 2023 12:22:00 +0600 Subject: [PATCH 11/72] how to write Effeft done --- src/content/learn/synchronizing-with-effects.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 0972bd6ae..fdfdb5993 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -45,11 +45,12 @@ Effects সম্পর্কে শুরুর আগে, আপনার র একটি Effect লিখতে, এই তিনটি ধাপ অনুসরণ করুনঃ 1. **Effect ডিক্লার** By default, প্রত্যেক বার রেন্ডারের সময় Effect রান হবে। -2. **Effect এর dependenci গুলো বাছাই করুন** Most Effects should only re-run *when needed* rather than after every render. For example, a fade-in animation should only trigger when a component appears. Connecting and disconnecting to a chat room should only happen when the component appears and disappears, or when the chat room changes. You will learn how to control this by specifying *dependencies.* -3. **Add cleanup if needed.** Some Effects need to specify how to stop, undo, or clean up whatever they were doing. For example, "connect" needs "disconnect", "subscribe" needs "unsubscribe", and "fetch" needs either "cancel" or "ignore". You will learn how to do this by returning a *cleanup function*. +2. **Effect এর dependenci গুলো specify করুন** বেশিরভাগ Effects প্রত্যেকবার রেন্ডার হওয়ার পরে re-run হওয়ার থেকে *যখন প্রয়োজন* তখন re-run হওয়া উচিৎ। উদাহরণস্বরূপ, একটি fade-in animation কেবল তখনি টিগার করা উচিৎ যখন কোন একটি component দৃশ্যমান হয়। কোন chat room এর সাথে সংযোগ স্থাপন এবং বিচ্ছিন্ন তখনই ঘটে যখন component টি দৃশ্যমান এবং অদৃশ্যমান হয়ে যায় বা যখন chat room টি পরিবর্তন হয়। কীভাবে *dependencies* specifying এর মাধ্যমে এটি কন্ট্রোল করবেন তা শিখবেন। -Let's look at each of these steps in detail. +3. **প্রয়োজনে cleanup অ্যাড করুন** কিছু Effects কিভাবে থামানো হবে, আন্ডু হবে বা এগুলো যা করছে তা clean up করতে হবে তা specify করে দিতে হয়। উধাহরণস্বরূপ, "connect" এর জন্য প্রয়োজন "disconnect", "subscribe" এর জন্য "unsubscribe", and "fetch" এর জন্য প্রয়োজন হয়ত "cancel" অথবা "ignore"। আপনি একটি *cleanup function* রিটার্ন করে কীভাবে এটি করবেন তা শিখবেন। + +আসুন, এবার প্রতিটি ধাপ বিস্তারিত দেখি। ### ধাপ ১: একটি Effect ডিক্লার {/*step-1-declare-an-effect*/} From e8d72fa6c729b06889943dc7f716be6f2f7941d9 Mon Sep 17 00:00:00 2001 From: Taha Date: Sun, 5 Nov 2023 12:25:06 +0600 Subject: [PATCH 12/72] how to write Effeft done --- src/content/learn/synchronizing-with-effects.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index fdfdb5993..b1d8af95c 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -49,7 +49,6 @@ Effects সম্পর্কে শুরুর আগে, আপনার র 2. **Effect এর dependenci গুলো specify করুন** বেশিরভাগ Effects প্রত্যেকবার রেন্ডার হওয়ার পরে re-run হওয়ার থেকে *যখন প্রয়োজন* তখন re-run হওয়া উচিৎ। উদাহরণস্বরূপ, একটি fade-in animation কেবল তখনি টিগার করা উচিৎ যখন কোন একটি component দৃশ্যমান হয়। কোন chat room এর সাথে সংযোগ স্থাপন এবং বিচ্ছিন্ন তখনই ঘটে যখন component টি দৃশ্যমান এবং অদৃশ্যমান হয়ে যায় বা যখন chat room টি পরিবর্তন হয়। কীভাবে *dependencies* specifying এর মাধ্যমে এটি কন্ট্রোল করবেন তা শিখবেন। 3. **প্রয়োজনে cleanup অ্যাড করুন** কিছু Effects কিভাবে থামানো হবে, আন্ডু হবে বা এগুলো যা করছে তা clean up করতে হবে তা specify করে দিতে হয়। উধাহরণস্বরূপ, "connect" এর জন্য প্রয়োজন "disconnect", "subscribe" এর জন্য "unsubscribe", and "fetch" এর জন্য প্রয়োজন হয়ত "cancel" অথবা "ignore"। আপনি একটি *cleanup function* রিটার্ন করে কীভাবে এটি করবেন তা শিখবেন। - আসুন, এবার প্রতিটি ধাপ বিস্তারিত দেখি। ### ধাপ ১: একটি Effect ডিক্লার {/*step-1-declare-an-effect*/} From f4d0cb5c8187fc4292eb19f9975894e13e9f4f7a Mon Sep 17 00:00:00 2001 From: Taha Date: Sun, 26 Nov 2023 15:04:46 +0600 Subject: [PATCH 13/72] 1st step 3example done --- src/content/learn/synchronizing-with-effects.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index b1d8af95c..d3b137738 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -59,26 +59,26 @@ Effects সম্পর্কে শুরুর আগে, আপনার র import { useEffect } from 'react'; ``` -Then, call it at the top level of your component and put some code inside your Effect: +এরপরে, এটিকে আপনার component এর top level এ call করুন এবং Effects এর মধ্যে কিছু code রাখুন। ```js {2-4} function MyComponent() { useEffect(() => { - // Code here will run after *every* render + // *প্রতিবার* রেন্ডারে এখানের code রান হবে }); return
; } ``` -Every time your component renders, React will update the screen *and then* run the code inside `useEffect`. In other words, **`useEffect` "delays" a piece of code from running until that render is reflected on the screen.** +প্রতিবার যখন component রেন্ডার করবে, React স্কিন আপডেট করবে *এবং এর পরে* `useEffect` এর ভিতরের কোড রান করবে। অর্থাৎ, **`useEffect` এক টুকরা কোড রান হতে " বিলম্ব করায় " যতক্ষণ না রেন্ডারটি স্কিনে reflected হয়।** -Let's see how you can use an Effect to synchronize with an external system. Consider a `` React component. It would be nice to control whether it's playing or paused by passing an `isPlaying` prop to it: +চলুন দেখা যাক কিভাবে আপনি Effect ব্যবহার করে একটি external system এর সাথে synchronize করবেন। একটি `` React component এর কথা চিন্তা করুন। এটি কন্ট্রল করতে ভাল হবে যদি এটিতে একটি `isPlaying` প্রপস পাঠানো হয় যে এটি চালু আছে অথবা বন্ধ: ```js ; ``` -Your custom `VideoPlayer` component renders the built-in browser [`