From 222e592358eaac3f688bb0cfdc65a43946153171 Mon Sep 17 00:00:00 2001 From: sabbirshawon Date: Thu, 13 Feb 2020 19:08:51 +0600 Subject: [PATCH 1/3] effect hooks bangla translation --- content/docs/hooks-effect.md | 155 ++++++++++++++++++----------------- 1 file changed, 78 insertions(+), 77 deletions(-) diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md index 86b3b6649..1f0f64023 100644 --- a/content/docs/hooks-effect.md +++ b/content/docs/hooks-effect.md @@ -1,14 +1,14 @@ --- id: hooks-state -title: Using the Effect Hook +title: Effect Hooks এর ব্যবহার permalink: docs/hooks-effect.html next: hooks-rules.html prev: hooks-state.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +*Hooks* - React 16.8 এ নতুন সংযোজন। তারা আপনাকে ক্লাস না লিখে state এবং অন্যান্য প্রতিক্রিয়া বৈশিষ্ট্যগুলি ব্যবহার করতে দেয়। -The *Effect Hook* lets you perform side effects in function components: +*Effect Hook* আপনাকে ফাংশন উপাদানগুলিতে পার্শ্ব প্রতিক্রিয়া সম্পাদন করতে দেয়: ```js{1,6-10} import React, { useState, useEffect } from 'react'; @@ -33,25 +33,26 @@ function Example() { } ``` -This snippet is based on the [counter example from the previous page](/docs/hooks-state.html), but we added a new feature to it: we set the document title to a custom message including the number of clicks. +এই স্নিপেট উপর ভিত্তি করে [counter example from the previous page](/docs/hooks-state.html), +তবে আমরা এতে একটি নতুন বৈশিষ্ট্য যুক্ত করেছি: আমরা ক্লিকের সংখ্যা সহ কাস্টম বার্তায় নথির শিরোনাম সেট করেছি। -Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects. Whether or not you're used to calling these operations "side effects" (or just "effects"), you've likely performed them in your components before. +তথ্য আনা, একটি সাবস্ক্রিপশন সেট আপ, এবং প্রতিক্রিয়া উপাদানগুলিতে ম্যানুয়ালি DOM পরিবর্তন করা পার্শ্ব প্রতিক্রিয়াগুলির উদাহরণ। আপনি এই অপারেশনগুলিকে "side effects" (or just "effects"), বলার জন্য অভ্যস্ত কিনা বা না, আপনি সম্ভবত আপনার উপাদানগুলিতে এগুলি সম্পাদন করেছেন। ->Tip +>পরামর্শ > ->If you're familiar with React class lifecycle methods, you can think of `useEffect` Hook as `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` combined. +>আপনি যদি প্রতিক্রিয়া শ্রেণীর জীবনচক্র পদ্ধতিগুলির সাথে পরিচিত হন তবে আপনি `UseEffect` হুককে `componentDidMount`, `componentDidUpdate` এবং `componentWillUnmount` সম্মিলিত হিসাবে ভাবতে পারেন। -There are two common kinds of side effects in React components: those that don't require cleanup, and those that do. Let's look at this distinction in more detail. +প্রতিক্রিয়া উপাদানগুলিতে দুটি সাধারণ ধরণের পার্শ্ব প্রতিক্রিয়া রয়েছে: সেগুলির পরিষ্কার-পরিচ্ছন্নতার প্রয়োজন হয় না এবং সেগুলি করে। আসুন আরও বিস্তারিত এই পার্থক্যটি দেখি। ## Effects Without Cleanup {#effects-without-cleanup} -Sometimes, we want to **run some additional code after React has updated the DOM.** Network requests, manual DOM mutations, and logging are common examples of effects that don't require a cleanup. We say that because we can run them and immediately forget about them. Let's compare how classes and Hooks let us express such side effects. +কখনও কখনও, আমরা চাই **রিঅ্যাক্টটি DOM আপডেট করার পরে কিছু অতিরিক্ত কোড চালাও।** নেটওয়ার্ক requests, ম্যানুয়াল DOM রূপান্তর এবং লগিং এফেক্টগুলির সাধারণ উদাহরণ যা পরিষ্কার করার প্রয়োজন হয় না। আমরা বলি কারণ আমরা তাদের চালাতে পারি এবং তাত্ক্ষণিকভাবে সেগুলি ভুলে যেতে পারি। তুলনা করি, কীভাবে ক্লাস এবং হুকস আমাদের এ জাতীয় পার্শ্ব প্রতিক্রিয়া প্রকাশ করতে দেয়। -### Example Using Classes {#example-using-classes} +### ক্লাস ব্যবহার করার উদাহরণ {#example-using-classes} -In React class components, the `render` method itself shouldn't cause side effects. It would be too early -- we typically want to perform our effects *after* React has updated the DOM. +প্রতিক্রিয়া শ্রেণীর উপাদানগুলিতে, `render` পদ্ধতি নিজেই কোনও পার্শ্ব প্রতিক্রিয়া সৃষ্টি করে না। এটি খুব তাড়াতাড়ি হবে - আমরা সাধারণত প্রতিক্রিয়া ডমকে আপডেট করার *পরে* আমাদের প্রভাবগুলি সম্পাদন করতে চাই। -This is why in React classes, we put side effects into `componentDidMount` and `componentDidUpdate`. Coming back to our example, here is a React counter class component that updates the document title right after React makes changes to the DOM: +এই কারণেই প্রতিক্রিয়া শ্রেণিতে আমরা পার্শ্ব প্রতিক্রিয়াগুলিকে `componentDidMount` এবং `componentDidUpdate` আমাদের উদাহরণে ফিরে আসছি, এখানে একটি প্রতিক্রিয়া পাল্টা ক্লাস উপাদান রয়েছে যা DOM পরিবর্তন প্রতিক্রিয়া করার পরে ডকুমেন্টের শিরোনামটি আপডেট করে: ```js{9-15} class Example extends React.Component { @@ -83,15 +84,15 @@ class Example extends React.Component { } ``` -Note how **we have to duplicate the code between these two lifecycle methods in class.** +নোট করুন: **ক্লাসে আমাদের এই দুটি জীবনচক্র পদ্ধতির মধ্যে কোডটি নকল করতে হবে** -This is because in many cases we want to perform the same side effect regardless of whether the component just mounted, or if it has been updated. Conceptually, we want it to happen after every render -- but React class components don't have a method like this. We could extract a separate method but we would still have to call it in two places. +এটির কারণ কেবলমাত্র উপাদানটি কেবল মাউন্ট করা হয়েছে, বা এটি আপডেট হয়েছে কিনা তা নির্বিশেষে আমরা অনেক ক্ষেত্রে একই পার্শ্ব প্রতিক্রিয়া সম্পাদন করতে চাই। ধারণামূলকভাবে, আমরা এটি প্রতিটি রেন্ডারের পরে ঘটতে চাই - তবে প্রতিক্রিয়া শ্রেণীর উপাদানগুলির মতো এই পদ্ধতি নেই। আমরা একটি পৃথক পদ্ধতিতে নিষ্কাশন করতে পারি তবে আমাদের এখনও এটি দুটি জায়গায় কল করতে হবে। -Now let's see how we can do the same with the `useEffect` Hook. +এখন আসুন আমরা কীভাবে `UseEffect` হুক দিয়ে একই কাজ করতে পারি তা দেখি। -### Example Using Hooks {#example-using-hooks} +### হুক ব্যবহার করার উদাহরণ {#example-using-hooks} -We've already seen this example at the top of this page, but let's take a closer look at it: +আমরা ইতিমধ্যে পৃষ্ঠার শীর্ষে এই উদাহরণটি দেখেছি, তবে আসুন এটি ঘনিষ্ঠভাবে দেখি: ```js{1,6-8} import React, { useState, useEffect } from 'react'; @@ -114,15 +115,15 @@ function Example() { } ``` -**What does `useEffect` do?** By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we'll refer to it as our "effect"), and call it later after performing the DOM updates. In this effect, we set the document title, but we could also perform data fetching or call some other imperative API. +**`UseEffect` কি করে?** এই হুক ব্যবহার করে, আপনি প্রতিক্রিয়া জানান যে আপনার উপাদানটি রেন্ডারের পরে কিছু করা দরকার। প্রতিক্রিয়া আপনি যে ক্রিয়াকলাপটি পাস করেছেন তা মনে রাখবে (আমরা এটিকে আমাদের "effect" হিসাবে উল্লেখ করব), এবং DOM আপডেটগুলি সম্পাদন করার পরে এটি পরে কল করব। এই প্রভাবটিতে, আমরা ডকুমেন্ট শিরোনাম সেট করেছি, তবে আমরা ডেটা আনতে পারফর্ম করতে পারি বা অন্য কোনও অত্যাবশ্যকীয় API কল করতে পারি। -**Why is `useEffect` called inside a component?** Placing `useEffect` inside the component lets us access the `count` state variable (or any props) right from the effect. We don't need a special API to read it -- it's already in the function scope. Hooks embrace JavaScript closures and avoid introducing React-specific APIs where JavaScript already provides a solution. +**কেন `useEffect` একটি উপাদানের ভিতরে বলা হয়?** উপাদানটির ভিতরে `useEffect` স্থাপন করা আমাদের প্রভাব থেকে ডানদিকে `count` state পরিবর্তনশীল (বা কোনও প্রপস) অ্যাক্সেস করতে দেয়। এটি পড়তে আমাদের একটি বিশেষ API দরকার নেই - এটি ইতিমধ্যে ফাংশনের সুযোগে। হুকস জাভাস্ক্রিপ্ট বন্ধের আলিঙ্গন করে এবং জাভাস্ক্রিপ্ট ইতিমধ্যে একটি সমাধান সরবরাহ করে এমন প্রতিক্রিয়া-নির্দিষ্ট API প্রবর্তন এড়ানো। -**Does `useEffect` run after every render?** Yes! By default, it runs both after the first render *and* after every update. (We will later talk about [how to customize this](#tip-optimizing-performance-by-skipping-effects).) Instead of thinking in terms of "mounting" and "updating", you might find it easier to think that effects happen "after render". React guarantees the DOM has been updated by the time it runs the effects. +**`useEffect` কি প্রতি রেন্ডার পরে চলে** হ্যাঁ! গতানুগতিক, এটি প্রতিটি রেন্ডার *and* প্রতিটি আপডেটের পরে উভয়ই চালিত হয়। (আমরা পরে কথা বলব [এটি কীভাবে কাস্টমাইজ করা যায়](#tip-optimizing-performance-by-skipping-effects)) "mounting" এবং "updating" এর ক্ষেত্রে বিবেচনা করার পরিবর্তে, "after render" প্রভাবগুলি ঘটেছিল তা ভাবতে আপনার পক্ষে আরও সহজ হতে পারে। প্রতিক্রিয়া গ্যারান্টি দেয় যে প্রভাবগুলি চালানোর সময় দিয়ে DOM আপডেট হয়ে গেছে। -### Detailed Explanation {#detailed-explanation} +### বিস্তারিত ব্যাখ্যা {#detailed-explanation} -Now that we know more about effects, these lines should make sense: +এখন আমরা effects সম্পর্কে আরও জানি, এই লাইনগুলি বোঝা উচিত: ```js function Example() { @@ -134,21 +135,21 @@ function Example() { } ``` -We declare the `count` state variable, and then we tell React we need to use an effect. We pass a function to the `useEffect` Hook. This function we pass *is* our effect. Inside our effect, we set the document title using the `document.title` browser API. We can read the latest `count` inside the effect because it's in the scope of our function. When React renders our component, it will remember the effect we used, and then run our effect after updating the DOM. This happens for every render, including the first one. +আমরা `count` state পরিবর্তনশীল ঘোষণা করি এবং তারপরে আমরা প্রতিক্রিয়াটি বলি আমাদের একটি effect ব্যবহার করা দরকার। আমরা `useEffect` হুক এ একটি ফাংশন পাস করি। এই ফাংশনটি আমরা পাস *করি* আমাদের effect। আমাদের effects ভিতরে, আমরা `document.title` ব্রাউজার API ব্যবহার করে ডকুমেন্ট শিরোনাম সেট করি। আমরা effects এর মধ্যে সর্বশেষতম `count` পড়তে পারি কারণ এটি আমাদের ফাংশনের সুযোগে। যখন প্রতিক্রিয়াটি আমাদের উপাদানটিকে রেন্ডার করে, এটি আমাদের ব্যবহৃত প্রভাবটি স্মরণ করবে এবং তারপরে DOM আপডেট করার পরে আমাদের প্রভাব চালাবে। এটি প্রথম রেন্ডার সহ প্রতিটি রেন্ডারের ক্ষেত্রে ঘটে। -Experienced JavaScript developers might notice that the function passed to `useEffect` is going to be different on every render. This is intentional. In fact, this is what lets us read the `count` value from inside the effect without worrying about it getting stale. Every time we re-render, we schedule a _different_ effect, replacing the previous one. In a way, this makes the effects behave more like a part of the render result -- each effect "belongs" to a particular render. We will see more clearly why this is useful [later on this page](#explanation-why-effects-run-on-each-update). +অভিজ্ঞ জাভাস্ক্রিপ্ট বিকাশকারীরা লক্ষ্য করতে পারেন যে `UseEffect` এ ফাংশনটি প্রতিটি রেন্ডারে আলাদা হতে চলেছে। এটা ইচ্ছাকৃত। প্রকৃতপক্ষে, এটি আমাদের বাসী হয়ে যাওয়ার চিন্তা না করে প্রভাবের ভিতরে থেকে `count` মানটি পড়তে দেয়। যতবার আমরা আবার রেন্ডার করি, আমরা একটি _আলাদা_ effects শিডিউল করি, আগেরটি প্রতিস্থাপন করে। একটি উপায়ে, এটি effects রেন্ডার ফলাফলের অংশের মতো আচরণ করে - প্রতিটি effects একটি নির্দিষ্ট রেন্ডারের সাথে "সম্পর্কিত"। কেন এটি কার্যকর তা আমরা আরও স্পষ্ট দেখতে পাব [পরে এই পৃষ্ঠায়](#explanation-why-effects-run-on-each-update). ->Tip +>পরামর্শ > ->Unlike `componentDidMount` or `componentDidUpdate`, effects scheduled with `useEffect` don't block the browser from updating the screen. This makes your app feel more responsive. The majority of effects don't need to happen synchronously. In the uncommon cases where they do (such as measuring the layout), there is a separate [`useLayoutEffect`](/docs/hooks-reference.html#uselayouteffect) Hook with an API identical to `useEffect`. +> `componentDidMount` বা `componentDidUpdate`-এর বিপরীতে, `UseEffect` এর সাথে নির্ধারিত প্রভাবগুলি ব্রাউজারটিকে স্ক্রিনটি আপডেট করতে আটকাবে না। এটি আপনার অ্যাপ্লিকেশনটিকে আরও প্রতিক্রিয়াশীল মনে করে। বেশিরভাগ প্রভাবগুলির সিঙ্ক্রোনালি হওয়ার দরকার নেই। অস্বাভাবিক ক্ষেত্রে যেখানে তারা করেন (যেমন লেআউটটি পরিমাপ করা), সেখানে আলাদা রয়েছে [`useLayoutEffect`](/docs/hooks-reference.html#uselayouteffect) `UseEffect` এর অনুরূপ একটি API সহ হুক` ## Effects with Cleanup {#effects-with-cleanup} -Earlier, we looked at how to express side effects that don't require any cleanup. However, some effects do. For example, **we might want to set up a subscription** to some external data source. In that case, it is important to clean up so that we don't introduce a memory leak! Let's compare how we can do it with classes and with Hooks. +এর আগে, আমরা কীভাবে এমন কোনও পার্শ্ব প্রতিক্রিয়া প্রকাশ করতে দেখলাম যাতে কোনও পরিষ্কারের প্রয়োজন নেই। যাইহোক, কিছু effect আছে। উদাহরণস্বরূপ, **আমরা কোনও বাহ্যিক ডেটা উত্সে একটি সাবস্ক্রিপশন সেট করতে চাই**। সেক্ষেত্রে পরিষ্কার করা জরুরী যাতে আমরা কোনও মেমরি ফুটো প্রবর্তন করি না! আসুন আমরা কীভাবে ক্লাস এবং হুকসের সাথে এটি করতে পারি তা তুলনা করি। -### Example Using Classes {#example-using-classes-1} +### ক্লাস ব্যবহার করে উদাহরণ {#example-using-classes-1} -In a React class, you would typically set up a subscription in `componentDidMount`, and clean it up in `componentWillUnmount`. For example, let's say we have a `ChatAPI` module that lets us subscribe to a friend's online status. Here's how we might subscribe and display that status using a class: +একটি প্রতিক্রিয়া শ্রেণিতে, আপনি সাধারণত `componentDidMount` একটি সাবস্ক্রিপশন সেট আপ করতে এবং এটি `componentWillUnmount` সাফ করুন উদাহরণস্বরূপ, আসুন আমরা বলি যে আমাদের একটি `ChatAPI` মডিউল রয়েছে যা আমাদের বন্ধুর অনলাইন স্ট্যাটাস সাবস্ক্রাইব করতে দেয়। ক্লাস ব্যবহার করে আমরা কীভাবে সেই স্থিতিটি সাবস্ক্রাইব এবং প্রদর্শন করতে পারি তা এখানে: ```js{8-26} class FriendStatus extends React.Component { @@ -187,17 +188,17 @@ class FriendStatus extends React.Component { } ``` -Notice how `componentDidMount` and `componentWillUnmount` need to mirror each other. Lifecycle methods force us to split this logic even though conceptually code in both of them is related to the same effect. +লক্ষ্য করুন কীভাবে কীভাবে `componentDidMount` এবং `componentWillUnmount` একে অপরকে mirror করা দরকার। উভয় ক্ষেত্রে ধারণাগত কোড একই effects এর সাথে সম্পর্কিত হলেও লাইফাইসাইকেল পদ্ধতিগুলি আমাদের এই যুক্তিকে বিভক্ত করতে বাধ্য করে। ->Note +>মন্তব্য > ->Eagle-eyed readers may notice that this example also needs a `componentDidUpdate` method to be fully correct. We'll ignore this for now but will come back to it in a [later section](#explanation-why-effects-run-on-each-update) of this page. +>ঈগল চোখের পাঠকরা লক্ষ্য করতে পারেন যে এই উদাহরণটির পুরোপুরি সঠিক হওয়ার জন্য একটি `componentDidUpdate` পদ্ধতিও প্রয়োজন। আমরা আপাতত এটিকে উপেক্ষা করব তবে এটি [পরবর্তী বিভাগে](#explanation-why-effects-run-on-each-update) ফিরে আসব এই পৃষ্ঠার। -### Example Using Hooks {#example-using-hooks-1} +### হুক ব্যবহার করার উদাহরণ {#example-using-hooks-1} -Let's see how we could write this component with Hooks. +আসুন দেখি কীভাবে আমরা হুকস সহ এই উপাদানটি লিখতে পারি। -You might be thinking that we'd need a separate effect to perform the cleanup. But code for adding and removing a subscription is so tightly related that `useEffect` is designed to keep it together. If your effect returns a function, React will run it when it is time to clean up: +আপনি হয়ত ভাবছেন যে ক্লিনআপটি সম্পাদন করার জন্য আমাদের একটি পৃথক effect প্রয়োজন। তবে সাবস্ক্রিপশন যুক্ত এবং অপসারণের কোডটি এতটা দৃঢ়ভাবে সম্পর্কিত যে `useEffect` এটিকে একসাথে রাখার জন্য ডিজাইন করা হয়েছে। যদি আপনার effect কোনও ফাংশন দেয়, প্রতিক্রিয়াটি পরিষ্কার করার সময় হলে এটি চালিত হবে: ```js{6-16} import React, { useState, useEffect } from 'react'; @@ -224,17 +225,17 @@ function FriendStatus(props) { } ``` -**Why did we return a function from our effect?** This is the optional cleanup mechanism for effects. Every effect may return a function that cleans up after it. This lets us keep the logic for adding and removing subscriptions close to each other. They're part of the same effect! +**আমরা কেন আমাদের effects থেকে কোনও ফাংশনে ফিরলাম?** এটি effects এর জন্য ঐচ্ছিক ক্লিনআপ প্রক্রিয়া। প্রতিটি effects এমন কোনও ফাংশন ফিরিয়ে দিতে পারে যা এর পরে পরিষ্কার হয়ে যায়। এটি আমাদের সাবস্ক্রিপশন একে অপরের নিকটে যুক্ত এবং অপসারণের জন্য যুক্তি রাখতে দেয়। তারা একই প্রভাব অংশ! -**When exactly does React clean up an effect?** React performs the cleanup when the component unmounts. However, as we learned earlier, effects run for every render and not just once. This is why React *also* cleans up effects from the previous render before running the effects next time. We'll discuss [why this helps avoid bugs](#explanation-why-effects-run-on-each-update) and [how to opt out of this behavior in case it creates performance issues](#tip-optimizing-performance-by-skipping-effects) later below. +**প্রতিক্রিয়া কখন একটি effects পরিষ্কার করে?** উপাদানটি আনমাউন্ট করার সময় প্রতিক্রিয়া পরিচ্ছন্নতা সম্পাদন করে। তবে, যেমনটি আমরা আগে জেনেছি, effects প্রতিটি রেন্ডারের জন্য চালানো হয় এবং একবারে নয়। এই কারণেই প্রতিক্রিয়া *পরবর্তী* প্রভাবগুলি পরবর্তী সময় চালানোর আগে পূর্ববর্তী রেন্ডার থেকে effects পরিষ্কার করে। আমরা আলোচনা করব [কেন এটি বাগগুলি এড়াতে সহায়তা করে](#explanation-why-effects-run-on-each-update) এবং [এটি কার্য সম্পাদনের সমস্যা তৈরির ক্ষেত্রে কীভাবে এই আচরণ থেকে বেরিয়ে যায়](#tip-optimizing-performance-by-skipping-effects) পরে নীচে। ->Note +>মন্তব্য > ->We don't have to return a named function from the effect. We called it `cleanup` here to clarify its purpose, but you could return an arrow function or call it something different. +>effect থেকে আমাদের কোনও নামকৃত ফাংশন ফিরিয়ে দিতে হবে না। এর উদ্দেশ্যটি স্পষ্ট করার জন্য আমরা এটিকে এখানে `cleanup` বলেছি, তবে আপনি কোনও তীর ফাংশনটি ফিরে আসতে পারেন বা এটিকে আলাদা কিছু বলতে পারেন। -## Recap {#recap} +## সংক্ষিপ্তবৃত্তি {#recap} -We've learned that `useEffect` lets us express different kinds of side effects after a component renders. Some effects might require cleanup so they return a function: +আমরা শিখেছি যে `useEffect` আমাদের একটি উপাদান সরবরাহের পরে বিভিন্ন ধরণের পার্শ্ব প্রতিক্রিয়া প্রকাশ করতে দেয়। কিছু প্রভাব পরিষ্কার করার প্রয়োজন হতে পারে যাতে তারা কোনও ফাংশন ফেরত দেয়: ```js useEffect(() => { @@ -249,7 +250,7 @@ We've learned that `useEffect` lets us express different kinds of side effects a }); ``` -Other effects might not have a cleanup phase, and don't return anything. +অন্যান্য effects এর কোনও ক্লিনআপ পর্ব নাও থাকতে পারে এবং কিছুই ফেরত দেয় না। ```js useEffect(() => { @@ -257,21 +258,21 @@ Other effects might not have a cleanup phase, and don't return anything. }); ``` -The Effect Hook unifies both use cases with a single API. +effect হুক উভয়ই একক API সহ কেস ব্যবহার করে। ------------- -**If you feel like you have a decent grasp on how the Effect Hook works, or if you feel overwhelmed, you can jump to the [next page about Rules of Hooks](/docs/hooks-rules.html) now.** +**আপনার যদি মনে হয় যে আপনার কীভাবে প্রভাব হুক কাজ করে বা আপনার যদি অভিভূত বোধ হয় সে সম্পর্কে আপনার কাছে যথাযথ উপলব্ধি রয়েছে তবে আপনি এখানে যেতে পারেন [হুকসের বিধি সম্পর্কে পরবর্তী পৃষ্ঠা](/docs/hooks-rules.html) এখন।** ------------- -## Tips for Using Effects {#tips-for-using-effects} +## effects ব্যবহার করার জন্য টিপস {#tips-for-using-effects} -We'll continue this page with an in-depth look at some aspects of `useEffect` that experienced React users will likely be curious about. Don't feel obligated to dig into them now. You can always come back to this page to learn more details about the Effect Hook. +অভিজ্ঞ প্রতিক্রিয়ার ব্যবহারকারীরা সম্ভবত কৌতূহল বোধ করবেন এমন `UseEffect` - এর কিছু দিকগুলি গভীরতার সাথে আমরা এই পৃষ্ঠাটি চালিয়ে যাব। এখনই এগুলিতে খননের বাধ্যবাধকতা বোধ করবেন না। এফেক্ট হুক সম্পর্কে আরও বিস্তারিত জানতে আপনি এই পৃষ্ঠায় সর্বদা ফিরে আসতে পারেন। -### Tip: Use Multiple Effects to Separate Concerns {#tip-use-multiple-effects-to-separate-concerns} +### টিপ: উদ্বেগ আলাদা করতে একাধিক effects ব্যবহার করুন {#tip-use-multiple-effects-to-separate-concerns} -One of the problems we outlined in the [Motivation](/docs/hooks-intro.html#complex-components-become-hard-to-understand) for Hooks is that class lifecycle methods often contain unrelated logic, but related logic gets broken up into several methods. Here is a component that combines the counter and the friend status indicator logic from the previous examples: +সমস্যার মধ্যে একটিরূপে আমরা রূপরেখা করি [প্রেরণা](/docs/hooks-intro.html#complex-components-become-hard-to-understand) হুকস জন্য হল ক্লাস লাইফ সাইকেল পদ্ধতিগুলিতে প্রায়শই সম্পর্কিত নয় এমন যুক্তি থাকে তবে সম্পর্কিত যুক্তি বিভিন্ন পদ্ধতিতে বিভক্ত হয়ে যায়। এখানে এমন একটি উপাদান যা পূর্ববর্তী উদাহরণগুলি থেকে কাউন্টার এবং বন্ধুর স্ট্যাটাস সূচক যুক্তিকে সংযুক্ত করে: ```js class FriendStatusWithCounter extends React.Component { @@ -308,9 +309,9 @@ class FriendStatusWithCounter extends React.Component { // ... ``` -Note how the logic that sets `document.title` is split between `componentDidMount` and `componentDidUpdate`. The subscription logic is also spread between `componentDidMount` and `componentWillUnmount`. And `componentDidMount` contains code for both tasks. +`document.title` সেট করে এমন যুক্তিটি কীভাবে `componentDidMount` এবং `componentDidUpdate` এর মধ্যে বিভক্ত হবে তা নোট করুন। সাবস্ক্রিপশন লজিকটি `componentDidMount` এবং `componentWillUnmount` মধ্যেও ছড়িয়ে পড়ে এবং `componentDidMount` উভয় কাজের জন্য কোড ধারণ করে। -So, how can Hooks solve this problem? Just like [you can use the *State* Hook more than once](/docs/hooks-state.html#tip-using-multiple-state-variables), you can also use several effects. This lets us separate unrelated logic into different effects: +সুতরাং, হুকস কীভাবে এই সমস্যার সমাধান করতে পারে? ঠিক যেমন [আপনি একাধিকবার *state* হুক ব্যবহার করতে পারেন](/docs/hooks-state.html#tip-using-multiple-state-variables), আপনি বেশ কয়েকটি effects ব্যবহার করতে পারেন। এটি আমাদের সম্পর্কিত সম্পর্কগুলিকে বিভিন্ন effects পৃথক করতে দেয়: ```js{3,8} function FriendStatusWithCounter(props) { @@ -334,13 +335,13 @@ function FriendStatusWithCounter(props) { } ``` -**Hooks let us split the code based on what it is doing** rather than a lifecycle method name. React will apply *every* effect used by the component, in the order they were specified. +**হুকস আমাদের কী করছে তার উপর ভিত্তি করে কোডটি বিভক্ত করা যাক** পরিবর্তে একটি জীবনচক্র পদ্ধতির নাম। প্রতিক্রিয়াটি উপাদান দ্বারা ব্যবহৃত *প্রতিটি* প্রভাব প্রয়োগ করা হবে, তারা নির্দিষ্ট করা ক্রমে। -### Explanation: Why Effects Run on Each Update {#explanation-why-effects-run-on-each-update} +### ব্যাখ্যা: প্রতিটি আপডেটে কেন প্রভাব চলতে পারে {#explanation-why-effects-run-on-each-update} -If you're used to classes, you might be wondering why the effect cleanup phase happens after every re-render, and not just once during unmounting. Let's look at a practical example to see why this design helps us create components with fewer bugs. +আপনি যদি ক্লাসে অভ্যস্ত হন, আপনি ভাবতে পারেন যে প্রতি রি-রেন্ডারের পরে কেন প্রভাব পরিষ্কারের ধাপ হয়, এবং আনমাউন্ট করার সময় একবার নয়। এই ডিজাইনটি কেন কম বাগ সহ উপাদান তৈরি করতে আমাদের সহায়তা করে তা দেখতে একটি ব্যবহারিক উদাহরণ দেখুন। -[Earlier on this page](#example-using-classes-1), we introduced an example `FriendStatus` component that displays whether a friend is online or not. Our class reads `friend.id` from `this.props`, subscribes to the friend status after the component mounts, and unsubscribes during unmounting: +[আগে এই পৃষ্ঠায়](#example-using-classes-1), আমরা একটি উদাহরণ `FriendStatus` উপাদানটি উপস্থাপন করেছি যা দেখায় যে কোনও বন্ধু অনলাইনে আছে কিনা। আমাদের ক্লাসটি `this.prop` থেকে `friend.id` পড়ে, উপাদানটি মাউন্ট করার পরে বন্ধুত্বের স্ট্যাটাস সাবস্ক্রাইব করে এবং আনমাউন্ট করার সময় সদস্যতা গ্রহণ করে: ```js componentDidMount() { @@ -358,9 +359,9 @@ If you're used to classes, you might be wondering why the effect cleanup phase h } ``` -**But what happens if the `friend` prop changes** while the component is on the screen? Our component would continue displaying the online status of a different friend. This is a bug. We would also cause a memory leak or crash when unmounting since the unsubscribe call would use the wrong friend ID. +**তবে `friend` প্রপ পরিবর্তন হলে কী হয়** কম্পোনেন্টটি স্ক্রিনে থাকা অবস্থায়? আমাদের উপাদানটি অন্য কোনও বন্ধুর অনলাইন স্ট্যাটাস প্রদর্শন করা চালিয়ে যাবে। এটি একটি বাগ। আনসাবস্ক্রাইব করা কলটি যদি ভুল বন্ধু আইডি ব্যবহার করে তবে আনমাউন্ট করার সময় আমরা মেমরি ফাঁস বা ক্রাশও করতে পারি। -In a class component, we would need to add `componentDidUpdate` to handle this case: +শ্রেণীর উপাদানগুলিতে, এই কেসটি হ্যান্ডেল করতে আমাদের `componentDidUpdate` যুক্ত করতে হবে: ```js{8-19} componentDidMount() { @@ -391,9 +392,9 @@ In a class component, we would need to add `componentDidUpdate` to handle this c } ``` -Forgetting to handle `componentDidUpdate` properly is a common source of bugs in React applications. +`componentDidUpdate` সঠিকভাবে পরিচালনা করতে ভুলে যাওয়া রিয়েক্ট অ্যাপ্লিকেশনগুলিতে বাগগুলির একটি সাধারণ উত্স। -Now consider the version of this component that uses Hooks: +এখন এই উপাদানটির সংস্করণটি বিবেচনা করুন যা হুকগুলি ব্যবহার করে: ```js function FriendStatus(props) { @@ -407,9 +408,9 @@ function FriendStatus(props) { }); ``` -It doesn't suffer from this bug. (But we also didn't make any changes to it.) +এটি এই বাগ থেকে ভোগেনা। (তবে আমরা এতে কোনও পরিবর্তনও করি নি)) -There is no special code for handling updates because `useEffect` handles them *by default*. It cleans up the previous effects before applying the next effects. To illustrate this, here is a sequence of subscribe and unsubscribe calls that this component could produce over time: +আপডেটগুলি পরিচালনা করার জন্য কোনও বিশেষ কোড নেই কারণ `useEffect` এগুলি *ডিফল্টরূপে* পরিচালনা করে। এটি পরবর্তী প্রভাবগুলি প্রয়োগ করার আগে পূর্ববর্তী প্রভাবগুলি পরিষ্কার করে। এটি চিত্রিত করার জন্য, এখানে সাবস্ক্রাইব এবং সাবস্ক্রাইব করা কলগুলির ক্রম রয়েছে যা এই উপাদানটি সময়ের সাথে সাথে উত্পাদন করতে পারে: ```js // Mount with { friend: { id: 100 } } props @@ -427,11 +428,11 @@ ChatAPI.subscribeToFriendStatus(300, handleStatusChange); // Run next effect ChatAPI.unsubscribeFromFriendStatus(300, handleStatusChange); // Clean up last effect ``` -This behavior ensures consistency by default and prevents bugs that are common in class components due to missing update logic. +এই আচরণটি ডিফল্টরূপে ধারাবাহিকতা নিশ্চিত করে এবং আপডেট যুক্তি অনুপস্থিতির কারণে শ্রেণি উপাদানগুলিতে প্রচলিত বাগগুলি প্রতিরোধ করে। -### Tip: Optimizing Performance by Skipping Effects {#tip-optimizing-performance-by-skipping-effects} +### টিপ: স্কিপিং effects দ্বারা পারফরম্যান্স অনুকূলকরণ {#tip-optimizing-performance-by-skipping-effects} -In some cases, cleaning up or applying the effect after every render might create a performance problem. In class components, we can solve this by writing an extra comparison with `prevProps` or `prevState` inside `componentDidUpdate`: +কিছু ক্ষেত্রে, পরিষ্কার করা বা প্রতিটি রেন্ডার পরে প্রভাব প্রয়োগ করা একটি পারফরম্যান্স সমস্যা তৈরি করতে পারে। শ্রেণীর উপাদানগুলিতে, আমরা `prevProps` বা `prevDate` এর ভিতরে `componentDidUpdate` এর সাথে অতিরিক্ত তুলনা লিখে এটি সমাধান করতে পারি: ```js componentDidUpdate(prevProps, prevState) { @@ -441,7 +442,7 @@ componentDidUpdate(prevProps, prevState) { } ``` -This requirement is common enough that it is built into the `useEffect` Hook API. You can tell React to *skip* applying an effect if certain values haven't changed between re-renders. To do so, pass an array as an optional second argument to `useEffect`: +এই প্রয়োজনীয়তাটি যথেষ্ট সাধারণ যে এটি `useEffect` হুক API এ অন্তর্নির্মিত। আপনি প্রতিক্রিয়াটিকে *এড়িয়ে যান* বলতে পারেন কোনও প্রভাব প্রয়োগ করে যদি নির্দিষ্ট রেন্ডারগুলির মধ্যে কিছু মান পরিবর্তন না হয়। এটি করতে, `UseEffect`- এ ঐচ্ছিক দ্বিতীয় আর্গুমেন্ট হিসাবে একটি অ্যারে পাস করুন: ```js{3} useEffect(() => { @@ -449,11 +450,11 @@ useEffect(() => { }, [count]); // Only re-run the effect if count changes ``` -In the example above, we pass `[count]` as the second argument. What does this mean? If the `count` is `5`, and then our component re-renders with `count` still equal to `5`, React will compare `[5]` from the previous render and `[5]` from the next render. Because all items in the array are the same (`5 === 5`), React would skip the effect. That's our optimization. +উপরের উদাহরণে, আমরা দ্বিতীয় আর্গুমেন্ট হিসাবে `[count]` pass পাস করি। এটার মানে কি? যদি `count` `5` হয় এবং তারপরে আমাদের উপাদানটি এখনও `count` সমান `5` এর সাথে পুনরায় রেন্ডার করে, React পূর্ববর্তী রেন্ডার থেকে `[5]` এবং পরবর্তী রেন্ডার থেকে `[5]` তুলনা করবে । অ্যারেতে থাকা সমস্ত আইটেম সমান (`5 === 5`), প্রতিক্রিয়াটি effects এড়িয়ে যাবে। এটাই আমাদের অপ্টিমাইজেশন। -When we render with `count` updated to `6`, React will compare the items in the `[5]` array from the previous render to items in the `[6]` array from the next render. This time, React will re-apply the effect because `5 !== 6`. If there are multiple items in the array, React will re-run the effect even if just one of them is different. +যখন আমরা `count` কে আপডেট করে `6` এ আপডেট করি তখন React পূর্ববর্তী রেন্ডার থেকে `[5]` অ্যারেতে থাকা আইটেমগুলির সাথে পরবর্তী রেন্ডার থেকে `[6]` অ্যারে আইটেমগুলির সাথে তুলনা করবে। এবার `5! == 6` এর কারণে প্রতিক্রিয়াটি পুনরায় প্রয়োগ করবে অ্যারেতে যদি একাধিক আইটেম থাকে তবে প্রতিক্রিয়াগুলি কেবলমাত্র তার মধ্যে একটি আলাদা হলেও কার্যকরভাবে পুনরায় চালিত হবে। -This also works for effects that have a cleanup phase: +এটি ক্লিনআপ পর্বের effects এর জন্যও কাজ করে: ```js{10} useEffect(() => { @@ -468,22 +469,22 @@ useEffect(() => { }, [props.friend.id]); // Only re-subscribe if props.friend.id changes ``` -In the future, the second argument might get added automatically by a build-time transformation. +ভবিষ্যতে, দ্বিতীয় যুক্তি একটি বিল্ড-টাইম রূপান্তর দ্বারা স্বয়ংক্রিয়ভাবে যুক্ত হতে পারে। ->Note +>মন্তব্য > ->If you use this optimization, make sure the array includes **all values from the component scope (such as props and state) that change over time and that are used by the effect**. Otherwise, your code will reference stale values from previous renders. Learn more about [how to deal with functions](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) and [what to do when the array changes too often](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often). +>আপনি যদি এই অপটিমাইজেশন ব্যবহার করেন তবে অ্যারে অন্তর্ভুক্ত রয়েছে তা নিশ্চিত করুন **উপাদান ব্যবস্থার সমস্ত মান (যেমন props এবং state) যা সময়ের সাথে সাথে পরিবর্তিত হয় এবং যা প্রভাব দ্বারা ব্যবহৃত হয়**. অন্যথায়, আপনার কোড পূর্ববর্তী রেন্ডারগুলির থেকে বাসি মানগুলি উল্লেখ করবে। এই সম্পর্কে আরও জানো [কিভাবে কার্যাদি মোকাবেলা করতে](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) এবং [অ্যারে খুব ঘন ঘন পরিবর্তিত হলে কী করবেন](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often). > ->If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array (`[]`) as a second argument. This tells React that your effect doesn't depend on *any* values from props or state, so it never needs to re-run. This isn't handled as a special case -- it follows directly from how the dependencies array always works. +>আপনি যদি কোনও প্রভাব চালাতে চান এবং এটি একবারে পরিষ্কার করতে চান (মাউন্ট এবং আনমাউন্টে), আপনি একটি খালি অ্যারে (`[]`) দ্বিতীয় আর্গুমেন্ট হিসাবে পাস করতে পারেন। এটি প্রতিক্রিয়া জানায় যে আপনার effect props বা state *কোনও* মানের উপর নির্ভর করে না, সুতরাং এটি পুনরায় চালানোর প্রয়োজন হয় না। এটি কোনও বিশেষ কেস হিসাবে পরিচালিত হয় না - নির্ভরতা অ্যারে সর্বদা কীভাবে কাজ করে তা সরাসরি তা অনুসরণ করে। > ->If you pass an empty array (`[]`), the props and state inside the effect will always have their initial values. While passing `[]` as the second argument is closer to the familiar `componentDidMount` and `componentWillUnmount` mental model, there are usually [better](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [solutions](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) to avoid re-running effects too often. Also, don't forget that React defers running `useEffect` until after the browser has painted, so doing extra work is less of a problem. +>আপনি যদি খালি অ্যারে (`[]`) পাস করেন তবে প্রপসের ভিতরে থাকা props এবং state সর্বদা তাদের প্রাথমিক মান থাকবে। আর্গুমেন্ট `[]` পাশ করার সময় দ্বিতীয় আর্গুমেন্টটি পরিচিত `componentDidMount` এবং `componentWillUnmount` মানসিক মডেলের কাছাকাছি থাকায় সাধারণত রয়েছে [উত্তম](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [সমাধান](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) পুনরায় চলমান effects প্রায়শই এড়াতে। এছাড়াও, ভুলে যাবেন না যে ব্রাউজারটি আঁকার পরে React `UseEffect` চলমান স্থগিত করে, সুতরাং অতিরিক্ত কাজ করা কোনও সমস্যা কম। > ->We recommend using the [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) rule as part of our [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) package. It warns when dependencies are specified incorrectly and suggests a fix. +>আমরা ব্যবহার করার পরামর্শ দিচ্ছি [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) আমাদের অংশ হিসাবে নিয়ম [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) প্যাকেজ। নির্ভরতাগুলি ভুলভাবে নির্দিষ্ট করা হয় এবং একটি সমাধানের পরামর্শ দেয় এটি সতর্ক করে। -## Next Steps {#next-steps} +## পরবর্তী পদক্ষেপ {#next-steps} -Congratulations! This was a long page, but hopefully by the end most of your questions about effects were answered. You've learned both the State Hook and the Effect Hook, and there is a *lot* you can do with both of them combined. They cover most of the use cases for classes -- and where they don't, you might find the [additional Hooks](/docs/hooks-reference.html) helpful. +অভিনন্দন! এটি একটি দীর্ঘ পৃষ্ঠা ছিল, তবে আশা করি শেষ পর্যন্ত আপনার effects সম্পর্কে বেশিরভাগ প্রশ্নের উত্তর দেওয়া হয়েছিল। আপনি state হুক এবং effect হুক উভয়ই শিখে ফেলেছেন, এবং উভয়কে সম্মিলিত করে আপনি করতে পারেন এমন একটি *অনেকগুলি* রয়েছে। তারা ক্লাসগুলির জন্য বেশিরভাগ ব্যবহারের ক্ষেত্রে কভার করে - এবং যেখানে তারা না দেয় আপনি সম্ভবত এটি সন্ধান করতে পারেন [অতিরিক্ত হুকস](/docs/hooks-reference.html) সহায়ক। -We're also starting to see how Hooks solve problems outlined in [Motivation](/docs/hooks-intro.html#motivation). We've seen how effect cleanup avoids duplication in `componentDidUpdate` and `componentWillUnmount`, brings related code closer together, and helps us avoid bugs. We've also seen how we can separate effects by their purpose, which is something we couldn't do in classes at all. +হুকস কীভাবে [প্রেরণা](/docs/hooks-intro.html#motivation) এর মধ্যে বর্ণিত সমস্যাগুলি সমাধান করে তাও আমরা দেখতে শুরু করেছি। আমরা দেখেছি কীভাবে কার্যকরভাবে ক্লিনআপ `componentDidUpdate` এবং `componentWillUnmount` সদৃশতা এড়ানো যায়, সম্পর্কিত কোডকে একসাথে নিয়ে আসে এবং বাগগুলি এড়াতে আমাদের সহায়তা করে। আমরা তাদের লক্ষ্য দ্বারা কীভাবে প্রভাবগুলি পৃথক করতে পারি তাও আমরা দেখেছি, যা এমন কিছু যা আমরা ক্লাসে মোটেই করতে পারিনি। -At this point you might be questioning how Hooks work. How can React know which `useState` call corresponds to which state variable between re-renders? How does React "match up" previous and next effects on every update? **On the next page we will learn about the [Rules of Hooks](/docs/hooks-rules.html) -- they're essential to making Hooks work.** +এই মুহুর্তে আপনি প্রশ্ন করছেন যে হুকস কীভাবে কাজ করে। কোন `useState` কলটি পুনরায় রেন্ডারগুলির মধ্যে কোন state ভেরিয়েবলের সাথে সম্পর্কিত তা কীভাবে প্রতিক্রিয়া জানবে? প্রতিটি আপডেটে পূর্ববর্তী এবং পরবর্তী effects কীভাবে প্রতিক্রিয়া হয় "মিলিত হয়"? **পরবর্তী পৃষ্ঠায় আমরা শিখব [হুকসের বিধি](/docs/hooks-rules.html) -- তারা হুকসকে কাজ করার জন্য প্রয়োজনীয়।** From d0a928c919e17e262964d79eedfe2b52f8cc6bbf Mon Sep 17 00:00:00 2001 From: sabbirshawon Date: Wed, 3 Jun 2020 23:35:56 +0600 Subject: [PATCH 2/3] fix the extra line and few common translation --- content/docs/hooks-effect.md | 63 ++++++++++++++++++------------------ 1 file changed, 31 insertions(+), 32 deletions(-) diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md index 1f0f64023..23aa5a290 100644 --- a/content/docs/hooks-effect.md +++ b/content/docs/hooks-effect.md @@ -1,14 +1,14 @@ --- id: hooks-state -title: Effect Hooks এর ব্যবহার +title: Effect Hook এর ব্যবহার permalink: docs/hooks-effect.html next: hooks-rules.html prev: hooks-state.html --- -*Hooks* - React 16.8 এ নতুন সংযোজন। তারা আপনাকে ক্লাস না লিখে state এবং অন্যান্য প্রতিক্রিয়া বৈশিষ্ট্যগুলি ব্যবহার করতে দেয়। +*Hooks* - React 16.8 এ নতুন সংযোজন। তারা আপনাকে ক্লাস না লিখে state এবং অন্যান্য React ফিচারকে ব্যবহার করতে দেয়। -*Effect Hook* আপনাকে ফাংশন উপাদানগুলিতে পার্শ্ব প্রতিক্রিয়া সম্পাদন করতে দেয়: +*Effect Hook* আপনাকে ফাংশন কম্পোনেন্টকে পার্শ্ব React সম্পাদন করতে দেয়: ```js{1,6-10} import React, { useState, useEffect } from 'react'; @@ -33,26 +33,25 @@ function Example() { } ``` -এই স্নিপেট উপর ভিত্তি করে [counter example from the previous page](/docs/hooks-state.html), -তবে আমরা এতে একটি নতুন বৈশিষ্ট্য যুক্ত করেছি: আমরা ক্লিকের সংখ্যা সহ কাস্টম বার্তায় নথির শিরোনাম সেট করেছি। +এই স্নিপেট উপর ভিত্তি করে [counter example from the previous page](/docs/hooks-state.html), তবে আমরা এতে একটি নতুন বৈশিষ্ট্য যুক্ত করেছি: আমরা ক্লিকের সংখ্যা সহ কাস্টম বার্তায় নথির শিরোনাম সেট করেছি। -তথ্য আনা, একটি সাবস্ক্রিপশন সেট আপ, এবং প্রতিক্রিয়া উপাদানগুলিতে ম্যানুয়ালি DOM পরিবর্তন করা পার্শ্ব প্রতিক্রিয়াগুলির উদাহরণ। আপনি এই অপারেশনগুলিকে "side effects" (or just "effects"), বলার জন্য অভ্যস্ত কিনা বা না, আপনি সম্ভবত আপনার উপাদানগুলিতে এগুলি সম্পাদন করেছেন। +তথ্য আনা, একটি সাবস্ক্রিপশন সেট আপ, এবং React কম্পোনেন্টকে ম্যানুয়ালি DOM পরিবর্তন করা পার্শ্ব React গুলির উদাহরণ। আপনি এই অপারেশনগুলিকে "side effects" (or just "effects"), বলার জন্য অভ্যস্ত কিনা বা না, আপনি সম্ভবত আপনার কম্পোনেন্টকে এগুলি সম্পাদন করেছেন। >পরামর্শ > ->আপনি যদি প্রতিক্রিয়া শ্রেণীর জীবনচক্র পদ্ধতিগুলির সাথে পরিচিত হন তবে আপনি `UseEffect` হুককে `componentDidMount`, `componentDidUpdate` এবং `componentWillUnmount` সম্মিলিত হিসাবে ভাবতে পারেন। +>আপনি যদি React শ্রেণীর জীবনচক্র পদ্ধতিগুলির সাথে পরিচিত হন তবে আপনি `UseEffect` হুককে `componentDidMount`, `componentDidUpdate` এবং `componentWillUnmount` সম্মিলিত হিসাবে ভাবতে পারেন। -প্রতিক্রিয়া উপাদানগুলিতে দুটি সাধারণ ধরণের পার্শ্ব প্রতিক্রিয়া রয়েছে: সেগুলির পরিষ্কার-পরিচ্ছন্নতার প্রয়োজন হয় না এবং সেগুলি করে। আসুন আরও বিস্তারিত এই পার্থক্যটি দেখি। +React কম্পোনেন্টকে দুটি সাধারণ ধরণের পার্শ্ব React রয়েছে: সেগুলির পরিষ্কার-পরিচ্ছন্নতার প্রয়োজন হয় না এবং সেগুলি করে। আসুন আরও বিস্তারিত এই পার্থক্যটি দেখি। ## Effects Without Cleanup {#effects-without-cleanup} -কখনও কখনও, আমরা চাই **রিঅ্যাক্টটি DOM আপডেট করার পরে কিছু অতিরিক্ত কোড চালাও।** নেটওয়ার্ক requests, ম্যানুয়াল DOM রূপান্তর এবং লগিং এফেক্টগুলির সাধারণ উদাহরণ যা পরিষ্কার করার প্রয়োজন হয় না। আমরা বলি কারণ আমরা তাদের চালাতে পারি এবং তাত্ক্ষণিকভাবে সেগুলি ভুলে যেতে পারি। তুলনা করি, কীভাবে ক্লাস এবং হুকস আমাদের এ জাতীয় পার্শ্ব প্রতিক্রিয়া প্রকাশ করতে দেয়। +কখনও কখনও, আমরা চাই **রিঅ্যাক্টটি DOM আপডেট করার পরে কিছু অতিরিক্ত কোড চালাও।** নেটওয়ার্ক requests, ম্যানুয়াল DOM রূপান্তর এবং লগিং এফেক্টগুলির সাধারণ উদাহরণ যা পরিষ্কার করার প্রয়োজন হয় না। আমরা বলি কারণ আমরা তাদের চালাতে পারি এবং তাত্ক্ষণিকভাবে সেগুলি ভুলে যেতে পারি। তুলনা করি, কীভাবে ক্লাস এবং হুকস আমাদের এ জাতীয় পার্শ্ব React প্রকাশ করতে দেয়। ### ক্লাস ব্যবহার করার উদাহরণ {#example-using-classes} -প্রতিক্রিয়া শ্রেণীর উপাদানগুলিতে, `render` পদ্ধতি নিজেই কোনও পার্শ্ব প্রতিক্রিয়া সৃষ্টি করে না। এটি খুব তাড়াতাড়ি হবে - আমরা সাধারণত প্রতিক্রিয়া ডমকে আপডেট করার *পরে* আমাদের প্রভাবগুলি সম্পাদন করতে চাই। +React শ্রেণীর কম্পোনেন্টকে, `render` পদ্ধতি নিজেই কোনও পার্শ্ব React সৃষ্টি করে না। এটি খুব তাড়াতাড়ি হবে - আমরা সাধারণত React ডমকে আপডেট করার *পরে* আমাদের প্রভাবগুলি সম্পাদন করতে চাই। -এই কারণেই প্রতিক্রিয়া শ্রেণিতে আমরা পার্শ্ব প্রতিক্রিয়াগুলিকে `componentDidMount` এবং `componentDidUpdate` আমাদের উদাহরণে ফিরে আসছি, এখানে একটি প্রতিক্রিয়া পাল্টা ক্লাস উপাদান রয়েছে যা DOM পরিবর্তন প্রতিক্রিয়া করার পরে ডকুমেন্টের শিরোনামটি আপডেট করে: +এই কারণেই React শ্রেণিতে আমরা পার্শ্ব Reactগুলিকে `componentDidMount` এবং `componentDidUpdate` আমাদের উদাহরণে ফিরে আসছি, এখানে একটি React পাল্টা ক্লাস উপাদান রয়েছে যা DOM পরিবর্তন React করার পরে ডকুমেন্টের শিরোনামটি আপডেট করে: ```js{9-15} class Example extends React.Component { @@ -86,7 +85,7 @@ class Example extends React.Component { নোট করুন: **ক্লাসে আমাদের এই দুটি জীবনচক্র পদ্ধতির মধ্যে কোডটি নকল করতে হবে** -এটির কারণ কেবলমাত্র উপাদানটি কেবল মাউন্ট করা হয়েছে, বা এটি আপডেট হয়েছে কিনা তা নির্বিশেষে আমরা অনেক ক্ষেত্রে একই পার্শ্ব প্রতিক্রিয়া সম্পাদন করতে চাই। ধারণামূলকভাবে, আমরা এটি প্রতিটি রেন্ডারের পরে ঘটতে চাই - তবে প্রতিক্রিয়া শ্রেণীর উপাদানগুলির মতো এই পদ্ধতি নেই। আমরা একটি পৃথক পদ্ধতিতে নিষ্কাশন করতে পারি তবে আমাদের এখনও এটি দুটি জায়গায় কল করতে হবে। +এটির কারণ কেবলমাত্র উপাদানটি কেবল মাউন্ট করা হয়েছে, বা এটি আপডেট হয়েছে কিনা তা নির্বিশেষে আমরা অনেক ক্ষেত্রে একই পার্শ্ব React সম্পাদন করতে চাই। ধারণামূলকভাবে, আমরা এটি প্রতিটি রেন্ডারের পরে ঘটতে চাই - তবে React শ্রেণীর উপাদানগুলির মতো এই পদ্ধতি নেই। আমরা একটি পৃথক পদ্ধতিতে নিষ্কাশন করতে পারি তবে আমাদের এখনও এটি দুটি জায়গায় কল করতে হবে। এখন আসুন আমরা কীভাবে `UseEffect` হুক দিয়ে একই কাজ করতে পারি তা দেখি। @@ -115,11 +114,11 @@ function Example() { } ``` -**`UseEffect` কি করে?** এই হুক ব্যবহার করে, আপনি প্রতিক্রিয়া জানান যে আপনার উপাদানটি রেন্ডারের পরে কিছু করা দরকার। প্রতিক্রিয়া আপনি যে ক্রিয়াকলাপটি পাস করেছেন তা মনে রাখবে (আমরা এটিকে আমাদের "effect" হিসাবে উল্লেখ করব), এবং DOM আপডেটগুলি সম্পাদন করার পরে এটি পরে কল করব। এই প্রভাবটিতে, আমরা ডকুমেন্ট শিরোনাম সেট করেছি, তবে আমরা ডেটা আনতে পারফর্ম করতে পারি বা অন্য কোনও অত্যাবশ্যকীয় API কল করতে পারি। +**`UseEffect` কি করে?** এই হুক ব্যবহার করে, আপনি React জানান যে আপনার উপাদানটি রেন্ডারের পরে কিছু করা দরকার। React আপনি যে ক্রিয়াকলাপটি পাস করেছেন তা মনে রাখবে (আমরা এটিকে আমাদের "effect" হিসাবে উল্লেখ করব), এবং DOM আপডেটগুলি সম্পাদন করার পরে এটি পরে কল করব। এই প্রভাবটিতে, আমরা ডকুমেন্ট শিরোনাম সেট করেছি, তবে আমরা ডেটা আনতে পারফর্ম করতে পারি বা অন্য কোনও অত্যাবশ্যকীয় API কল করতে পারি। -**কেন `useEffect` একটি উপাদানের ভিতরে বলা হয়?** উপাদানটির ভিতরে `useEffect` স্থাপন করা আমাদের প্রভাব থেকে ডানদিকে `count` state পরিবর্তনশীল (বা কোনও প্রপস) অ্যাক্সেস করতে দেয়। এটি পড়তে আমাদের একটি বিশেষ API দরকার নেই - এটি ইতিমধ্যে ফাংশনের সুযোগে। হুকস জাভাস্ক্রিপ্ট বন্ধের আলিঙ্গন করে এবং জাভাস্ক্রিপ্ট ইতিমধ্যে একটি সমাধান সরবরাহ করে এমন প্রতিক্রিয়া-নির্দিষ্ট API প্রবর্তন এড়ানো। +**কেন `useEffect` একটি উপাদানের ভিতরে বলা হয়?** উপাদানটির ভিতরে `useEffect` স্থাপন করা আমাদের প্রভাব থেকে ডানদিকে `count` state পরিবর্তনশীল (বা কোনও প্রপস) অ্যাক্সেস করতে দেয়। এটি পড়তে আমাদের একটি বিশেষ API দরকার নেই - এটি ইতিমধ্যে ফাংশনের সুযোগে। হুকস জাভাস্ক্রিপ্ট বন্ধের আলিঙ্গন করে এবং জাভাস্ক্রিপ্ট ইতিমধ্যে একটি সমাধান সরবরাহ করে এমন React-নির্দিষ্ট API প্রবর্তন এড়ানো। -**`useEffect` কি প্রতি রেন্ডার পরে চলে** হ্যাঁ! গতানুগতিক, এটি প্রতিটি রেন্ডার *and* প্রতিটি আপডেটের পরে উভয়ই চালিত হয়। (আমরা পরে কথা বলব [এটি কীভাবে কাস্টমাইজ করা যায়](#tip-optimizing-performance-by-skipping-effects)) "mounting" এবং "updating" এর ক্ষেত্রে বিবেচনা করার পরিবর্তে, "after render" প্রভাবগুলি ঘটেছিল তা ভাবতে আপনার পক্ষে আরও সহজ হতে পারে। প্রতিক্রিয়া গ্যারান্টি দেয় যে প্রভাবগুলি চালানোর সময় দিয়ে DOM আপডেট হয়ে গেছে। +**`useEffect` কি প্রতি রেন্ডার পরে চলে** হ্যাঁ! গতানুগতিক, এটি প্রতিটি রেন্ডার *and* প্রতিটি আপডেটের পরে উভয়ই চালিত হয়। (আমরা পরে কথা বলব [এটি কীভাবে কাস্টমাইজ করা যায়](#tip-optimizing-performance-by-skipping-effects)) "mounting" এবং "updating" এর ক্ষেত্রে বিবেচনা করার পরিবর্তে, "after render" প্রভাবগুলি ঘটেছিল তা ভাবতে আপনার পক্ষে আরও সহজ হতে পারে। React গ্যারান্টি দেয় যে প্রভাবগুলি চালানোর সময় দিয়ে DOM আপডেট হয়ে গেছে। ### বিস্তারিত ব্যাখ্যা {#detailed-explanation} @@ -135,21 +134,21 @@ function Example() { } ``` -আমরা `count` state পরিবর্তনশীল ঘোষণা করি এবং তারপরে আমরা প্রতিক্রিয়াটি বলি আমাদের একটি effect ব্যবহার করা দরকার। আমরা `useEffect` হুক এ একটি ফাংশন পাস করি। এই ফাংশনটি আমরা পাস *করি* আমাদের effect। আমাদের effects ভিতরে, আমরা `document.title` ব্রাউজার API ব্যবহার করে ডকুমেন্ট শিরোনাম সেট করি। আমরা effects এর মধ্যে সর্বশেষতম `count` পড়তে পারি কারণ এটি আমাদের ফাংশনের সুযোগে। যখন প্রতিক্রিয়াটি আমাদের উপাদানটিকে রেন্ডার করে, এটি আমাদের ব্যবহৃত প্রভাবটি স্মরণ করবে এবং তারপরে DOM আপডেট করার পরে আমাদের প্রভাব চালাবে। এটি প্রথম রেন্ডার সহ প্রতিটি রেন্ডারের ক্ষেত্রে ঘটে। +আমরা `count` state পরিবর্তনশীল ঘোষণা করি এবং তারপরে আমরা Reactটি বলি আমাদের একটি effect ব্যবহার করা দরকার। আমরা `useEffect` হুক এ একটি ফাংশন পাস করি। এই ফাংশনটি আমরা পাস *করি* আমাদের effect। আমাদের effects ভিতরে, আমরা `document.title` ব্রাউজার API ব্যবহার করে ডকুমেন্ট শিরোনাম সেট করি। আমরা effects এর মধ্যে সর্বশেষতম `count` পড়তে পারি কারণ এটি আমাদের ফাংশনের সুযোগে। যখন Reactটি আমাদের উপাদানটিকে রেন্ডার করে, এটি আমাদের ব্যবহৃত প্রভাবটি স্মরণ করবে এবং তারপরে DOM আপডেট করার পরে আমাদের প্রভাব চালাবে। এটি প্রথম রেন্ডার সহ প্রতিটি রেন্ডারের ক্ষেত্রে ঘটে। অভিজ্ঞ জাভাস্ক্রিপ্ট বিকাশকারীরা লক্ষ্য করতে পারেন যে `UseEffect` এ ফাংশনটি প্রতিটি রেন্ডারে আলাদা হতে চলেছে। এটা ইচ্ছাকৃত। প্রকৃতপক্ষে, এটি আমাদের বাসী হয়ে যাওয়ার চিন্তা না করে প্রভাবের ভিতরে থেকে `count` মানটি পড়তে দেয়। যতবার আমরা আবার রেন্ডার করি, আমরা একটি _আলাদা_ effects শিডিউল করি, আগেরটি প্রতিস্থাপন করে। একটি উপায়ে, এটি effects রেন্ডার ফলাফলের অংশের মতো আচরণ করে - প্রতিটি effects একটি নির্দিষ্ট রেন্ডারের সাথে "সম্পর্কিত"। কেন এটি কার্যকর তা আমরা আরও স্পষ্ট দেখতে পাব [পরে এই পৃষ্ঠায়](#explanation-why-effects-run-on-each-update). >পরামর্শ > -> `componentDidMount` বা `componentDidUpdate`-এর বিপরীতে, `UseEffect` এর সাথে নির্ধারিত প্রভাবগুলি ব্রাউজারটিকে স্ক্রিনটি আপডেট করতে আটকাবে না। এটি আপনার অ্যাপ্লিকেশনটিকে আরও প্রতিক্রিয়াশীল মনে করে। বেশিরভাগ প্রভাবগুলির সিঙ্ক্রোনালি হওয়ার দরকার নেই। অস্বাভাবিক ক্ষেত্রে যেখানে তারা করেন (যেমন লেআউটটি পরিমাপ করা), সেখানে আলাদা রয়েছে [`useLayoutEffect`](/docs/hooks-reference.html#uselayouteffect) `UseEffect` এর অনুরূপ একটি API সহ হুক` +> `componentDidMount` বা `componentDidUpdate`-এর বিপরীতে, `UseEffect` এর সাথে নির্ধারিত প্রভাবগুলি ব্রাউজারটিকে স্ক্রিনটি আপডেট করতে আটকাবে না। এটি আপনার অ্যাপ্লিকেশনটিকে আরও Reactশীল মনে করে। বেশিরভাগ প্রভাবগুলির সিঙ্ক্রোনালি হওয়ার দরকার নেই। অস্বাভাবিক ক্ষেত্রে যেখানে তারা করেন (যেমন লেআউটটি পরিমাপ করা), সেখানে আলাদা রয়েছে [`useLayoutEffect`](/docs/hooks-reference.html#uselayouteffect) `UseEffect` এর অনুরূপ একটি API সহ হুক` ## Effects with Cleanup {#effects-with-cleanup} -এর আগে, আমরা কীভাবে এমন কোনও পার্শ্ব প্রতিক্রিয়া প্রকাশ করতে দেখলাম যাতে কোনও পরিষ্কারের প্রয়োজন নেই। যাইহোক, কিছু effect আছে। উদাহরণস্বরূপ, **আমরা কোনও বাহ্যিক ডেটা উত্সে একটি সাবস্ক্রিপশন সেট করতে চাই**। সেক্ষেত্রে পরিষ্কার করা জরুরী যাতে আমরা কোনও মেমরি ফুটো প্রবর্তন করি না! আসুন আমরা কীভাবে ক্লাস এবং হুকসের সাথে এটি করতে পারি তা তুলনা করি। +এর আগে, আমরা কীভাবে এমন কোনও পার্শ্ব React প্রকাশ করতে দেখলাম যাতে কোনও পরিষ্কারের প্রয়োজন নেই। যাইহোক, কিছু effect আছে। উদাহরণস্বরূপ, **আমরা কোনও বাহ্যিক ডেটা উত্সে একটি সাবস্ক্রিপশন সেট করতে চাই**। সেক্ষেত্রে পরিষ্কার করা জরুরী যাতে আমরা কোনও মেমরি ফুটো প্রবর্তন করি না! আসুন আমরা কীভাবে ক্লাস এবং হুকসের সাথে এটি করতে পারি তা তুলনা করি। ### ক্লাস ব্যবহার করে উদাহরণ {#example-using-classes-1} -একটি প্রতিক্রিয়া শ্রেণিতে, আপনি সাধারণত `componentDidMount` একটি সাবস্ক্রিপশন সেট আপ করতে এবং এটি `componentWillUnmount` সাফ করুন উদাহরণস্বরূপ, আসুন আমরা বলি যে আমাদের একটি `ChatAPI` মডিউল রয়েছে যা আমাদের বন্ধুর অনলাইন স্ট্যাটাস সাবস্ক্রাইব করতে দেয়। ক্লাস ব্যবহার করে আমরা কীভাবে সেই স্থিতিটি সাবস্ক্রাইব এবং প্রদর্শন করতে পারি তা এখানে: +একটি React শ্রেণিতে, আপনি সাধারণত `componentDidMount` একটি সাবস্ক্রিপশন সেট আপ করতে এবং এটি `componentWillUnmount` সাফ করুন উদাহরণস্বরূপ, আসুন আমরা বলি যে আমাদের একটি `ChatAPI` মডিউল রয়েছে যা আমাদের বন্ধুর অনলাইন স্ট্যাটাস সাবস্ক্রাইব করতে দেয়। ক্লাস ব্যবহার করে আমরা কীভাবে সেই স্থিতিটি সাবস্ক্রাইব এবং প্রদর্শন করতে পারি তা এখানে: ```js{8-26} class FriendStatus extends React.Component { @@ -198,7 +197,7 @@ class FriendStatus extends React.Component { আসুন দেখি কীভাবে আমরা হুকস সহ এই উপাদানটি লিখতে পারি। -আপনি হয়ত ভাবছেন যে ক্লিনআপটি সম্পাদন করার জন্য আমাদের একটি পৃথক effect প্রয়োজন। তবে সাবস্ক্রিপশন যুক্ত এবং অপসারণের কোডটি এতটা দৃঢ়ভাবে সম্পর্কিত যে `useEffect` এটিকে একসাথে রাখার জন্য ডিজাইন করা হয়েছে। যদি আপনার effect কোনও ফাংশন দেয়, প্রতিক্রিয়াটি পরিষ্কার করার সময় হলে এটি চালিত হবে: +আপনি হয়ত ভাবছেন যে ক্লিনআপটি সম্পাদন করার জন্য আমাদের একটি পৃথক effect প্রয়োজন। তবে সাবস্ক্রিপশন যুক্ত এবং অপসারণের কোডটি এতটা দৃঢ়ভাবে সম্পর্কিত যে `useEffect` এটিকে একসাথে রাখার জন্য ডিজাইন করা হয়েছে। যদি আপনার effect কোনও ফাংশন দেয়, Reactটি পরিষ্কার করার সময় হলে এটি চালিত হবে: ```js{6-16} import React, { useState, useEffect } from 'react'; @@ -227,7 +226,7 @@ function FriendStatus(props) { **আমরা কেন আমাদের effects থেকে কোনও ফাংশনে ফিরলাম?** এটি effects এর জন্য ঐচ্ছিক ক্লিনআপ প্রক্রিয়া। প্রতিটি effects এমন কোনও ফাংশন ফিরিয়ে দিতে পারে যা এর পরে পরিষ্কার হয়ে যায়। এটি আমাদের সাবস্ক্রিপশন একে অপরের নিকটে যুক্ত এবং অপসারণের জন্য যুক্তি রাখতে দেয়। তারা একই প্রভাব অংশ! -**প্রতিক্রিয়া কখন একটি effects পরিষ্কার করে?** উপাদানটি আনমাউন্ট করার সময় প্রতিক্রিয়া পরিচ্ছন্নতা সম্পাদন করে। তবে, যেমনটি আমরা আগে জেনেছি, effects প্রতিটি রেন্ডারের জন্য চালানো হয় এবং একবারে নয়। এই কারণেই প্রতিক্রিয়া *পরবর্তী* প্রভাবগুলি পরবর্তী সময় চালানোর আগে পূর্ববর্তী রেন্ডার থেকে effects পরিষ্কার করে। আমরা আলোচনা করব [কেন এটি বাগগুলি এড়াতে সহায়তা করে](#explanation-why-effects-run-on-each-update) এবং [এটি কার্য সম্পাদনের সমস্যা তৈরির ক্ষেত্রে কীভাবে এই আচরণ থেকে বেরিয়ে যায়](#tip-optimizing-performance-by-skipping-effects) পরে নীচে। +**React কখন একটি effects পরিষ্কার করে?** উপাদানটি আনমাউন্ট করার সময় React পরিচ্ছন্নতা সম্পাদন করে। তবে, যেমনটি আমরা আগে জেনেছি, effects প্রতিটি রেন্ডারের জন্য চালানো হয় এবং একবারে নয়। এই কারণেই React *পরবর্তী* প্রভাবগুলি পরবর্তী সময় চালানোর আগে পূর্ববর্তী রেন্ডার থেকে effects পরিষ্কার করে। আমরা আলোচনা করব [কেন এটি বাগগুলি এড়াতে সহায়তা করে](#explanation-why-effects-run-on-each-update) এবং [এটি কার্য সম্পাদনের সমস্যা তৈরির ক্ষেত্রে কীভাবে এই আচরণ থেকে বেরিয়ে যায়](#tip-optimizing-performance-by-skipping-effects) পরে নীচে। >মন্তব্য > @@ -235,7 +234,7 @@ function FriendStatus(props) { ## সংক্ষিপ্তবৃত্তি {#recap} -আমরা শিখেছি যে `useEffect` আমাদের একটি উপাদান সরবরাহের পরে বিভিন্ন ধরণের পার্শ্ব প্রতিক্রিয়া প্রকাশ করতে দেয়। কিছু প্রভাব পরিষ্কার করার প্রয়োজন হতে পারে যাতে তারা কোনও ফাংশন ফেরত দেয়: +আমরা শিখেছি যে `useEffect` আমাদের একটি উপাদান সরবরাহের পরে বিভিন্ন ধরণের পার্শ্ব React প্রকাশ করতে দেয়। কিছু প্রভাব পরিষ্কার করার প্রয়োজন হতে পারে যাতে তারা কোনও ফাংশন ফেরত দেয়: ```js useEffect(() => { @@ -268,7 +267,7 @@ effect হুক উভয়ই একক API সহ কেস ব্যবহ ## effects ব্যবহার করার জন্য টিপস {#tips-for-using-effects} -অভিজ্ঞ প্রতিক্রিয়ার ব্যবহারকারীরা সম্ভবত কৌতূহল বোধ করবেন এমন `UseEffect` - এর কিছু দিকগুলি গভীরতার সাথে আমরা এই পৃষ্ঠাটি চালিয়ে যাব। এখনই এগুলিতে খননের বাধ্যবাধকতা বোধ করবেন না। এফেক্ট হুক সম্পর্কে আরও বিস্তারিত জানতে আপনি এই পৃষ্ঠায় সর্বদা ফিরে আসতে পারেন। +অভিজ্ঞ Reactর ব্যবহারকারীরা সম্ভবত কৌতূহল বোধ করবেন এমন `UseEffect` - এর কিছু দিকগুলি গভীরতার সাথে আমরা এই পৃষ্ঠাটি চালিয়ে যাব। এখনই এগুলিতে খননের বাধ্যবাধকতা বোধ করবেন না। এফেক্ট হুক সম্পর্কে আরও বিস্তারিত জানতে আপনি এই পৃষ্ঠায় সর্বদা ফিরে আসতে পারেন। ### টিপ: উদ্বেগ আলাদা করতে একাধিক effects ব্যবহার করুন {#tip-use-multiple-effects-to-separate-concerns} @@ -335,7 +334,7 @@ function FriendStatusWithCounter(props) { } ``` -**হুকস আমাদের কী করছে তার উপর ভিত্তি করে কোডটি বিভক্ত করা যাক** পরিবর্তে একটি জীবনচক্র পদ্ধতির নাম। প্রতিক্রিয়াটি উপাদান দ্বারা ব্যবহৃত *প্রতিটি* প্রভাব প্রয়োগ করা হবে, তারা নির্দিষ্ট করা ক্রমে। +**হুকস আমাদের কী করছে তার উপর ভিত্তি করে কোডটি বিভক্ত করা যাক** পরিবর্তে একটি জীবনচক্র পদ্ধতির নাম। Reactটি উপাদান দ্বারা ব্যবহৃত *প্রতিটি* প্রভাব প্রয়োগ করা হবে, তারা নির্দিষ্ট করা ক্রমে। ### ব্যাখ্যা: প্রতিটি আপডেটে কেন প্রভাব চলতে পারে {#explanation-why-effects-run-on-each-update} @@ -361,7 +360,7 @@ function FriendStatusWithCounter(props) { **তবে `friend` প্রপ পরিবর্তন হলে কী হয়** কম্পোনেন্টটি স্ক্রিনে থাকা অবস্থায়? আমাদের উপাদানটি অন্য কোনও বন্ধুর অনলাইন স্ট্যাটাস প্রদর্শন করা চালিয়ে যাবে। এটি একটি বাগ। আনসাবস্ক্রাইব করা কলটি যদি ভুল বন্ধু আইডি ব্যবহার করে তবে আনমাউন্ট করার সময় আমরা মেমরি ফাঁস বা ক্রাশও করতে পারি। -শ্রেণীর উপাদানগুলিতে, এই কেসটি হ্যান্ডেল করতে আমাদের `componentDidUpdate` যুক্ত করতে হবে: +শ্রেণীর কম্পোনেন্টকে, এই কেসটি হ্যান্ডেল করতে আমাদের `componentDidUpdate` যুক্ত করতে হবে: ```js{8-19} componentDidMount() { @@ -428,11 +427,11 @@ ChatAPI.subscribeToFriendStatus(300, handleStatusChange); // Run next effect ChatAPI.unsubscribeFromFriendStatus(300, handleStatusChange); // Clean up last effect ``` -এই আচরণটি ডিফল্টরূপে ধারাবাহিকতা নিশ্চিত করে এবং আপডেট যুক্তি অনুপস্থিতির কারণে শ্রেণি উপাদানগুলিতে প্রচলিত বাগগুলি প্রতিরোধ করে। +এই আচরণটি ডিফল্টরূপে ধারাবাহিকতা নিশ্চিত করে এবং আপডেট যুক্তি অনুপস্থিতির কারণে শ্রেণি কম্পোনেন্টকে প্রচলিত বাগগুলি প্রতিরোধ করে। ### টিপ: স্কিপিং effects দ্বারা পারফরম্যান্স অনুকূলকরণ {#tip-optimizing-performance-by-skipping-effects} -কিছু ক্ষেত্রে, পরিষ্কার করা বা প্রতিটি রেন্ডার পরে প্রভাব প্রয়োগ করা একটি পারফরম্যান্স সমস্যা তৈরি করতে পারে। শ্রেণীর উপাদানগুলিতে, আমরা `prevProps` বা `prevDate` এর ভিতরে `componentDidUpdate` এর সাথে অতিরিক্ত তুলনা লিখে এটি সমাধান করতে পারি: +কিছু ক্ষেত্রে, পরিষ্কার করা বা প্রতিটি রেন্ডার পরে প্রভাব প্রয়োগ করা একটি পারফরম্যান্স সমস্যা তৈরি করতে পারে। শ্রেণীর কম্পোনেন্টকে, আমরা `prevProps` বা `prevDate` এর ভিতরে `componentDidUpdate` এর সাথে অতিরিক্ত তুলনা লিখে এটি সমাধান করতে পারি: ```js componentDidUpdate(prevProps, prevState) { @@ -442,7 +441,7 @@ componentDidUpdate(prevProps, prevState) { } ``` -এই প্রয়োজনীয়তাটি যথেষ্ট সাধারণ যে এটি `useEffect` হুক API এ অন্তর্নির্মিত। আপনি প্রতিক্রিয়াটিকে *এড়িয়ে যান* বলতে পারেন কোনও প্রভাব প্রয়োগ করে যদি নির্দিষ্ট রেন্ডারগুলির মধ্যে কিছু মান পরিবর্তন না হয়। এটি করতে, `UseEffect`- এ ঐচ্ছিক দ্বিতীয় আর্গুমেন্ট হিসাবে একটি অ্যারে পাস করুন: +এই প্রয়োজনীয়তাটি যথেষ্ট সাধারণ যে এটি `useEffect` হুক API এ অন্তর্নির্মিত। আপনি Reactটিকে *এড়িয়ে যান* বলতে পারেন কোনও প্রভাব প্রয়োগ করে যদি নির্দিষ্ট রেন্ডারগুলির মধ্যে কিছু মান পরিবর্তন না হয়। এটি করতে, `UseEffect`- এ ঐচ্ছিক দ্বিতীয় আর্গুমেন্ট হিসাবে একটি অ্যারে পাস করুন: ```js{3} useEffect(() => { @@ -450,9 +449,9 @@ useEffect(() => { }, [count]); // Only re-run the effect if count changes ``` -উপরের উদাহরণে, আমরা দ্বিতীয় আর্গুমেন্ট হিসাবে `[count]` pass পাস করি। এটার মানে কি? যদি `count` `5` হয় এবং তারপরে আমাদের উপাদানটি এখনও `count` সমান `5` এর সাথে পুনরায় রেন্ডার করে, React পূর্ববর্তী রেন্ডার থেকে `[5]` এবং পরবর্তী রেন্ডার থেকে `[5]` তুলনা করবে । অ্যারেতে থাকা সমস্ত আইটেম সমান (`5 === 5`), প্রতিক্রিয়াটি effects এড়িয়ে যাবে। এটাই আমাদের অপ্টিমাইজেশন। +উপরের উদাহরণে, আমরা দ্বিতীয় আর্গুমেন্ট হিসাবে `[count]` pass পাস করি। এটার মানে কি? যদি `count` `5` হয় এবং তারপরে আমাদের উপাদানটি এখনও `count` সমান `5` এর সাথে পুনরায় রেন্ডার করে, React পূর্ববর্তী রেন্ডার থেকে `[5]` এবং পরবর্তী রেন্ডার থেকে `[5]` তুলনা করবে । অ্যারেতে থাকা সমস্ত আইটেম সমান (`5 === 5`), Reactটি effects এড়িয়ে যাবে। এটাই আমাদের অপ্টিমাইজেশন। -যখন আমরা `count` কে আপডেট করে `6` এ আপডেট করি তখন React পূর্ববর্তী রেন্ডার থেকে `[5]` অ্যারেতে থাকা আইটেমগুলির সাথে পরবর্তী রেন্ডার থেকে `[6]` অ্যারে আইটেমগুলির সাথে তুলনা করবে। এবার `5! == 6` এর কারণে প্রতিক্রিয়াটি পুনরায় প্রয়োগ করবে অ্যারেতে যদি একাধিক আইটেম থাকে তবে প্রতিক্রিয়াগুলি কেবলমাত্র তার মধ্যে একটি আলাদা হলেও কার্যকরভাবে পুনরায় চালিত হবে। +যখন আমরা `count` কে আপডেট করে `6` এ আপডেট করি তখন React পূর্ববর্তী রেন্ডার থেকে `[5]` অ্যারেতে থাকা আইটেমগুলির সাথে পরবর্তী রেন্ডার থেকে `[6]` অ্যারে আইটেমগুলির সাথে তুলনা করবে। এবার `5! == 6` এর কারণে Reactটি পুনরায় প্রয়োগ করবে অ্যারেতে যদি একাধিক আইটেম থাকে তবে Reactগুলি কেবলমাত্র তার মধ্যে একটি আলাদা হলেও কার্যকরভাবে পুনরায় চালিত হবে। এটি ক্লিনআপ পর্বের effects এর জন্যও কাজ করে: @@ -475,7 +474,7 @@ useEffect(() => { > >আপনি যদি এই অপটিমাইজেশন ব্যবহার করেন তবে অ্যারে অন্তর্ভুক্ত রয়েছে তা নিশ্চিত করুন **উপাদান ব্যবস্থার সমস্ত মান (যেমন props এবং state) যা সময়ের সাথে সাথে পরিবর্তিত হয় এবং যা প্রভাব দ্বারা ব্যবহৃত হয়**. অন্যথায়, আপনার কোড পূর্ববর্তী রেন্ডারগুলির থেকে বাসি মানগুলি উল্লেখ করবে। এই সম্পর্কে আরও জানো [কিভাবে কার্যাদি মোকাবেলা করতে](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) এবং [অ্যারে খুব ঘন ঘন পরিবর্তিত হলে কী করবেন](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often). > ->আপনি যদি কোনও প্রভাব চালাতে চান এবং এটি একবারে পরিষ্কার করতে চান (মাউন্ট এবং আনমাউন্টে), আপনি একটি খালি অ্যারে (`[]`) দ্বিতীয় আর্গুমেন্ট হিসাবে পাস করতে পারেন। এটি প্রতিক্রিয়া জানায় যে আপনার effect props বা state *কোনও* মানের উপর নির্ভর করে না, সুতরাং এটি পুনরায় চালানোর প্রয়োজন হয় না। এটি কোনও বিশেষ কেস হিসাবে পরিচালিত হয় না - নির্ভরতা অ্যারে সর্বদা কীভাবে কাজ করে তা সরাসরি তা অনুসরণ করে। +>আপনি যদি কোনও প্রভাব চালাতে চান এবং এটি একবারে পরিষ্কার করতে চান (মাউন্ট এবং আনমাউন্টে), আপনি একটি খালি অ্যারে (`[]`) দ্বিতীয় আর্গুমেন্ট হিসাবে পাস করতে পারেন। এটি React জানায় যে আপনার effect props বা state *কোনও* মানের উপর নির্ভর করে না, সুতরাং এটি পুনরায় চালানোর প্রয়োজন হয় না। এটি কোনও বিশেষ কেস হিসাবে পরিচালিত হয় না - নির্ভরতা অ্যারে সর্বদা কীভাবে কাজ করে তা সরাসরি তা অনুসরণ করে। > >আপনি যদি খালি অ্যারে (`[]`) পাস করেন তবে প্রপসের ভিতরে থাকা props এবং state সর্বদা তাদের প্রাথমিক মান থাকবে। আর্গুমেন্ট `[]` পাশ করার সময় দ্বিতীয় আর্গুমেন্টটি পরিচিত `componentDidMount` এবং `componentWillUnmount` মানসিক মডেলের কাছাকাছি থাকায় সাধারণত রয়েছে [উত্তম](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [সমাধান](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) পুনরায় চলমান effects প্রায়শই এড়াতে। এছাড়াও, ভুলে যাবেন না যে ব্রাউজারটি আঁকার পরে React `UseEffect` চলমান স্থগিত করে, সুতরাং অতিরিক্ত কাজ করা কোনও সমস্যা কম। > @@ -487,4 +486,4 @@ useEffect(() => { হুকস কীভাবে [প্রেরণা](/docs/hooks-intro.html#motivation) এর মধ্যে বর্ণিত সমস্যাগুলি সমাধান করে তাও আমরা দেখতে শুরু করেছি। আমরা দেখেছি কীভাবে কার্যকরভাবে ক্লিনআপ `componentDidUpdate` এবং `componentWillUnmount` সদৃশতা এড়ানো যায়, সম্পর্কিত কোডকে একসাথে নিয়ে আসে এবং বাগগুলি এড়াতে আমাদের সহায়তা করে। আমরা তাদের লক্ষ্য দ্বারা কীভাবে প্রভাবগুলি পৃথক করতে পারি তাও আমরা দেখেছি, যা এমন কিছু যা আমরা ক্লাসে মোটেই করতে পারিনি। -এই মুহুর্তে আপনি প্রশ্ন করছেন যে হুকস কীভাবে কাজ করে। কোন `useState` কলটি পুনরায় রেন্ডারগুলির মধ্যে কোন state ভেরিয়েবলের সাথে সম্পর্কিত তা কীভাবে প্রতিক্রিয়া জানবে? প্রতিটি আপডেটে পূর্ববর্তী এবং পরবর্তী effects কীভাবে প্রতিক্রিয়া হয় "মিলিত হয়"? **পরবর্তী পৃষ্ঠায় আমরা শিখব [হুকসের বিধি](/docs/hooks-rules.html) -- তারা হুকসকে কাজ করার জন্য প্রয়োজনীয়।** +এই মুহুর্তে আপনি প্রশ্ন করছেন যে হুকস কীভাবে কাজ করে। কোন `useState` কলটি পুনরায় রেন্ডারগুলির মধ্যে কোন state ভেরিয়েবলের সাথে সম্পর্কিত তা কীভাবে React জানবে? প্রতিটি আপডেটে পূর্ববর্তী এবং পরবর্তী effects কীভাবে React হয় "মিলিত হয়"? **পরবর্তী পৃষ্ঠায় আমরা শিখব [হুকসের বিধি](/docs/hooks-rules.html) -- তারা হুকসকে কাজ করার জন্য প্রয়োজনীয়।** From 6a129c0d38f8584535068161a007f8d09358be0c Mon Sep 17 00:00:00 2001 From: sabbirshawon Date: Sun, 7 Jun 2020 09:07:46 +0600 Subject: [PATCH 3/3] update translation --- content/docs/hooks-effect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md index 23aa5a290..f8b023e0d 100644 --- a/content/docs/hooks-effect.md +++ b/content/docs/hooks-effect.md @@ -35,7 +35,7 @@ function Example() { এই স্নিপেট উপর ভিত্তি করে [counter example from the previous page](/docs/hooks-state.html), তবে আমরা এতে একটি নতুন বৈশিষ্ট্য যুক্ত করেছি: আমরা ক্লিকের সংখ্যা সহ কাস্টম বার্তায় নথির শিরোনাম সেট করেছি। -তথ্য আনা, একটি সাবস্ক্রিপশন সেট আপ, এবং React কম্পোনেন্টকে ম্যানুয়ালি DOM পরিবর্তন করা পার্শ্ব React গুলির উদাহরণ। আপনি এই অপারেশনগুলিকে "side effects" (or just "effects"), বলার জন্য অভ্যস্ত কিনা বা না, আপনি সম্ভবত আপনার কম্পোনেন্টকে এগুলি সম্পাদন করেছেন। +তথ্য আনা, একটি সাবস্ক্রিপশন সেট আপ, এবং React কম্পোনেন্টকে ম্যানুয়ালি DOM পরিবর্তন করা পার্শ্ব React গুলির উদাহরণ। আপনি এই অপারেশনগুলিকে "পার্শ্ব প্রতিক্রিয়া" (or just "effects"), বলার জন্য অভ্যস্ত কিনা বা না, আপনি সম্ভবত আপনার কম্পোনেন্টকে এগুলি সম্পাদন করেছেন। >পরামর্শ >