From 1e700cf94dd7ddcfa4343a044a8ad9d84d94bda4 Mon Sep 17 00:00:00 2001 From: nafistiham Date: Mon, 15 May 2023 07:47:09 +0600 Subject: [PATCH 1/6] escape-hatch-wip --- src/content/learn/escape-hatches.md | 40 ++++++++++++++--------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index 69e733521..38cfaf8da 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -4,32 +4,32 @@ title: Escape Hatches -Some of your components may need to control and synchronize with systems outside of React. For example, you might need to focus an input using the browser API, play and pause a video player implemented without React, or connect and listen to messages from a remote server. In this chapter, you'll learn the escape hatches that let you "step outside" React and connect to external systems. Most of your application logic and data flow should not rely on these features. +আপনার কিছু কম্পোনেন্টের সম্ভবত React এর বাইরের সিস্টেমগুলির সাথে নিয়ন্ত্রণ এবং সিঙ্ক্রোনাইজ করার প্রয়োজন হতে পারে। উদাহরণস্বরূপ, আপনার ব্রাউজার API ব্যবহার করে একটি ইনপুটে ফোকাস করা লাগতে পারে, React ব্যবহার না করে বানানো একটি ভিডিও প্লেয়ার চালু এবং বন্ধ করতে হতে পারে, অথবা একটি রিমোট সার্ভারের সাথে সংযুক্ত হয়ে message listen করতে হতে পারে। এই অধ্যায়ে, আপনি শিখবেন যে escape hatch আপনাকে React থেকে "বাইরে পদক্ষেপ" নিতে এবং বাইরের সিস্টেমগুলির সাথে সংযোগ করতে দেয়। আপনার অ্যাপ্লিকেশনের অধিকাংশ যুক্তি এবং ডাটা ফ্লো এই ফিচারগুলির উপর নির্ভর করা উচিত নয়। -* [How to "remember" information without re-rendering](/learn/referencing-values-with-refs) -* [How to access DOM elements managed by React](/learn/manipulating-the-dom-with-refs) -* [How to synchronize components with external systems](/learn/synchronizing-with-effects) -* [How to remove unnecessary Effects from your components](/learn/you-might-not-need-an-effect) -* [How an Effect's lifecycle is different from a component's](/learn/lifecycle-of-reactive-effects) -* [How to prevent some values from re-triggering Effects](/learn/separating-events-from-effects) -* [How to make your Effect re-run less often](/learn/removing-effect-dependencies) -* [How to share logic between components](/learn/reusing-logic-with-custom-hooks) +* [কীভাবে re-render না করে তথ্য "মনে রাখবেন"](/learn/referencing-values-with-refs) +* [কীভাবে React এর পরিচালিত DOM এলিমেন্টে ঢুকবেন](/learn/manipulating-the-dom-with-refs) +* [কীভাবে বাইরের সিস্টেমের সাথে সিঙ্ক্রোনাইজ করবেন](/learn/synchronizing-with-effects) +* [কীভাবে কম্পোনেন্ট থেকে অপ্রয়োজনীয় Effect সরিয়ে ফেলবেন](/learn/you-might-not-need-an-effect) +* [কীভাবে একটি Effect এর লাইফ সাইকেল একটি কম্পোনেন্টের লাইফ সাইকেল থেকে ভিন্ন](/learn/lifecycle-of-reactive-effects) +* [কীভাবে কিছু ভ্যালুকে Effects re-triggering করা থেকে বিরত রাখবেন](/learn/separating-events-from-effects) +* [কীভাবে আপনার Effect গুলোর re-run এর সংখ্যা কমাবেন](/learn/removing-effect-dependencies) +* [কীভাবে একাধিক কম্পোনেন্টের মধ্যে লজিক ভাগাভাগি করে নেবেন](/learn/reusing-logic-with-custom-hooks) -## Referencing values with refs {/*referencing-values-with-refs*/} +## ref এর সাহায্যে value referencing {/*referencing-values-with-refs*/} -When you want a component to "remember" some information, but you don't want that information to [trigger new renders](/learn/render-and-commit), you can use a *ref*: +আপনি যখন একটি কম্পোনেন্টের কিছু তথ্য 'remember' করার চাহিদা অনুভব করেন, কিন্তু আপনি চান না যে ওই তথ্য [নতুন রেন্ডার চালু করুক](/learn/render-and-commit), তখন আপনি *ref* ব্যবহার করতে পারেন: ```js const ref = useRef(0); ``` -Like state, refs are retained by React between re-renders. However, setting state re-renders a component. Changing a ref does not! You can access the current value of that ref through the `ref.current` property. +state এর মতো, re-render এর ফাঁকে ফাঁকে React ref গুলোকে সংরক্ষণ করে। তবে, state সেট করলে একটি কম্পোনেন্ট re-render হয়। একটি ref পরিবর্তন করলে তা হয় না! আপনি `ref.current` প্রপার্টির মাধ্যমে ওই ref এর বর্তমান মান অ্যাক্সেস করতে পারেন। @@ -54,17 +54,17 @@ export default function Counter() { -A ref is like a secret pocket of your component that React doesn't track. For example, you can use refs to store [timeout IDs](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#return_value), [DOM elements](https://developer.mozilla.org/en-US/docs/Web/API/Element), and other objects that don't impact the component's rendering output. +ref হল আপনার কম্পোনেন্টের এমন একটি গোপন পকেট যেটি React ট্র্যাক করে না। উদাহরণস্বরূপ, আপনি [timeout IDs](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#return_value), [DOM এলিমেন্ট](https://developer.mozilla.org/en-US/docs/Web/API/Element), এবং অন্যান্য অবজেক্ট সংরক্ষণ করার জন্য ref ব্যবহার করতে পারেন, যা কম্পোনেন্টের রেন্ডারিং আউটপুটে প্রভাব ফেলে না। -Read **[Referencing Values with Refs](/learn/referencing-values-with-refs)** to learn how to use refs to remember information. +তথ্য মনে রাখার খাতিরে ref ব্যবহার করা শিখতে পড়ুন **[Referencing Values with Refs](/learn/referencing-values-with-refs)**। -## Manipulating the DOM with refs {/*manipulating-the-dom-with-refs*/} +## ref ব্যবহার করে DOM এর পরিবর্তন {/*manipulating-the-dom-with-refs*/} -React automatically updates the DOM to match your render output, so your components won't often need to manipulate it. However, sometimes you might need access to the DOM elements managed by React—for example, to focus a node, scroll to it, or measure its size and position. There is no built-in way to do those things in React, so you will need a ref to the DOM node. For example, clicking the button will focus the input using a ref: +React স্বয়ংক্রিয়ভাবে আপনার রেন্ডার আউটপুটের সাথে মিলিয়ে DOM আপডেট করে, তাই আপনার কম্পোনেন্টগুলোর প্রায়শই এটি পরিবর্তন করার দরকার হয় না। তবে, মাঝে মাঝে আপনার DOM এলিমেন্টগুলোতে অ্যাক্সেস প্রয়োজন হতে পারে যা React দ্বারা পরিচালিত—উদাহরণস্বরূপ, একটি নোডে ফোকাস করা, এটিতে স্ক্রল করা, অথবা এর আকার এবং অবস্থান মাপা। React এ এরকম কিছু করার জন্য কোনো বিল্ট-ইন উপায় নেই, তাই আপনার DOM নোডের জন্য একটি ref প্রয়োজন হবে। উদাহরণস্বরূপ, বাটনটি ক্লিক করলে একটি ref ব্যবহার করে ইনপুটে ফোকাস হবে: @@ -93,15 +93,15 @@ export default function Form() { -Read **[Manipulating the DOM with Refs](/learn/manipulating-the-dom-with-refs)** to learn how to access DOM elements managed by React. +React পরিচালিত DOM এলিমেন্টে অ্যাক্সেস নেওয়া শিখতে পড়ুন **[Manipulating the DOM with Refs](/learn/manipulating-the-dom-with-refs)**। -## Synchronizing with Effects {/*synchronizing-with-effects*/} +## Effect এর সাথে সিঙ্ক্রোনাইজেসন {/*synchronizing-with-effects*/} -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. Unlike event handlers, which let you handle particular events, *Effects* let you run some code after rendering. Use them to synchronize your component with a system outside of React. +কিছু কম্পোনেন্টের বাইরের সিস্টেমগুলোর সাথে সিঙ্ক্রোনাইজ করার প্রয়োজন হতে পারে। উদাহরণস্বরূপ, হতে পারে আপনি React state এর উপর ভিত্তি করে একটি non-React কম্পোনেন্ট নিয়ন্ত্রণ করতে চান, অথবা চান একটি সার্ভার সংযোগ সেট আপ করতে, অথবা একটি কম্পোনেন্ট স্ক্রিনে প্রদর্শিত হলে একটি এনালিটিক্স লগ পাঠাতে চাইতে পারেন। যেখানে event handler আপনাকে নির্দিষ্ট event পরিচালনা করতে দেয়, Effects রেন্ডারিং এর পরে কিছু কোড চালাতে দেয়। আপনার কম্পোনেন্টকে React এর বাইরের একটি সিস্টেমের সাথে সিঙ্ক্রোনাইজ করার জন্য Effects ব্যবহার করুন। -Press Play/Pause a few times and see how the video player stays synchronized to the `isPlaying` prop value: +কয়েকবার Play/Pause এ চাপ দিন এবং খেয়াল করুন কীভাবে ভিডিও প্লেয়ার `isPlaying` prop এর সাথে সিঙ্ক্রোনাইজড থাকছে। From 68182c90da0d5d8179c2c9700e6cc5257262aeef Mon Sep 17 00:00:00 2001 From: nafistiham Date: Mon, 15 May 2023 19:37:55 +0600 Subject: [PATCH 2/6] escape-hatch-wip --- src/content/learn/escape-hatches.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index 38cfaf8da..a23ec6d50 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -145,7 +145,8 @@ video { width: 250px; } -Many Effects also "clean up" after themselves. For example, an Effect that sets up a connection to a chat server should return a *cleanup function* that tells React how to disconnect your component from that server: + +অনেক Effects নিজেদের "clean up" নিজেরাই করে নেয়। উদাহরণস্বরূপ, একটি চ্যাট সার্ভারের সাথে সংযোগ স্থাপন করা Effect এর উচিত একটি *cleanup function* ফেরত দেওয়া যা React কে বলে দিবে আপনার কম্পোনেন্টকে সেই সার্ভার থেকে সংযোগ বিচ্ছিন্ন করতে। @@ -184,6 +185,7 @@ input { display: block; margin-bottom: 20px; } In development, React will immediately run and clean up your Effect one extra time. This is why you see `"✅ Connecting..."` printed twice. This ensures that you don't forget to implement the cleanup function. +ডেভেলপমেন্টে, React আপনার Effect টি তাৎক্ষণিকভাবে চালাবে এবং একবার অতিরিক্ত পরিষ্কার করবে। এই কারণেই আপনি "✅ Connecting..."  দুবার। এটি নিশ্চিত করে যে আপনি cleanup function বাস্তবায়ন করতে ভুলবেন না। @@ -448,7 +450,7 @@ label { display: block; margin-top: 10px; } -This is not ideal. You want to re-connect to the chat only if the `roomId` has changed. Switching the `theme` shouldn't re-connect to the chat! Move the code reading `theme` out of your Effect into an *Effect Event*: +এটি আদর্শ নয়। আপনি কেবলমাত্র `roomId` পরিবর্তিত হলে চ্যাটে পুনরায় সংযোগ করতে চান। `theme` পরিবর্তন করা হলেই চ্যাটে পুনরায় সংযোগ করা উচিত নয়! আপনার Effect থেকে theme read করার কোডটি একটি *Effect Event* এ সরিয়ে নিন: From eb7c16a628163dbb37c51e337b555fc4f108c185 Mon Sep 17 00:00:00 2001 From: nafistiham Date: Tue, 16 May 2023 14:29:46 +0600 Subject: [PATCH 3/6] escape-hatches-wip30% --- src/content/learn/escape-hatches.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index a23ec6d50..a5537cb26 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -184,16 +184,15 @@ input { display: block; margin-bottom: 20px; } -In development, React will immediately run and clean up your Effect one extra time. This is why you see `"✅ Connecting..."` printed twice. This ensures that you don't forget to implement the cleanup function. -ডেভেলপমেন্টে, React আপনার Effect টি তাৎক্ষণিকভাবে চালাবে এবং একবার অতিরিক্ত পরিষ্কার করবে। এই কারণেই আপনি "✅ Connecting..."  দুবার। এটি নিশ্চিত করে যে আপনি cleanup function বাস্তবায়ন করতে ভুলবেন না। +ডেভেলপমেন্টে, React আপনার Effect টি তাৎক্ষণিকভাবে চালাবে এবং একবার অতিরিক্ত clean up করবে। এই কারণেই আপনি "✅ Connecting..."  দুবার দেখবেন। এটি নিশ্চিত করে যে আপনি cleanup function বাস্তবায়ন করতে ভুলছেন না। -Read **[Synchronizing with Effects](/learn/synchronizing-with-effects)** to learn how to synchronize components with external systems. +বাইরের সিস্টেমগুলির সাথে কম্পোনেন্টগুলি সিঙ্ক্রোনাইজ করা শিখতে **[Effects এর সাথে সিঙ্ক্রোনাইজেশন](/learn/synchronizing-with-effects)** পড়ুন। -## You Might Not Need An Effect {/*you-might-not-need-an-effect*/} +## আপনার Effect এর প্রয়োজন নাও পড়তে পারে {/*you-might-not-need-an-effect*/} Effects are an escape hatch from the React paradigm. They let you "step outside" of React and synchronize your components with some external system. If there is no external system involved (for example, if you want to update a component's state when some props or state change), you shouldn't need an Effect. Removing unnecessary Effects will make your code easier to follow, faster to run, and less error-prone. @@ -203,6 +202,9 @@ There are two common cases in which you don't need Effects: For example, you don't need an Effect to adjust some state based on other state: +Effect হল React এর জগত থেকে একটি escape hatch। এটি আপনাকে "React এর বাইরে পদক্ষেপ" নিতে দেয় এবং সাথে আপনার কম্পোনেন্টগুলিকে কিছু বাইরের সিস্টেমের সাথে সিঙ্ক্রোনাইজ করতেও দেয়। যদি কোনো বাইরের সিস্টেম জড়িত না থাকে (উদাহরণস্বরূপ, আপনি যদি কিছু props অথবা state পরিবর্তন হলে একটি কম্পোনেন্টের state আপডেট করতে চান), তব + + ```js {5-9} function Form() { const [firstName, setFirstName] = useState('Taylor'); From a403f82f61b6df5b5baa8cb92eb67b0da25702cb Mon Sep 17 00:00:00 2001 From: nafistiham Date: Wed, 17 May 2023 11:45:23 +0600 Subject: [PATCH 4/6] escape-hatch-40% --- src/content/learn/escape-hatches.md | 35 +++++++++++++---------------- 1 file changed, 16 insertions(+), 19 deletions(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index a5537cb26..2a81228e2 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -194,16 +194,11 @@ input { display: block; margin-bottom: 20px; } ## আপনার Effect এর প্রয়োজন নাও পড়তে পারে {/*you-might-not-need-an-effect*/} -Effects are an escape hatch from the React paradigm. They let you "step outside" of React and synchronize your components with some external system. If there is no external system involved (for example, if you want to update a component's state when some props or state change), you shouldn't need an Effect. Removing unnecessary Effects will make your code easier to follow, faster to run, and less error-prone. - -There are two common cases in which you don't need Effects: -- **You don't need Effects to transform data for rendering.** -- **You don't need Effects to handle user events.** - -For example, you don't need an Effect to adjust some state based on other state: - -Effect হল React এর জগত থেকে একটি escape hatch। এটি আপনাকে "React এর বাইরে পদক্ষেপ" নিতে দেয় এবং সাথে আপনার কম্পোনেন্টগুলিকে কিছু বাইরের সিস্টেমের সাথে সিঙ্ক্রোনাইজ করতেও দেয়। যদি কোনো বাইরের সিস্টেম জড়িত না থাকে (উদাহরণস্বরূপ, আপনি যদি কিছু props অথবা state পরিবর্তন হলে একটি কম্পোনেন্টের state আপডেট করতে চান), তব +Effect হল React এর জগত থেকে একটি escape hatch। এটি আপনাকে "React এর বাইরে পদক্ষেপ" নিতে দেয় এবং সাথে আপনার কম্পোনেন্টগুলিকে কিছু বাইরের সিস্টেমের সাথে সিঙ্ক্রোনাইজ করতে দেয়। যদি কোনো বাইরের সিস্টেম জড়িত না থাকে (উদাহরণস্বরূপ, আপনি যদি কিছু props অথবা state পরিবর্তন হলে একটি কম্পোনেন্টের state আপডেট করতে চান), আপনার Effect এর প্রয়োজন হবার কথা না। অপ্রয়োজনীয় Effect সরিয়ে ফেললে আপনার কোড সহজে পড়া যাবে, দ্রুত চলবে, এবং ভুল কম হবে। +সাধারণত দুটি ক্ষেত্রে আপনার Effect দরকার হবে নাঃ +- **রেন্ডারের জন্য ডেটা transform করতে Effect এর দরকার নেই।** +- **User event দেখাশোনা করার জন্য আপনার Effect এর প্রয়োজন নেই।** ```js {5-9} function Form() { @@ -219,7 +214,7 @@ function Form() { } ``` -Instead, calculate as much as you can while rendering: +বরং, রেন্ডার করার সময় যতটা সম্ভব হিসেব করে রাখেনঃ ```js {4-5} function Form() { @@ -231,19 +226,19 @@ function Form() { } ``` -However, you *do* need Effects to synchronize with external systems. +কিন্তু, বাইরের সিস্টেমের সাথে সিঙ্ক্রোনাইজ করতে আপনার Effect *লাগবেই*। -Read **[You Might Not Need an Effect](/learn/you-might-not-need-an-effect)** to learn how to remove unnecessary Effects. +অপ্রয়োজনীয় Effect কীভাবে সরাবেন শিখার জন্য পড়ুন **[আপনার Effect এর প্রয়োজন নাও পড়তে পারে](/learn/you-might-not-need-an-effect)** -## Lifecycle of reactive effects {/*lifecycle-of-reactive-effects*/} +## Reactive effects এর জীবনচক্র {/*lifecycle-of-reactive-effects*/} -Effects have a different lifecycle from components. Components may mount, update, or unmount. An Effect can only do two things: to start synchronizing something, and later to stop synchronizing it. This cycle can happen multiple times if your Effect depends on props and state that change over time. +Effect এর জীবনচক্র কম্পোনেন্টের চেয়ে আলাদা। কম্পোনেন্ট মাউন্ট, আপডেট অথবা আনমাউন্ট করতে পারে। একটি Effect কেবল দুটি কাজ করতে পারে: কিছু সিঙ্ক্রোনাইজ শুরু করা, এবং পরে এটি সিঙ্ক্রোনাইজ বন্ধ করা। আপনার Effect যদি props এবং state এর উপর নির্ভর করে থাকে যা সময়ের সাথে সাথে পরিবর্তিত হয়, তবে এই চক্রটি একাধিকবার ঘটতে পারে। -This Effect depends on the value of the `roomId` prop. Props are *reactive values,* which means they can change on a re-render. Notice that the Effect *re-synchronizes* (and re-connects to the server) if `roomId` changes: +এই Effect টি `roomId` prop এর মানের উপর নির্ভর করে। Prop হল *reactive value,* যার অর্থ তারা একটি re-render এ পরিবর্তিত হতে পারে। লক্ষ্য করুন যে `roomId` পরিবর্তিত হলে Effect *re-synchronize* করে। (এবং সার্ভারের সাথে পুনরায় সংযোগ স্থাপন করে): @@ -306,24 +301,26 @@ button { margin-left: 10px; } -React provides a linter rule to check that you've specified your Effect's dependencies correctly. If you forget to specify `roomId` in the list of dependencies in the above example, the linter will find that bug automatically. +React একটি linter rule দেয় যা লক্ষ্য করে যে আপনি আপনার Effect এর ডিপেন্ডেন্সি সঠিকভাবে নির্দিষ্ট করেছেন কিনা। যদি আপনি উপরের উদাহরণে ডিপেন্ডেন্সিগুলির তালিকায় `roomId` উল্লেখ করতে ভুলে যান, তবে linter স্বয়ংক্রিয়ভাবে সেই বাগটি খুঁজে বের করবে। -Read **[Lifecycle of Reactive Events](/learn/lifecycle-of-reactive-effects)** to learn how an Effect's lifecycle is different from a component's. +একটা কম্পোনেন্টের জীবনচক্র থেকে একটা Effect এর জীবনচক্র কীভাবে আলাদা শিখার জন্য পড়ুন **[Reactive Events এর জীবনচক্র](/learn/lifecycle-of-reactive-effects)** -## Separating events from Effects {/*separating-events-from-effects*/} +## Events থেকে Effects আলাদা করা {/*separating-events-from-effects*/} -This section describes an **experimental API that has not yet been released** in a stable version of React. +এই সেকশনে একটি **গবেষণামূলক API** নিয়ে বিবরণ দেওয়া হয়েছে **যা এখনো React এর কোন স্টেবল ভার্শনে উন্মুক্ত করা হয়নি**। Event handlers only re-run when you perform the same interaction again. Unlike event handlers, Effects re-synchronize if any of the values they read, like props or state, are different than during last render. Sometimes, you want a mix of both behaviors: an Effect that re-runs in response to some values but not others. +Event handler-গুলি কেবল পুনরায় চালানো হয় যখন আপনি একই interaction আরেকবার করেন। ইভেন্ট হ্যান্ডলারের তুলনায়, 'Effects' পুনরায় সিঙ্ক্রোনাইজ করে যদি তারা যে কোন মান পড়ে, যেমন props বা state, গত রেন্ডারের সময় তার থেকে ভিন্ন হয়। মাঝে মাঝে, আপনি দুটি আচরণের মিশ্রণটি চান: কিছু মানের উপর প্রতিক্রিয়া হিসেবে পুনরায় রান করা একটি 'Effect' কিন্তু অন্যান্য নয়। + All code inside Effects is *reactive.* It will run again if some reactive value it reads has changed due to a re-render. For example, this Effect will re-connect to the chat if either `roomId` or `theme` have changed: From 6f4b6e1be67cc274e7e2f2adc15f3afb96dd5552 Mon Sep 17 00:00:00 2001 From: nafistiham Date: Wed, 17 May 2023 13:10:14 +0600 Subject: [PATCH 5/6] escape-hatch-done --- src/content/learn/escape-hatches.md | 32 ++++++++++++++--------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index 2a81228e2..ca78dba0d 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -317,11 +317,9 @@ React একটি linter rule দেয় যা লক্ষ্য করে য -Event handlers only re-run when you perform the same interaction again. Unlike event handlers, Effects re-synchronize if any of the values they read, like props or state, are different than during last render. Sometimes, you want a mix of both behaviors: an Effect that re-runs in response to some values but not others. +Event handler-গুলি তখনি পুনরায় চালানো হয় যখন আপনি একই interaction আবার করেন। Event handler এর বিপরীতে, Effects পুনরায় সিঙ্ক্রোনাইজ করে যদি তারা এমন কোন মান read করে যা আগের রেন্ডার থেকে আলাদা, যেমন props বা state এর মান। মাঝে মাঝে, আপনি দুটি আচরণের মিশ্রণ চান: এমন একটি Effect যা কিছু মানের Response এ আবার চলে, কিন্তু অন্যান্যগুলোর বিষয়ে re-run করে না। -Event handler-গুলি কেবল পুনরায় চালানো হয় যখন আপনি একই interaction আরেকবার করেন। ইভেন্ট হ্যান্ডলারের তুলনায়, 'Effects' পুনরায় সিঙ্ক্রোনাইজ করে যদি তারা যে কোন মান পড়ে, যেমন props বা state, গত রেন্ডারের সময় তার থেকে ভিন্ন হয়। মাঝে মাঝে, আপনি দুটি আচরণের মিশ্রণটি চান: কিছু মানের উপর প্রতিক্রিয়া হিসেবে পুনরায় রান করা একটি 'Effect' কিন্তু অন্যান্য নয়। - -All code inside Effects is *reactive.* It will run again if some reactive value it reads has changed due to a re-render. For example, this Effect will re-connect to the chat if either `roomId` or `theme` have changed: +Effect এর মধ্য থাকা সব কোড *reactive.* এটা আবার চলবে যদি এটা re-render এর কারণে পরিবর্তিত কোন মান read করে। উদাহরণস্বরূপ, এই Effect টা চ্যাটের সাথে পুনরায় সংযোগ স্থাপন করবে যদি `roomId` অথবা `theme` এর মান পরিবর্তিত হয়। @@ -590,11 +588,11 @@ Read **[Separating Events from Effects](/learn/separating-events-from-effects)** -## Removing Effect dependencies {/*removing-effect-dependencies*/} +## Effect dependencies সরানো {/*removing-effect-dependencies*/} -When you write an Effect, the linter will verify that you've included every reactive value (like props and state) that the Effect reads in the list of your Effect's dependencies. This ensures that your Effect remains synchronized with the latest props and state of your component. Unnecessary dependencies may cause your Effect to run too often, or even create an infinite loop. The way you remove them depends on the case. +আপনি যখন একটি Effect লিখেন, linter যাচাই করবে যে আপনি Effect এর ডিপেন্ডেন্সিগুলির তালিকায় Effect যে সমস্ত reactive মান (যেমন props এবং state) read করে তার সব অন্তর্ভুক্ত করেছেন কি না। এটি নিশ্চিত করে যে আপনার Effect আপনার কম্পোনেন্টের সর্বশেষ props এবং state এর সাথে সিঙ্ক্রোনাইজেশন বজায় রাখছে। অপ্রয়োজনীয় ডিপেন্ডেন্সিগুলি আপনার Effect অতিরিক্ত বার চালাতে পারে, বা এমনকি একটি কখনো শেষ হবে না এমন লুপ তৈরি করতে পারে। আপনি তাদের কীভাবে সরাবেন তা case এর উপর নির্ভর করে। -For example, this Effect depends on the `options` object which gets re-created every time you edit the input: +উদাহরণস্বরূপ, এই Effect `options` অবজেক্টের উপর নির্ভর করে যা আপনি প্রতিবার ইনপুট পরিবর্তন করলে পুনরায় তৈরি হয়: @@ -669,7 +667,7 @@ button { margin-left: 10px; } -You don't want the chat to re-connect every time you start typing a message in that chat. To fix this problem, move creation of the `options` object inside the Effect so that the Effect only depends on the `roomId` string: +আপনি চাইবেন না যে প্রতিবার আপনি মেসেজ লিখতে গেলেই চ্যাট পুনরায় সংযোগ স্থাপন করুক। এই সমস্যা সমাধান করতে, `options` অবজেক্টের উৎপত্তি Effect এর মধ্যে নিয়ে যান। এতে Effect কেবল মাত্র `roomId` স্ট্রিং এর উপর নির্ভর করবে। @@ -743,19 +741,19 @@ button { margin-left: 10px; } -Notice that you didn't start by editing the dependency list to remove the `options` dependency. That would be wrong. Instead, you changed the surrounding code so that the dependency became *unnecessary.* Think of the dependency list as a list of all the reactive values used by your Effect's code. You don't intentionally choose what to put on that list. The list describes your code. To change the dependency list, change the code. +লক্ষ্য করুন যে আপনি `options` ডিপেন্ডেন্সিটি সরানোর জন্য আপনি শুরুতে ডিপেন্ডেন্সি তালিকা ঠিক করতে যাননি। এটা করা ভুল হবে। এর পরিবর্তে, আপনি আশপাশের কোড পরিবর্তন করেছেন যাতে ডিপেন্ডেন্সিটি *অপ্রয়োজনীয়* হয়। ধরে নিন যে, ডিপেন্ডেন্সি তালিকা হচ্ছে আপনার Effect এর কোড দ্বারা ব্যবহৃত সমস্ত reactive মানের তালিকা। আপনি সচেতনভাবে ঠিক করেন না যে আপনি ঐ তালিকায় কী রাখবেন। বরং, তালিকাটি আপনার কোডকে ব্যাখ্যা করে। ডিপেন্ডেন্সি তালিকা পরিবর্তন করতে, কোড পরিবর্তন করুন। -Read **[Removing Effect Dependencies](/learn/removing-effect-dependencies)** to learn how to make your Effect re-run less often. +কী করবেন যেন আপনার Effect কম বার re-run হয়, শেখার জন্য **[Effect ডিপেন্ডেন্সি সরানো](/learn/removing-effect-dependencies)** পড়ুন। -## Reusing logic with custom Hooks {/*reusing-logic-with-custom-hooks*/} +## কাস্টম Hooks এর সাহায্যে লজিকের পুনর্ব্যবহার {/*reusing-logic-with-custom-hooks*/} -React comes with built-in Hooks like `useState`, `useContext`, and `useEffect`. Sometimes, you’ll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. To do this, you can create your own Hooks for your application's needs. +React এ `useState`, `useContext`, and `useEffect` এর মত built-in hooks আছে। মাঝে মাঝে, আপনার মনে হবে যে আরও নির্দিষ্ট কোন উদ্দেশ্যের জন্য একটি Hook থাকত যেমন, ডেটা নিয়ে আসা, ব্যবহারকারী অনলাইনে আছেন কি না তা নজরে রাখা, বা একটি চ্যাট রুমের সাথে সংযোগ করা। এটি করার জন্য, আপনি আপনার অ্যাপ্লিকেশনের প্রয়োজনীয়তা মাথায় রেখে আপনার নিজস্ব Hooks তৈরি করতে পারেন। -In this example, the `usePointerPosition` custom Hook tracks the cursor position, while `useDelayedValue` custom Hook returns a value that's "lagging behind" the value you passed by a certain number of milliseconds. Move the cursor over the sandbox preview area to see a moving trail of dots following the cursor: +এই উদাহরণে, `usePointerPosition` কাস্টম Hook-টি কার্সরের অবস্থান নজরে রাখে, অন্যদিকে `useDelayedValue` কাস্টম Hook-টি এমন একটু মান return করে যা আপনার pass করা মান থেকে একটি নির্দিষ্ট সংখ্যক মিলিসেকেন্ডের ব্যবধানে "পিছিয়ে আছে"। স্যান্ডবক্সের প্রিভিউ অংশের উপরে কার্সর সরিয়ে খ্যেয়াল করুন যে কার্সরের পিছনে কয়েকটি বিন্দুর একটি পথরেখা দেখা যাচ্ছেঃ @@ -836,14 +834,14 @@ body { min-height: 300px; } -You can create custom Hooks, compose them together, pass data between them, and reuse them between components. As your app grows, you will write fewer Effects by hand because you'll be able to reuse custom Hooks you already wrote. There are also many excellent custom Hooks maintained by the React community. +আপনি কাস্টম Hooks তৈরি করতে পারেন, এগুলোকে একত্রিত করতে পারেন, এদের মধ্যে ডাটা pass করতে পারেন, এবং কম্পোনেন্টগুলির মধ্যে এদের পুনরায় ব্যবহার করতে পারেন। আপনার অ্যাপ বড় হবার সাথে সাথে, আপনি নতুন করে Effects কম লিখবেন কারণ আপনি ইতোমধ্যে লিখেছেন এমন কাস্টম Hooks পুনরায় ব্যবহার করতে পারবেন। React কমিউনিটি দেখাশোনা করে এমন বেশ অনেকগুলি ভাল কাস্টম Hook রয়েছে। -Read **[Reusing Logic with Custom Hooks](/learn/reusing-logic-with-custom-hooks)** to learn how to share logic between components. +কম্পোনেন্টের মধ্যে লজিক শেয়ার কীভাবে করতে হয়ে শেখার জন্য পড়ুন **[কাস্টম Hooks এর সাহায্যে লজিকের পুনর্ব্যবহার](/learn/reusing-logic-with-custom-hooks)**। -## What's next? {/*whats-next*/} +## এর পর কী? {/*whats-next*/} -Head over to [Referencing Values with Refs](/learn/referencing-values-with-refs) to start reading this chapter page by page! +এই অধ্যায়টি বিস্তারিতভাবে পড়ার জন্য চলে যান [Ref এর সাহায্য value referencing](/learn/referencing-values-with-refs) অংশে। From 8f8d6b8c55920b7c18eb23354b3cdddeb5169ec5 Mon Sep 17 00:00:00 2001 From: nafistiham Date: Wed, 17 May 2023 14:45:11 +0600 Subject: [PATCH 6/6] minor-aligning --- src/content/learn/escape-hatches.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index ca78dba0d..dc6356c99 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -145,7 +145,6 @@ video { width: 250px; } - অনেক Effects নিজেদের "clean up" নিজেরাই করে নেয়। উদাহরণস্বরূপ, একটি চ্যাট সার্ভারের সাথে সংযোগ স্থাপন করা Effect এর উচিত একটি *cleanup function* ফেরত দেওয়া যা React কে বলে দিবে আপনার কম্পোনেন্টকে সেই সার্ভার থেকে সংযোগ বিচ্ছিন্ন করতে। @@ -200,6 +199,8 @@ Effect হল React এর জগত থেকে একটি escape hatch। - **রেন্ডারের জন্য ডেটা transform করতে Effect এর দরকার নেই।** - **User event দেখাশোনা করার জন্য আপনার Effect এর প্রয়োজন নেই।** +উদাহরণস্বরূপ, একটা state এর উপর নির্ভর করে আরেকটা state পরিবর্তন করতে আপনার Effect এর প্রয়োজন নেইঃ + ```js {5-9} function Form() { const [firstName, setFirstName] = useState('Taylor');