React components profiler

src/components/DocsFooter.tsx

@@ -30,7 +30,7 @@ export const DocsPageFooter = memo<DocsPageFooterProps>(
             <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4 py-4 md:py-12">
               {prevRoute?.path ? (
                 <FooterLink
-                  type="Previous"
+                  type="পূর্ববর্তী পেইজ"
                   title={prevRoute.title}
                   href={prevRoute.path}
                 />
@@ -40,7 +40,7 @@ export const DocsPageFooter = memo<DocsPageFooterProps>(
 
               {nextRoute?.path ? (
                 <FooterLink
-                  type="Next"
+                  type="পরবর্তী পেইজ"
                   title={nextRoute.title}
                   href={nextRoute.path}
                 />
@@ -63,20 +63,21 @@ function FooterLink({
 }: {
   href: string;
   title: string;
-  type: 'Previous' | 'Next';
+  type: 'পূর্ববর্তী পেইজ' | 'পরবর্তী পেইজ';
 }) {
   return (
     <NextLink
       href={href}
       className={cn(
         'flex gap-x-4 md:gap-x-6 items-center w-full md:w-80 px-4 md:px-5 py-6 border-2 border-transparent text-base leading-base text-link dark:text-link-dark rounded-lg group focus:text-link dark:focus:text-link-dark focus:bg-highlight focus:border-link dark:focus:bg-highlight-dark dark:focus:border-link-dark focus:border-opacity-100 focus:border-2 focus:ring-1 focus:ring-offset-4 focus:ring-blue-40 active:ring-0 active:ring-offset-0 hover:bg-gray-5 dark:hover:bg-gray-80',
         {
-          'flex-row-reverse justify-self-end text-right': type === 'Next',
+          'flex-row-reverse justify-self-end text-right':
+            type === 'পরবর্তী পেইজ',
         }
       )}>
       <IconNavArrow
         className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
-        displayDirection={type === 'Previous' ? 'left' : 'right'}
+        displayDirection={type === 'পূর্ববর্তী পেইজ' ? 'left' : 'right'}
       />
       <span>
         <span className="block no-underline text-sm tracking-wide text-secondary dark:text-secondary-dark uppercase font-bold group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">

src/components/Layout/Toc.tsx

@@ -16,7 +16,7 @@ export function Toc({headings}: {headings: Toc}) {
     <nav role="navigation" className="pt-20 sticky top-0 right-0">
       {headings.length > 0 && (
         <h2 className="mb-3 lg:mb-3 uppercase tracking-wide font-bold text-sm text-secondary dark:text-secondary-dark px-4 w-full">
-          On this page
+          এই পেইজে যা যা আছে
         </h2>
       )}
       <div

src/components/MDX/ExpandableCallout.tsx

@@ -26,7 +26,7 @@ const variantMap = {
       'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
   },
   note: {
-    title: 'Note',
+    title: 'খেয়াল করুন',
     Icon: IconNote,
     containerClasses:
       'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg',
@@ -35,15 +35,15 @@ const variantMap = {
       'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
   },
   pitfall: {
-    title: 'Pitfall',
+    title: 'সতর্কতা',
     Icon: IconPitfall,
     containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20',
     textColor: 'text-yellow-50 dark:text-yellow-40',
     overlayGradient:
       'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
   },
   wip: {
-    title: 'Under Construction',
+    title: 'এই অংশের কাজ চলছে',
     Icon: IconNote,
     containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20',
     textColor: 'text-yellow-50 dark:text-yellow-40',

src/content/reference/react/Profiler.md

@@ -4,7 +4,7 @@ title: <Profiler>
 
 <Intro>
 
-`<Profiler>` lets you measure rendering performance of a React tree programmatically.
+`<Profiler>` আপনাকে একটা React ট্রিয়ের রেন্ডারিং পারফরম্যান্স প্রোগ্রামের সাহায্যে পরিমাপ করার সুযোগ দেয়।
 
 ```js
 <Profiler id="App" onRender={onRender}>
@@ -18,11 +18,11 @@ title: <Profiler>
 
 ---
 
-## Reference {/*reference*/}
+## রেফারেন্স {/*reference*/}
 
 ### `<Profiler>` {/*profiler*/}
 
-Wrap a component tree in a `<Profiler>` to measure its rendering performance.
+কম্পোনেন্ট ট্রিয়ের রেন্ডারিং পারফরম্যান্স পরিমাপ করার জন্য একে `<Profiler>` এর মধ্যে wrap করুন।
 
 ```js
 <Profiler id="App" onRender={onRender}>
@@ -32,41 +32,41 @@ Wrap a component tree in a `<Profiler>` to measure its rendering performance.
 
 #### Props {/*props*/}
 
-* `id`: A string identifying the part of the UI you are measuring.
-* `onRender`: An [`onRender` callback](#onrender-callback) that React calls every time components within the profiled tree update. It receives information about what was rendered and how much time it took.
+* `id`: একটা স্ট্রিং যেটা আপনি UI এর যে অংশ পরিমাপ করতে চান সেটাকে চিহ্নিত করতে ব্যবহৃত হয়।
+* `onRender`: এটা একটা [`onRender` কলব্যাক](#onrender-callback) যেটাকে প্রতিবার প্রোফাইল হতে থাকা ট্রিয়ের মধ্যকার কম্পোনেন্ট আপডেট হলে React কল করে। কী রেন্ডার হল এবং কেমন সময় লাগল এই তথ্যটা সে পায়।
 
-#### Caveats {/*caveats*/}
+#### সতর্কতা {/*caveats*/}
 
-* Profiling adds some additional overhead, so **it is disabled in the production build by default.** To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling)
+* প্রোফাইলিং কিছু অতিরিক্ত কাজ বাড়ায়, তাই এটা **প্রোডাকশন বিল্ডে স্বাভাবিকভাবে বন্ধ থাকে।** প্রোডাকশন প্রোফাইলিং করতে, আপনাকে [প্রোফাইলিং সক্রিয় আছে এমন একটি বিশেষ প্রোডাকশন বিল্ড](https://fb.me/react-profiling) চালু করতে হবে।
 
 ---
 
-### `onRender` callback {/*onrender-callback*/}
+### `onRender` কলব্যাক {/*onrender-callback*/}
 
-React will call your `onRender` callback with information about what was rendered.
+React `onRender` কে কল করবে যেখানে কী রেন্ডার হয়েছিল সেই তথ্য থাকবে।
 
 ```js
 function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
   // Aggregate or log render timings...
 }
 ```
 
-#### Parameters {/*onrender-parameters*/}
+#### প্যারামিটার {/*onrender-parameters*/}
 
-* `id`: The string `id` prop of the `<Profiler>` tree that has just committed. This lets you identify which part of the tree was committed if you are using multiple profilers.
-* `phase`: `"mount"`, `"update"` or `"nested-update"`. This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks.
-* `actualDuration`: The number of milliseconds spent rendering the `<Profiler>` and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g. [`memo`](/reference/react/memo) and [`useMemo`](/reference/react/useMemo)). Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change.
-* `baseDuration`: The number of milliseconds estimating how much time it would take to re-render the entire `<Profiler>` subtree without any optimizations. It is calculated by summing up the most recent render durations of each component in the tree. This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). Compare `actualDuration` against it to see if memoization is working.
-* `startTime`: A numeric timestamp for when React began rendering the current update.
-* `endTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
+* `id`: `<Profiler>` ট্রিয়ের স্ট্রিং `id` প্রপ যা মাত্র কমিট করেছে। এটা আপনাকে জানায় যে ট্রিয়ের কোন অংশ কমিট করেছে যদি আপনি একাধিক প্রোফাইলার ব্যবহার করে থাকেন।
+* `phase`: `"mount"`, `"update"` অথবা `"nested-update"`। এটা আপনাকে জানায় যে ট্রি কি এই প্রথম মাউন্ট হল নাকি prop, state বা hook এর পরিবর্তনের কারণে পরিবর্তিত হয়েছে।
+* `actualDuration`: বর্তমান আপডেটে `<Profiler>` এবং এর উত্তরসূরিদের রেন্ডার করতে যত মিলিসেকেন্ড খরচ হয়েছে সেই সংখ্যাটা। এটা নির্দেশ করে সাবট্রি মেমোইজেশন কতটা ভালভাবে ব্যবহার করতে পারছে (উদাহরণস্বরূপঃ [`memo`](/reference/react/memo) এবং [`useMemo`](/reference/react/useMemo))। সব ঠিকঠাক থাকলে এই মানটা প্রথম মাউন্টের পর থেকে উল্লেখজনকভাবে কমে যাবার কথা কারণ, উত্তরসূরিদের অনেকেরই পুনরায় রেন্ডার তখনই হবে যখন তাদের কোন prop এর পরিবর্তন হয়।
+* `baseDuration`: এই সংখ্যাটা বোঝায় যে কোন অপটিমাইজেশন ছাড়া পুরো `<Profiler>` সাবট্রি আবার রেন্ডার করার জন্য আনুমানিক কত মিলিসেকেন্ড লাগবে। সর্বশেষ  রেন্ডারের জন্য ট্রিয়ের প্রতিটি কম্পোনেন্টে যে সময় লেগেছিল সেটা থেকে এই সংখ্যাটা হিসেব করা হয়। এই মানটা নির্দেশ করে রেন্ডারিং এর জন্য সবচেয়ে বেশি কত সময় লাগতে পারে (উদাহরণস্বরূপঃ একদম প্রাথমিক মাউন্ট বা মেমোইজেশন ছাড়া মাউন্টের সময়)। এর সাথে `actualDuration` তুলনা করে আপনি বুঝতে পারবেন  মেমোইজেশন কাজ করছে কি না।
+* `startTime`: একটা সাংখ্যিক টাইমস্ট্যাম্প যা নির্দেশ করে কখন React বর্তমান আপডেট শুরু করেছিল।
+* `endTime`: একটা সাংখ্যিক টাইমস্ট্যাম্প যা নির্দেশ করে কখন React বর্তমান আপডেট commit করেছে। এই মানটা একটা কমিটে সব প্রোফাইলের সাথে শেয়ার করা হয়। যা তাদের প্রয়োজনে গ্রুপ হবার সুযোগ দেয়।
 
 ---
 
-## Usage {/*usage*/}
+## ব্যবহার {/*usage*/}
 
-### Measuring rendering performance programmatically {/*measuring-rendering-performance-programmatically*/}
+### প্রোগামেটিকালি রেন্ডারিং পারফরম্যান্সের পরিমাপ {/*measuring-rendering-performance-programmatically*/}
 
-Wrap the `<Profiler>` component around a React tree to measure its rendering performance.
+একটা React ট্রিয়ের রেন্ডারিং পারফরম্যান্স পরিমাপ করার জন্য একে `<Profiler>` কম্পোনেন্ট দিয়ে wrap করে ফেলুন।
 
 ```js {2,4}
 <App>
@@ -77,25 +77,25 @@ Wrap the `<Profiler>` component around a React tree to measure its rendering per
 </App>
 ```
 
-It requires two props: an `id` (string) and an `onRender` callback (function) which React calls any time a component within the tree "commits" an update.
+এর দুটি প্রপ প্রয়োজন হয়ঃ একটা `id` (স্ট্রিং) এবং একটি `onRender` কলব্যাক (ফাংশন) which React calls any time a component within the tree "commits" an update.
 
 <Pitfall>
 
-Profiling adds some additional overhead, so **it is disabled in the production build by default.** To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling)
+প্রোফাইলিং কিছু অতিরিক্ত overhead যুক্ত করে, তাই **বাই ডিফল্ট এটা প্রোডাকশন বিল্ডে বন্ধ থাকে।** প্রোডাকশন প্রোফাইলিং চালু করার জন্য আপনাকে [প্রোফাইলিং সক্রিয় আছে এমন একটি বিশেষ প্রোডাকশন বিল্ড](https://fb.me/react-profiling) enable করতে হবে।
 
 </Pitfall>
 
 <Note>
 
-`<Profiler>` lets you gather measurements programmatically. If you're looking for an interactive profiler, try the Profiler tab in [React Developer Tools](/learn/react-developer-tools). It exposes similar functionality as a browser extension.
+`<Profiler>` আপনাকে প্রোগ্রামেটিকালি পরিমাপ জানতে সাহায্য করে। আপনি যদি interactive প্রোফাইলার চান, তাহলে [React ডেভেলপার টুলসের](/learn/react-developer-tools) Profiler ট্যাবটা ব্যবহার করে দেখতে পারেন। এটা ব্রাউজার এক্সটেনশন হিসেবে কাছাকাছি রকম কাজ করে।
 
 </Note>
 
 ---
 
-### Measuring different parts of the application {/*measuring-different-parts-of-the-application*/}
+### অ্যাপ্লিকেশনের বিভিন্ন অংশের পরিমাপ {/*measuring-different-parts-of-the-application*/}
 
-You can use multiple `<Profiler>` components to measure different parts of your application:
+অ্যাপ্লিকেশনের বিভিন্ন অংশের পরিমাপের জন্য আপনি একাধিক `<Profiler>` ব্যবহার করতে পারেনঃ
 
 ```js {5,7}
 <App>
@@ -108,7 +108,7 @@ You can use multiple `<Profiler>` components to measure different parts of your
 </App>
 ```
 
-You can also nest `<Profiler>` components:
+আপনি `<Profiler>` কম্পোনেন্টগুলো নেস্টও করতে পারেনঃ
 
 ```js {5,7,9,12}
 <App>
@@ -126,7 +126,7 @@ You can also nest `<Profiler>` components:
 </App>
 ```
 
-Although `<Profiler>` is a lightweight component, it should be used only when necessary. Each use adds some CPU and memory overhead to an application.
+যদিও `<Profiler>` একটা হালকা কম্পোনেন্ট, এটা শুধুমাত্র তখনই ব্যবহার করা উচিত যখন প্রয়োজন পড়ছে। প্রতি বার ব্যবহারে অ্যাপের CPU এবং Memory এর উপরে অতিরিক্ত কিছু চাপ পড়ে।
 
 ---