Merge pull request #95 from reactjs/sync-68f417a6

Sync with react.dev @ 68f417a

src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md

@@ -8,7 +8,7 @@ June 15, 2022 by [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](http
 
 <Intro>
 
-[React 18](https://reactjs.org/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.
+[React 18](https://react.dev/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.
 
 </Intro>
 

src/content/community/conferences.md

@@ -55,7 +55,6 @@ October 27th 2023. In-person in Verona, Italy and online (hybrid event)
 
 [Website](https://2023.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
 
-
 ### React Summit US 2023 {/*react-summit-us-2023*/}
 November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event)
 
@@ -66,6 +65,11 @@ December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity
 
 [Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023)
 
+### App.js Conf 2024 {/*appjs-conf-2024*/}
+May 22 - 24, 2024. In-person in Kraków, Poland + remote
+
+[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
+
 ### Render(ATL) 2024 🍑 {/*renderatl-2024-*/}
 June 12 - June 14, 2024. Atlanta, GA, USA
 

src/content/learn/referencing-values-with-refs.md

@@ -284,7 +284,7 @@ console.log(ref.current); // 5
 
 ## Ref এবং DOM {/*refs-and-the-dom*/}
 
-আপনি যে কোনও মানের জন্য একটি ref নির্দেশ করতে পারেন। যদিও, একটি ref ব্যবহার করার সবচেয়ে সাধারণ ক্ষেত্র হল DOM element অ্যাক্সেস করা। উদাহরণস্বরূপ, এটি কাজে লাগে যদি আপনি একটি input কে প্রোগ্রামের মাধ্যমে focus করতে চান। যখন আপনি JSX এ একটি `ref` attribute-এ একটি ref pass করেন, যেমন `<div ref={myRef}>`, React `myRef.current` এ সংশ্লিষ্ট DOM element রাখবে। আপনি এই বিষয়ে আরও পড়তে পারেন [ref এর সাহায্যে DOM manipulation](/learn/manipulating-the-dom-with-refs) অংশে।
+আপনি যে কোনও মানের জন্য একটি ref নির্দেশ করতে পারেন। যদিও, একটি ref ব্যবহার করার সবচেয়ে সাধারণ ক্ষেত্র হল DOM element অ্যাক্সেস করা। উদাহরণস্বরূপ, এটি কাজে লাগে যদি আপনি একটি input কে প্রোগ্রামের মাধ্যমে focus করতে চান। যখন আপনি JSX এ একটি `ref` attribute-এ একটি ref pass করেন, যেমন `<div ref={myRef}>`, React `myRef.current` এ সংশ্লিষ্ট DOM এলিমেন্ট রাখবে। যখন DOM থেকে এলিমেন্টটি সরিয়ে ফেলা হয়, React `myRef.current` এর মান আপডেট করে `null` করে দেবে। আপনি এই বিষয়ে আরও পড়তে পারেন [ref এর সাহায্যে DOM manipulation](/learn/manipulating-the-dom-with-refs) অংশে।
 
 <Recap>
 

src/content/learn/rendering-lists.md

@@ -1086,7 +1086,7 @@ Here, `<Recipe {...recipe} key={recipe.id} />` is a syntax shortcut saying "pass
 
 #### List with a separator {/*list-with-a-separator*/}
 
-This example renders a famous haiku by Katsushika Hokusai, with each line wrapped in a `<p>` tag. Your job is to insert an `<hr />` separator between each paragraph. Your resulting structure should look like this:
+This example renders a famous haiku by Tachibana Hokushi, with each line wrapped in a `<p>` tag. Your job is to insert an `<hr />` separator between each paragraph. Your resulting structure should look like this:
 
 ```js
 <article>

src/content/learn/start-a-new-react-project.md

@@ -21,12 +21,12 @@ title: নতুন প্রোজেক্ট শুরু করুন
 **[Next.js](https://nextjs.org/) একটি full-stack React ফ্রেমওয়ার্ক।** এটি খুবই জনপ্রিয় এবং খুবই সহজে একটি ছোট ব্লগ ওয়েবসাইট অথবা অনেক বড় এবং জটিল অ্যাপ বানানোর জন্যে উপযোগী। নিচের কমান্ড টি আপনার টার্মিনাল এ রান করে আপনি একটি Next.js প্রোজেক্ট তৈরি করতে পারবেন।
 
 <TerminalBlock>
-npx create-next-app
+npx create-next-app@latest
 </TerminalBlock>
 
 আপনি যদি Next.js এ নতুন হয়ে থাকেন তাহলে তাদের অফিসিয়াল [Next.js tutorial](https://nextjs.org/learn/foundations/about-nextjs) দেখতে পারেন।
 
-Next.js এর রক্ষণাবেক্ষণের কাজ করে থাকে [Vercel](https://vercel.com/)। যেকোনো Node.js অথবা serverless হোস্টিং, অথবা আপনার নিজস্ব সার্ভারে [একটি Next.js অ্যাপ deploy](https://nextjs.org/docs/deployment) করতে পারবেন। [সম্পূর্ণ স্ট্যাটিক Next.js অ্যাপ](https://nextjs.org/docs/advanced-features/static-html-export) যেকোনো স্ট্যাটিক হোস্টিং এ deploy করা যায়।
+Next.js এর রক্ষণাবেক্ষণের কাজ করে থাকে [Vercel](https://vercel.com/)। যেকোনো Node.js অথবা serverless হোস্টিং, অথবা আপনার নিজস্ব সার্ভারে [একটি Next.js অ্যাপ deploy](https://nextjs.org/docs/deployment) করতে পারবেন। Next.js সম্পূর্ণ [স্ট্যাটিক এক্সপোর্ট](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) সাপোর্ট করে যার কোন সার্ভারের প্রয়োজন নেই।
 
 ### Remix {/*remix*/}
 
@@ -93,12 +93,7 @@ Expo এর রক্ষণাবেক্ষণের কাজ করে থ
 
 **[Next.js's অ্যাপ রাউটার](https://beta.nextjs.org/docs/getting-started) এটি Next.js API-এর একটি পুনঃডিজাইন যা React টিমের ফুল-স্ট্যাক আর্কিটেকচার ভিশন পূরণ করার লক্ষ্যে।** এটি আপনাকে asynchronous কম্পোনেন্ট গুলিতে ডেটা আনতে দেয় যা সার্ভারে বা এমনকি বিল্ড চলাকালীনও চলে।
 
-[Vercel](https://vercel.com/), Next.js এর রক্ষণাবেক্ষণের কাজ করে থাকে। যেকোনো Node.js অথবা serverless হোস্টিং, অথবা আপনার নিজস্ব সার্ভারে [একটি Next.js অ্যাপ deploy](https://nextjs.org/docs/deployment) করতে পারবেন। Next.js [স্ট্যাটিক এক্সপোর্ট](https://beta.nextjs.org/docs/configuring/static-export) সমর্থন করে যার জন্য সার্ভারের প্রয়োজন হয় না।
-<Pitfall>
-
-Next.js-এর অ্যাপ রাউটার **বর্তমানে beta তে রয়েছে এবং এটি এখনও প্রোডাকশনের জন্য সাজেস্ট করা হয়নি** (মার্চ 2023 অনুযায়ী). একটি Next.js প্রোজেক্টে এটি নিয়ে পরীক্ষা করতে, [এই ক্রমবর্ধমান মাইগ্রেশন গাইড অনুসরণ করুন](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app)।
-
-</Pitfall>
+[Vercel](https://vercel.com/), Next.js এর রক্ষণাবেক্ষণের কাজ করে থাকে। যেকোনো Node.js অথবা serverless হোস্টিং, অথবা আপনার নিজস্ব সার্ভারে [একটি Next.js অ্যাপ deploy](https://nextjs.org/docs/deployment) করতে পারবেন। Next.js [স্ট্যাটিক এক্সপোর্ট](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) সমর্থন করে যার জন্য সার্ভারের প্রয়োজন হয় না।
 
 <DeepDive>
 

src/content/learn/tutorial-tic-tac-toe.md

@@ -2073,7 +2073,13 @@ export default function Game() {
 }
 ```
 
-You can see what your code should look like below. Note that you should see an error in the developer tools console that says: ``Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.`` You'll fix this error in the next section.
+You can see what your code should look like below. Note that you should see an error in the developer tools console that says: 
+
+<ConsoleBlock level="warning">
+Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of &#96;Game&#96;.
+</ConsoleBlock>
+  
+You'll fix this error in the next section.
 
 <Sandpack>
 

src/content/reference/react/Profiler.md

@@ -55,7 +55,7 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime
 
 * `id`: `<Profiler>` ট্রিয়ের স্ট্রিং `id` প্রপ যা মাত্র কমিট করেছে। এটা আপনাকে জানায় যে ট্রিয়ের কোন অংশ কমিট করেছে যদি আপনি একাধিক প্রোফাইলার ব্যবহার করে থাকেন।
 * `phase`: `"mount"`, `"update"` অথবা `"nested-update"`। এটা আপনাকে জানায় যে ট্রি কি এই প্রথম মাউন্ট হল নাকি prop, state বা hook এর পরিবর্তনের কারণে পরিবর্তিত হয়েছে।
-* `actualDuration`: বর্তমান আপডেটে `<Profiler>` এবং এর উত্তরসূরিদের রেন্ডার করতে যত মিলিসেকেন্ড খরচ হয়েছে সেই সংখ্যাটা। এটা নির্দেশ করে সাবট্রি মেমোইজেশন কতটা ভালভাবে ব্যবহার করতে পারছে (উদাহরণস্বরূপঃ [`memo`](/reference/react/memo) এবং [`useMemo`](/reference/react/useMemo))। সব ঠিকঠাক থাকলে এই মানটা প্রথম মাউন্টের পর থেকে উল্লেখজনকভাবে কমে যাবার কথা কারণ, উত্তরসূরিদের অনেকেরই পুনরায় রেন্ডার তখনই হবে যখন তাদের কোন prop এর পরিবর্তন হয়।
+* `actualDuration`: বর্তমান আপডেটে `<Profiler>` এবং এর উত্তরসূরিদের রেন্ডার করতে যত মিলিসেকেন্ড খরচ হয়েছে সেই সংখ্যাটা। এটা নির্দেশ করে সাবট্রি মেমোইজেশন কতটা ভালভাবে ব্যবহার করতে পারছে (উদাহরণস্বরূপঃ [`memo`](/reference/react/memo) এবং [`useMemo`](/reference/react/useMemo))। সব ঠিকঠাক থাকলে এই মানটা প্রথম মাউন্টের পর থেকে উল্লেখজনকভাবে কমে যাবার কথা কারণ, উত্তরসূরিদের অনেকেরই পুনরায় রেন্ডার তখনই হবে যখন তাদের কোন prop এর পরিবর্তন হবে।
 * `baseDuration`: এই সংখ্যাটা বোঝায় যে কোন অপটিমাইজেশন ছাড়া পুরো `<Profiler>` সাবট্রি আবার রেন্ডার করার জন্য আনুমানিক কত মিলিসেকেন্ড লাগবে। সর্বশেষ  রেন্ডারের জন্য ট্রিয়ের প্রতিটি কম্পোনেন্টে যে সময় লেগেছিল সেটা থেকে এই সংখ্যাটা হিসেব করা হয়। এই মানটা নির্দেশ করে রেন্ডারিং এর জন্য সবচেয়ে বেশি কত সময় লাগতে পারে (উদাহরণস্বরূপঃ একদম প্রাথমিক মাউন্ট বা মেমোইজেশন ছাড়া মাউন্টের সময়)। এর সাথে `actualDuration` তুলনা করে আপনি বুঝতে পারবেন  মেমোইজেশন কাজ করছে কি না।
 * `startTime`: একটা সাংখ্যিক টাইমস্ট্যাম্প যা নির্দেশ করে কখন React বর্তমান আপডেট শুরু করেছিল।
 * `endTime`: একটা সাংখ্যিক টাইমস্ট্যাম্প যা নির্দেশ করে কখন React বর্তমান আপডেট commit করেছে। এই মানটা একটা কমিটে সব প্রোফাইলের সাথে শেয়ার করা হয়। যা তাদের প্রয়োজনে গ্রুপ হবার সুযোগ দেয়।

src/content/reference/react/useMemo.md

@@ -647,7 +647,7 @@ In this example, the `List` component is **artificially slowed down** so that yo
 
 Switching the tabs feels slow because it forces the slowed down `List` to re-render. That's expected because the `tab` has changed, and so you need to reflect the user's new choice on the screen.
 
-Next, try toggling the theme. **Thanks to `useMemo` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** The `List` skipped re-rendering because the `visibleItems` array has not changed since the last render. The `visibleItems` array has not changed because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render.
+Next, try toggling the theme. **Thanks to `useMemo` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** The `List` skipped re-rendering because the `visibleTodos` array has not changed since the last render. The `visibleTodos` array has not changed because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render.
 
 <Sandpack>