diff --git a/src/components/MDX/Recap.tsx b/src/components/MDX/Recap.tsx index d91ed48b4..98d55ca95 100644 --- a/src/components/MDX/Recap.tsx +++ b/src/components/MDX/Recap.tsx @@ -13,7 +13,7 @@ function Recap({children}: RecapProps) { return (

- Recap + পুনরালোচনা

{children}
diff --git a/src/content/learn/queueing-a-series-of-state-updates.md b/src/content/learn/queueing-a-series-of-state-updates.md index a63b7205b..369a5fb19 100644 --- a/src/content/learn/queueing-a-series-of-state-updates.md +++ b/src/content/learn/queueing-a-series-of-state-updates.md @@ -1,23 +1,23 @@ --- -title: Queueing a Series of State Updates +title: State আপডেটস এর একটি ক্রম সারিবদ্ধ করা --- -Setting a state variable will queue another render. But sometimes you might want to perform multiple operations on the value before queueing the next render. To do this, it helps to understand how React batches state updates. +State ভেরিয়েবল সেট করা হলে আরেকটি রেন্ডারকে সারিবদ্ধ করবে। কিন্তু পরের রেন্ডারকে সারিবদ্ধ করার আগে, কখনো কখনো আপনি হয়তো ভ্যালুতে অনেকগুলো অপারেশন করতে চাইতে পারেন। এটা করতে, React কিভাবে state আপডেট গুলোকে ব্যাচ করে তা বুঝতে পারবেন। -* What "batching" is and how React uses it to process multiple state updates -* How to apply several updates to the same state variable in a row +* "ব্যাচিং" কি এবং React কিভাবে এটা ব্যবহার করে অনেকগুলো state আপডেটসকে প্রক্রিয়া করে। +* একটি সারিতে একই state ভেরিয়েবলে কীভাবে বেশ কয়েকটি আপডেট প্রয়োগ করবেন। -## React batches state updates {/*react-batches-state-updates*/} +## React state আপডেটসকে ব্যাচিং করে {/*react-batches-state-updates*/} -You might expect that clicking the "+3" button will increment the counter three times because it calls `setNumber(number + 1)` three times: +আপনি হয়তো অনুমান করতে পারেন যে, "+3" বাটনে ক্লিক করার পর, বাটনটি কাউন্টার কে তিন বার বৃদ্ধি করবে কারণ এটা এই `setNumber(number + 1)` ফাংশনকে ৩ বার কল করেঃ @@ -47,7 +47,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; } -However, as you might recall from the previous section, [each render's state values are fixed](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time), so the value of `number` inside the first render's event handler is always `0`, no matter how many times you call `setNumber(1)`: +তবে, আপনি হয়তো আগের অধ্যায় থেকে মনে করতে পারেন, [প্রতিটি রেন্ডারের state এর মানগুলো স্থায়ী](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time), সুতরাং প্রথম ইভেন্ট হ্যান্ডলারের ভিতরে `number` এর মান সর্বদাই `0` হবে, আপনি যতবারই `setNumber(1)` ফাংশনটি কল করুন না কেনঃ ```js setNumber(0 + 1); @@ -55,21 +55,21 @@ setNumber(0 + 1); setNumber(0 + 1); ``` -But there is one other factor at play here. **React waits until *all* code in the event handlers has run before processing your state updates.** This is why the re-render only happens *after* all these `setNumber()` calls. +কিন্তু এখানে অন্য একটি ফ্যাক্টর কাজ করে। **React আপনার state আপডেটগুলো প্রসেসিং করার আগে, ইভেন্ট হ্যান্ডলারের *সকল* কোড রান করা পর্যন্ত অপেক্ষা করে।** এই কারণে সকল `setNumber()` ফাংশন কল করার *পরে*, শুধুমাত্র তখনি রি-রেন্ডার ঘটে। -This might remind you of a waiter taking an order at the restaurant. A waiter doesn't run to the kitchen at the mention of your first dish! Instead, they let you finish your order, let you make changes to it, and even take orders from other people at the table. +এটি আপনাকে একজন ওয়েটারের রেস্টুরেন্টে অর্ডার নেওয়ার কথা মনে করিয়ে দিতে পারে। একজন ওয়েটার আপনার প্রথম খাবারের কথা বলার সাথে সাথে রান্নাঘরে দৌড়ে যায় না! এর বদলে, তারা আপনাকে আপনার অর্ডারটি শেষ করতে দেয়, আপনাকে এতে পরিবর্তন করতে দেয় এবং এমনকি টেবিলে থাকা অন্য লোকেদের কাছ থেকে অর্ডার নেয়। -This lets you update multiple state variables--even from multiple components--without triggering too many [re-renders.](/learn/render-and-commit#re-renders-when-state-updates) But this also means that the UI won't be updated until _after_ your event handler, and any code in it, completes. This behavior, also known as **batching,** makes your React app run much faster. It also avoids dealing with confusing "half-finished" renders where only some of the variables have been updated. +এটি আপনাকে একাধিক state ভেরিয়েবল আপডেট করতে দেয়।--এমনকি একাধিক কম্পোনেন্টস থেকেও--অনেক [রি-রেন্ডারস](/learn/render-and-commit#re-renders-when-state-updates) ট্রিগার করা ছাড়াই। কিন্তু এর মানে হল যে UI আপডেট করা হবে না যতক্ষণ না আপনার ইভেন্ট হ্যান্ডলার থাকা কোনো কোড সম্পূর্ণ না হয়। এই আচরণ, **ব্যাচিং** নামেও পরিচিত, এটা আপনার react অ্যাপকে আরও দ্রুত চালায়। এটি বিভ্রান্তিকর "অর্ধ-সমাপ্ত" রেন্ডার কে এড়িয়ে যায় যেখানে শুধুমাত্র কিছু ভেরিয়েবল আপডেট করা হয়েছে। -**React does not batch across *multiple* intentional events like clicks**--each click is handled separately. Rest assured that React only does batching when it's generally safe to do. This ensures that, for example, if the first button click disables a form, the second click would not submit it again. +**ক্লিকের মত, *একাধিক* ইচ্ছাকৃত ইভেন্ট জুড়ে react ব্যাচ করে না**--প্রতিটি ক্লিক আলাদাভাবে পরিচালনা করা হয়। নিশ্চিন্ত থাকুন যে react শুধুমাত্র তখনই ব্যাচিং করে যখন এটি করা সাধারণত নিরাপদ। এটি নিশ্চিত করে যে, উদাহরণস্বরূপ, যদি প্রথম বাটন ক্লিকে একটি ফর্ম নিষ্ক্রিয় করে, দ্বিতীয় ক্লিকটি আবার সাবমিট দিবে না। -## Updating the same state multiple times before the next render {/*updating-the-same-state-multiple-times-before-the-next-render*/} +## পরবর্তী রেন্ডারের আগে একই state একাধিকবার আপডেট করা {/*updating-the-same-state-multiple-times-before-the-next-render*/} -It is an uncommon use case, but if you would like to update the same state variable multiple times before the next render, instead of passing the *next state value* like `setNumber(number + 1)`, you can pass a *function* that calculates the next state based on the previous one in the queue, like `setNumber(n => n + 1)`. It is a way to tell React to "do something with the state value" instead of just replacing it. +এটা একটি বিরল ব্যবহার, কিন্তু যদি আপনার ভাল লাগে তাহলে পরবর্তী রেন্ডারের আগে একই state একাদিকবার আপডেট করতে পারেন, `setNumber(number + 1)` এর মতো করে *পরবর্তী state এর মান* পাস করার পরিবর্তে, আপনি একটা *ফাংশন* পাস করতে পারেন যেটা সারিতে থাকা আগেরটির উপর ভিত্তি করে পরবর্তী state গণনা করে, উদাহরণস্বরূপ `setNumber(n => n + 1)`। এটি react কে প্রতিস্থাপনের পরিবর্তে "state এর মান দিয়ে কিছু করতে" বলে। -Try incrementing the counter now: +এখন কাউন্টার বৃদ্ধি করার চেষ্টা করুনঃ @@ -99,10 +99,10 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; } -Here, `n => n + 1` is called an **updater function.** When you pass it to a state setter: +এখানে, `n => n + 1` একটি **আপডেটার ফাংশন।** যখন আপনি এটিকে state setter এ পাস করেনঃ -1. React queues this function to be processed after all the other code in the event handler has run. -2. During the next render, React goes through the queue and gives you the final updated state. +১। ইভেন্ট হ্যান্ডলারের অন্যান্য সমস্ত কোড চালানোর পরে এই ফাংশনটি প্রক্রিয়া করার জন্য react সারিবদ্ধ করে। +২। পরবর্তী রেন্ডারের সময়, React সারির মধ্য দিয়ে যায় এবং আপনাকে চূড়ান্ত আপডেটেড state দেয়। ```js setNumber(n => n + 1); @@ -110,13 +110,13 @@ setNumber(n => n + 1); setNumber(n => n + 1); ``` -Here's how React works through these lines of code while executing the event handler: +ইভেন্ট হ্যান্ডলার চালানোর সময় কোডের এই লাইনগুলির মাধ্যমে react কীভাবে কাজ করে তা এখানে বলা হল: -1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue. -1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue. -1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue. +১। `setNumber(n => n + 1)`: `n => n + 1` একটি ফাংশন। React এটিকে একটি সারিতে যোগ করে। +২। `setNumber(n => n + 1)`: `n => n + 1` একটি ফাংশন। React এটিকে একটি সারিতে যোগ করে। +৩। `setNumber(n => n + 1)`: `n => n + 1` একটি ফাংশন। React এটিকে একটি সারিতে যোগ করে। -When you call `useState` during the next render, React goes through the queue. The previous `number` state was `0`, so that's what React passes to the first updater function as the `n` argument. Then React takes the return value of your previous updater function and passes it to the next updater as `n`, and so on: +আপনি যখন পরবর্তী রেন্ডারের সময় `useState` কল করেন, তখন react সারির মধ্য দিয়ে যায়। আগের `number` এর state ছিল `0`, তাই 'n' আর্গুমেন্ট হিসাবে প্রথম আপডেটার ফাংশনে react একটাকে পাস করে। তারপর react আপনার পূর্ববর্তী আপডেটার ফাংশনের রিটার্নের মান নেয় এবং এটিকে পরবর্তী আপডেটারকে `n` হিসাবে প্রেরণ করে, ইত্যাদিঃ | queued update | `n` | returns | |--------------|---------|-----| @@ -124,12 +124,12 @@ When you call `useState` during the next render, React goes through the queue. T | `n => n + 1` | `1` | `1 + 1 = 2` | | `n => n + 1` | `2` | `2 + 1 = 3` | -React stores `3` as the final result and returns it from `useState`. +চূড়ান্ত ফলাফল হিসাবে react `3` কে স্টোর এবং `useState` এ রিটার্ন করে। -This is why clicking "+3" in the above example correctly increments the value by 3. -### What happens if you update state after replacing it {/*what-happens-if-you-update-state-after-replacing-it*/} +এই কারণে উপরের উদাহরণে "+3" ক্লিক করলে মানটি 3 দ্বারা সঠিকভাবে বৃদ্ধি পায়। +### State এর মান প্রতিস্থাপন করার পর আপনি যদি এটিকে আবার আপডেট করেন তাহলে কি হয় {/*what-happens-if-you-update-state-after-replacing-it*/} -What about this event handler? What do you think `number` will be in the next render? +এই ইভেন্ট হ্যান্ডলার সম্পর্কে কি ভাবেন? আপনি কি মনে করেন `number` এর মান পরবর্তী রেন্ডারে কি হবে? ```js