diff --git a/src/content/learn/state-as-a-snapshot.md b/src/content/learn/state-as-a-snapshot.md index 59f8e6bb2..48ff8cada 100644 --- a/src/content/learn/state-as-a-snapshot.md +++ b/src/content/learn/state-as-a-snapshot.md @@ -4,22 +4,22 @@ title: স্ন্যাপশট হিসেবে State -State ভেরিয়েবলকে সাধারণ জাভাস্ক্রিপ্ট ভেরিয়েবলের মতো রিড এবং রাইট করতে পারলেও এটি আসলে একটি স্ন্যাপশটের মতো আচরণ করে। State ভেরিয়েবল সেট করলে তার পূর্ববর্তী মান পরিবর্তন না হলেও একটি রেন্ডার ট্রিগার হয়। +State ভ্যারিয়েবলকে সাধারণ জাভাস্ক্রিপ্ট ভ্যারিয়েবলের মতো রিড এবং রাইট করতে পারলেও এটি আসলে একটি স্ন্যাপশটের মতো আচরণ করে। state ভ্যারিয়েবল সেট করলে তার পূর্ববর্তী মান পরিবর্তন না হলেও একটি রেন্ডার ট্রিগার হয়। * State সেট করলে কিভাবে রেন্ডার ট্রিগার হয় -* কখন এবং কিভাবে State আপডেট হয় -* সেট করার সাথেসাথেই কেন State আপডেট হয় না +* কখন এবং কিভাবে state আপডেট হয় +* সেট করার সাথে সাথেই কেন state আপডেট হয় না * Event handler কিভাবে একটি স্ন্যাপশট এক্সেস করে ## State সেট করলে রি-রেন্ডার ট্রিগার হয় {/*setting-state-triggers-renders*/} -আপনি হয়ত ভাবতে পারেন ইউজার ইন্টারফেস ক্লিক এর মতো ইউজার ইভেন্টের সরাসরি প্রতিক্রিয়া হিসেবে পরিবর্তন হয়। কিন্তু React-এ এটি একটু অন্যভাবে কাজ করে। আগের পৃষ্ঠায় দেখেছেন [State সেট করলে রি-রেন্ডার ট্রিগার হয়](/learn/render-and-commit#step-1-trigger-a-render)। তার মানে কোন ইভেন্টের প্রতিক্রিয়া পেতে আপনার আগে *State আপডেট* করতে হবে। +আপনি হয়ত ভাবতে পারেন ইউজার ইন্টারফেস ক্লিক এর মতো ইউজার ইভেন্টের সরাসরি প্রতিক্রিয়া হিসেবে পরিবর্তন হয়। কিন্তু React-এ এটি একটু অন্য ভাবে কাজ করে। আগের পেইজে দেখেছেন [state সেট করলে রি-রেন্ডার ট্রিগার হয়](/learn/render-and-commit#step-1-trigger-a-render)। তার মানে কোন ইভেন্টের প্রতিক্রিয়া পেতে আপনার আগে *State আপডেট* করতে হবে। এই উদাহরণে "send" বাটনে চাপলে `setIsSent(true)` এর মাধ্যমে React-কে রি-রেন্ডার করতে জানানো হবেঃ @@ -63,15 +63,15 @@ label, textarea { margin-bottom: 10px; display: block; } বাটনটি ক্লিক করলে নিম্নলিখিত ঘটনাগুলো ঘটেঃ -১. `onSubmit` event handler এক্সিকিউট হয়। -২. `setIsSent(true)` এর মাধ্যমে `isSent` এর মান true করা হয় এবং একটি নতুন রি-রেন্ডার কিউ করা হয়। -৩. React নতুন `isSent` মান অনুযায়ী কম্পোনেন্টটি পুনরায় রি-রেন্ডার করে। +1. `onSubmit` event handler এক্সিকিউট হয়। +2. `setIsSent(true)` এর মাধ্যমে `isSent` এর মান true করা হয় এবং একটি নতুন রি-রেন্ডার queue করা হয়। +3. React নতুন `isSent` মান অনুযায়ী কম্পোনেন্টটি পুনরায় রি-রেন্ডার করে। -এখন State এবং রেন্ডারিং মধ্যে সম্পর্কটিতে নজর দেই। +এখন state এবং রেন্ডারিং এর মধ্যে সম্পর্কটিতে নজর দেই। ## রেন্ডারিং সময়ের একটি স্ন্যাপশট নেয় {/*rendering-takes-a-snapshot-in-time*/} -কম্পোনেন্ট হল একটি ফাংশন। আপনার কম্পোনেন্ট React-এর দ্বারা কল হওয়াকেই ["রেন্ডারিং"](/learn/render-and-commit#step-2-react-renders-your-components) বলে। সেই ফাংশন থেকে রিটার্ন করা JSX টি ঐ মুহূর্তের একটি স্ন্যাপশটের মতো। এর সমস্ত props, event handler এবং লোকাল ভেরিয়েবলগুলো **রেন্ডার করার সময়ের State ব্যবহার করে ক্যালকুলেট করা হয়েছিল।** +কম্পোনেন্ট হল একটি ফাংশন। আপনার কম্পোনেন্ট React-এর দ্বারা কল হওয়াকেই ["রেন্ডারিং"](/learn/render-and-commit#step-2-react-renders-your-components) বলে। সেই ফাংশন থেকে রিটার্ন করা JSX টি ঐ মুহূর্তের একটি স্ন্যাপশটের মতো। এর সমস্ত props, event handler এবং লোকাল ভ্যারিয়েবলগুলো **রেন্ডার করার সময়ের State ব্যবহার করে ক্যালকুলেট করা হয়েছিল।** আপনার কম্পোনেন্ট থেকে রিটার্ন হওয়া "স্ন্যাপশট" একটি ছবি বা একটি মুভির ফ্রেমের মতো না, এটি ইন্টারেক্টিভ। ইনপুটের উত্তর হিসাবে কী ঘটবে তার লজিক event handler-এ দেওয়া আছে। React স্ন্যাপশটের সাথে মেলানোর জন্য স্ক্রিনটি আপডেট করে এবং event handler-গুলো UI-এর সাথে কানেক্ট করে। ফলস্বরূপ, আপনার JSX থেকে একটি বাটন চাপলে click handler-টি ট্রিগার হয়। @@ -87,7 +87,7 @@ label, textarea { margin-bottom: 10px; display: block; } -State একটি নিয়মিত ভেরিয়েবলের মতো নয় যা আপনার ফাংশন রিটার্ন করার পরে হারিয়ে যায়। বরং State React-এর ভেতরে বাস করে--আপনার ফাংশনের বাইরে! React কম্পোনেন্টটি কল করলে এটি আপনাকে ঐ রেন্ডারের সময়ের State-এর একটি স্ন্যাপশট দেয়। আপনার কম্পোনেন্ট তার নতুন props এবং event handler সহ একটি নতুন স্ন্যাপশট ফেরত দেয়, যা আপনার **ঐ রেন্ডারের সময়ের State-এর ভ্যালুগুলি ব্যবহার করে ক্যালকুলেট করা হয়!** +State একটি নিয়মিত ভ্যারিয়েবলের মতো নয় যা আপনার ফাংশন রিটার্ন করার পরে হারিয়ে যায়। বরং state React-এর ভেতরে বাস করে--আপনার ফাংশনের বাইরে! React কম্পোনেন্টটি কল করলে এটি আপনাকে ঐ রেন্ডারের সময়ের State-এর একটি স্ন্যাপশট দেয়। আপনার কম্পোনেন্ট তার নতুন props এবং event handler সহ একটি নতুন স্ন্যাপশট ফেরত দেয়, যা আপনার **ঐ রেন্ডারের সময়ের State-এর ভ্যালুগুলি ব্যবহার করে ক্যালকুলেট করা হয়!** @@ -95,9 +95,9 @@ State একটি নিয়মিত ভেরিয়েবলের ম - নিচে একটি ছোট এক্সপিরিমেন্টে এটি কিভাবে কাজ করে তা দেখানো হল। এই উদাহরণে আপনি যেহেতু তিনবার `setNumber(number + 1)` কল করবেন, আপনি হয়ত ধরে নিতে পারেন যে "+3" বোতামে ক্লিক করলে কাউন্টারটি তিনবার ইনক্রিমেন্ট হবে। +নিচে একটি ছোট এক্সপিরিমেন্টে এটি কিভাবে কাজ করে তা দেখানো হল। এই উদাহরণে আপনি যেহেতু তিনবার `setNumber(number + 1)` কল করবেন, আপনি হয়ত ধরে নিতে পারেন যে "+3" বোতামে ক্লিক করলে কাউন্টারটি তিনবার ইনক্রিমেন্ট হবে। - "+3" বাটনটি ক্লিক করে দেখুন কি হয়ঃ +"+3" বাটনটি ক্লিক করে দেখুন কী হয়ঃ @@ -127,9 +127,9 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; } -Notice that `number` only increments once per click! +লক্ষ্য করুন যে `number` প্রতি ক্লিকে কেবল একবার বাড়ে! -**Setting state only changes it for the *next* render.** During the first render, `number` was `0`. This is why, in *that render's* `onClick` handler, the value of `number` is still `0` even after `setNumber(number + 1)` was called: +**State সেট করা কেবল পরের রেন্ডারের জন্য এটি পরিবর্তন করে।** প্রথম রেন্ডারে, `number` ছিল `0`। এ কারণে, *সেই রেন্ডারের* `onClick` হ্যান্ডলারে, `setNumber(number + 1)` কল করার পরেও `number`-এর মান `0` থাকেঃ ```js ``` -For the next render, `number` is `1`, so *that render's* click handler looks like this: +পরের রেন্ডারের জন্য, `number` হল `1`, তাই *সেই রেন্ডারের* ক্লিক হ্যান্ডলার এরকম দেখায়ঃ ```js ``` -This is why clicking the button again will set the counter to `2`, then to `3` on the next click, and so on. +এ জন্য বাটনে আবার ক্লিক করলে কাউন্টারটি `2`-এ সেট হয়, তারপর পরের ক্লিকে `3`-এ, এবং এইভাবে চলতে থাকে। -## State over time {/*state-over-time*/} +## সময়ের সাথে সাথে state {/*state-over-time*/} -Well, that was fun. Try to guess what clicking this button will alert: +যাই হোক, এটা মজার ছিল। চেষ্টা করুন অনুমান করতে যে এই বাটনে ক্লিক করলে কী অ্যালার্ট হবেঃ @@ -203,14 +203,14 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; } -If you use the substitution method from before, you can guess that the alert shows "0": +আগের মতো প্রতিস্থাপন পদ্ধতি ব্যবহার করলে, আপনি অনুমান করতে পারেন যে অ্যালার্টে "0" দেখাবেঃ ```js setNumber(0 + 5); alert(0); ``` -But what if you put a timer on the alert, so it only fires _after_ the component re-rendered? Would it say "0" or "5"? Have a guess! +কিন্তু যদি আপনি অ্যালার্টে একটি টাইমার সেট করেন, যাতে কম্পোনেন্ট পুনরায় রেন্ডার হওয়ার _পরে_ এটি ট্রিগার হয়? এটি কি "0" নাকি "5" বলবে? একটি অনুমান করে দেখুন! @@ -241,7 +241,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; } -Surprised? If you use the substitution method, you can see the "snapshot" of the state passed to the alert. +অবাক হয়েছেন? যদি আপনি প্রতিস্থাপন পদ্ধতি ব্যবহার করেন, তাহলে আপনি অ্যালার্টে পাস করা state-এর "স্ন্যাপশট" দেখতে পাবেন। ```js setNumber(0 + 5); @@ -250,16 +250,16 @@ setTimeout(() => { }, 3000); ``` -The state stored in React may have changed by the time the alert runs, but it was scheduled using a snapshot of the state at the time the user interacted with it! +অ্যালার্ট চালানোর সময়ে React-এ থাকা state পরিবর্তন হতে পারে, কিন্তু এটি শিডিউল করা হয়েছিল ব্যবহারকারীর ইন্টারেকশনের সময়ে state এর একটি স্ন্যাপশট ব্যবহার করে! -**A state variable's value never changes within a render,** even if its event handler's code is asynchronous. Inside *that render's* `onClick`, the value of `number` continues to be `0` even after `setNumber(number + 5)` was called. Its value was "fixed" when React "took the snapshot" of the UI by calling your component. +**একটি state ভ্যারিয়েবলের মান একটি রেন্ডারের মধ্যে কখনই পরিবর্তন হয় না,** এমনকি যদি এর ইভেন্ট হ্যান্ডলারের কোড অ্যাসিঙ্ক্রোনাস হয়। *সেই রেন্ডারের* `onClick`-এ, `setNumber(number + 5)` কল করার পরেও `number`-এর মান `0` থাকে। এর মান "স্থির" হয়ে গেছে যখন React আপনার কম্পোনেন্ট কল করে UI-এর "স্ন্যাপশট" নেয়। -Here is an example of how that makes your event handlers less prone to timing mistakes. Below is a form that sends a message with a five-second delay. Imagine this scenario: +এখানে একটি উদাহরণ রয়েছে যেভাবে এটি আপনার ইভেন্ট হ্যান্ডলারগুলির টাইমিং ভুল হবার সম্ভাবনা কমিয়ে দেয়। নীচে একটি ফর্ম রয়েছে যা পাঁচ সেকেন্ডে পরে একটি বার্তা পাঠায়। এই পরিস্থিতিটি কল্পনা করুনঃ -1. You press the "Send" button, sending "Hello" to Alice. -2. Before the five-second delay ends, you change the value of the "To" field to "Bob". +1. আপনি "Send" বাটনে চাপুন, "Hello" মেসেজটি Alice-এর কাছে পাঠানো হবে। +2. পাঁচ সেকেন্ডের বিলম্ব শেষ হওয়ার আগে, আপনি "To" ফিল্ডের মান Bob-এ পরিবর্তন করেন। -What do you expect the `alert` to display? Would it display, "You said Hello to Alice"? Or would it display, "You said Hello to Bob"? Make a guess based on what you know, and then try it: +আপনি কী অ্যালার্ট দেখার প্রত্যাশা করেন? এটি কি দেখাবে, "তুমি Alice-কে Hello বলেছো"? নাকি এটি দেখাবে, "তুমি Bob-কে Hello বলেছো"? আপনি যা জানেন তার ভিত্তিতে একটি অনুমান করুন, এবং তারপর এটি চেষ্টা করুনঃ @@ -305,19 +305,19 @@ label, textarea { margin-bottom: 10px; display: block; } -**React keeps the state values "fixed" within one render's event handlers.** You don't need to worry whether the state has changed while the code is running. +**React এক রেন্ডারের ইভেন্ট হ্যান্ডলারগুলিতে state এর মানগুলি ফিক্সড রাখে।** আপনাকে এটা নিয়ে চিন্তা করতে হবে না যে কোড চলাকালীন state পরিবর্তন হয়েছে কি না। -But what if you wanted to read the latest state before a re-render? You'll want to use a [state updater function](/learn/queueing-a-series-of-state-updates), covered on the next page! +কিন্তু যদি আপনি পুনরায় রেন্ডারের আগে সর্বশেষ state রিড করতে চান? তাহলে আপনি [state আপডেটার ফাংশন](/learn/queueing-a-series-of-state-updates) ব্যবহার করতে চাইবেন, যা পরের পৃষ্ঠায় আলোচিত হবে! -* Setting state requests a new render. -* React stores state outside of your component, as if on a shelf. -* When you call `useState`, React gives you a snapshot of the state *for that render*. -* Variables and event handlers don't "survive" re-renders. Every render has its own event handlers. -* Every render (and functions inside it) will always "see" the snapshot of the state that React gave to *that* render. -* You can mentally substitute state in event handlers, similarly to how you think about the rendered JSX. -* Event handlers created in the past have the state values from the render in which they were created. +* state সেট করা নতুন রেন্ডার অনুরোধ করে। +* React আপনার কম্পোনেন্টের বাইরে state রাখে, যেন একটি তাকের উপর। +* আপনি যখন `useState` কল করেন, React আপনাকে *সেই রেন্ডারের* জন্য state এর একটি স্ন্যাপশট দেয়। +* ভ্যারিয়েবল এবং ইভেন্ট হ্যান্ডলারগুলি পুনরায় রেন্ডারে "বেঁচে থাকে না"। প্রতিটি রেন্ডারের নিজস্ব ইভেন্ট হ্যান্ডলার থাকে। +* প্রতিটি রেন্ডার (এবং এর মধ্যে থাকা ফাংশনগুলি) সর্বদা *সেই* রেন্ডারের জন্য React দ্বারা দেওয়া state এর স্ন্যাপশটটি "দেখবে"। +* আপনি ইভেন্ট হ্যান্ডলারে state মনে মনে প্রতিস্থাপন করতে পারেন, ঠিক যেভাবে আপনি রেন্ডার করা JSX সম্পর্কে চিন্তা করেন। +* অতীতে তৈরি করা ইভেন্ট হ্যান্ডলারগুলি সেই রেন্ডারের state মান বহন করে, যে রেন্ডারে তারা তৈরি হয়েছিল। @@ -325,9 +325,9 @@ But what if you wanted to read the latest state before a re-render? You'll want -#### Implement a traffic light {/*implement-a-traffic-light*/} +#### একটি ট্রাফিক লাইট বাস্তবায়ন করুন {/*implement-a-traffic-light*/} -Here is a crosswalk light component that toggles when the button is pressed: +এখানে একটি পারাপারের লাইট কম্পোনেন্ট রয়েছে যা বাটন চাপা হলে টগল করেঃ @@ -362,13 +362,13 @@ h1 { margin-top: 20px; } -Add an `alert` to the click handler. When the light is green and says "Walk", clicking the button should say "Stop is next". When the light is red and says "Stop", clicking the button should say "Walk is next". +ক্লিক হ্যান্ডলারে একটি `alert` যোগ করুন। যখন লাইট সবুজ এবং "Walk" বলে, তখন বাটনে ক্লিক করলে "Stop is next" বলা উচিত। যখন লাইট লাল এবং "Stop" বলে, তখন বাটনে ক্লিক করলে "Walk is next" বলা উচিত। -Does it make a difference whether you put the `alert` before or after the `setWalk` call? +`alert`-টি `setWalk` কলের আগে নাকি পরে রাখলে তা কি কোনো পার্থক্য করে? -Your `alert` should look like this: +আপনার `alert` এরকম দেখানো উচিতঃ @@ -404,17 +404,17 @@ h1 { margin-top: 20px; } -Whether you put it before or after the `setWalk` call makes no difference. That render's value of `walk` is fixed. Calling `setWalk` will only change it for the *next* render, but will not affect the event handler from the previous render. +এটি আপনি `setWalk` কলের আগে বা পরে রাখুন, তা কোনো পার্থক্য করে না। সেই রেন্ডারের `walk`-এর মান স্থির। `setWalk` কল করা শুধুমাত্র পরের *রেন্ডারে* এটি পরিবর্তন করবে, কিন্তু আগের রেন্ডারের ইভেন্ট হ্যান্ডলারে কোনো প্রভাব ফেলবে না। -This line might seem counter-intuitive at first: +প্রথমে এই লাইনটি counter-intuitive মনে হতে পারেঃ ```js alert(walk ? 'Stop is next' : 'Walk is next'); ``` -But it makes sense if you read it as: "If the traffic light shows 'Walk now', the message should say 'Stop is next.'" The `walk` variable inside your event handler matches that render's value of `walk` and does not change. +কিন্তু এটি যদি আপনি এভাবে পড়েন তাহলে অর্থপূর্ণ হয়ঃ "যদি ট্রাফিক লাইট 'Walk now' দেখায়, তাহলে বার্তাটি বলা উচিত 'Stop is next.' আপনার ইভেন্ট হ্যান্ডলারের `walk` ভ্যারিয়েবলটি সেই রেন্ডারের `walk`-এর মানের সাথে মেলে এবং পরিবর্তন হয় না। -You can verify that this is correct by applying the substitution method. When `walk` is `true`, you get: +আপনি প্রতিস্থাপন পদ্ধতি প্রয়োগ করে এটি সঠিক হয়েছে কি না যাচাই করতে পারেন। যখন `walk` `true`, আপনি পেয়ে যানঃ ```js