From 0a74f01ee04370fb3a1be2552866c030b90a885a Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Fri, 22 Aug 2025 09:13:00 -0700 Subject: [PATCH 01/17] Add more information about event and property binding on custom elements (#7939) Co-authored-by: Sebastian "Sebbie" Silbermann --- .../reference/react-dom/components/index.md | 134 ++++++++++++++++-- 1 file changed, 124 insertions(+), 10 deletions(-) diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md index ec2e1d2ee..586663398 100644 --- a/src/content/reference/react-dom/components/index.md +++ b/src/content/reference/react-dom/components/index.md @@ -162,23 +162,137 @@ Similar to the [DOM standard,](https://developer.mozilla.org/en-US/docs/Web/API/ ### Custom HTML elements {/*custom-html-elements*/} -If you render a tag with a dash, like ``, React will assume you want to render a [custom HTML element.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) In React, rendering custom elements works differently from rendering built-in browser tags: - -- All custom element props are serialized to strings and are always set using attributes. -- Custom elements accept `class` rather than `className`, and `for` rather than `htmlFor`. +If you render a tag with a dash, like ``, React will assume you want to render a [custom HTML element.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) If you render a built-in browser HTML element with an [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is) attribute, it will also be treated as a custom element. - +#### Setting values on custom elements {/*attributes-vs-properties*/} + +Custom elements have two methods of passing data into them: + +1) Attributes: Which are displayed in markup and can only be set to string values +2) Properties: Which are not displayed in markup and can be set to arbitrary JavaScript values + +By default, React will pass values bound in JSX as attributes: + +```jsx + +``` + +Non-string JavaScript values passed to custom elements will be serialized by default: + +```jsx +// Will be passed as `"1,2,3"` as the output of `[1,2,3].toString()` + +``` + +React will, however, recognize an custom element's property as one that it may pass arbitrary values to if the property name shows up on the class during construction: + + + +```js src/index.js hidden +import {MyElement} from './MyElement.js'; +import { createRoot } from 'react-dom/client'; +import {App} from "./App.js"; + +customElements.define('my-element', MyElement); + +const root = createRoot(document.getElementById('root')) +root.render(); +``` + +```js src/MyElement.js active +export class MyElement extends HTMLElement { + constructor() { + super(); + // The value here will be overwritten by React + // when initialized as an element + this.value = undefined; + } + + connectedCallback() { + this.innerHTML = this.value.join(", "); + } +} +``` -[A future version of React will include more comprehensive support for custom elements.](https://github.com/facebook/react/issues/11347#issuecomment-1122275286) +```js src/App.js +export function App() { + return +} +``` -You can try it by upgrading React packages to the most recent experimental version: + + +#### Listening for events on custom elements {/*custom-element-events*/} + +A common pattern when using custom elements is that they may dispatch [`CustomEvent`s](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) rather than accept a function to call when an event occur. You can listen for these events using an `on` prefix when binding to the event via JSX. + + + +```js src/index.js hidden +import {MyElement} from './MyElement.js'; +import { createRoot } from 'react-dom/client'; +import {App} from "./App.js"; + +customElements.define('my-element', MyElement); + +const root = createRoot(document.getElementById('root')) +root.render(); +``` + +```javascript src/MyElement.js +export class MyElement extends HTMLElement { + constructor() { + super(); + this.test = undefined; + this.emitEvent = this._emitEvent.bind(this); + } + + _emitEvent() { + const event = new CustomEvent('speak', { + detail: { + message: 'Hello, world!', + }, + }); + this.dispatchEvent(event); + } + + connectedCallback() { + this.el = document.createElement('button'); + this.el.innerText = 'Say hi'; + this.el.addEventListener('click', this.emitEvent); + this.appendChild(this.el); + } + + disconnectedCallback() { + this.el.removeEventListener('click', this.emitEvent); + } +} +``` + +```jsx src/App.js active +export function App() { + return ( + console.log(e.detail.message)} + > + ) +} +``` + + + + -- `react@experimental` -- `react-dom@experimental` +Events are case-sensitive and support dashes (`-`). Preserve the casing of the event and include all dashes when listening for custom element's events: -Experimental versions of React may contain bugs. Don't use them in production. +```jsx +// Listens for `say-hi` events + +// Listens for `sayHi` events + +``` --- From 27d86ffe6ec82e3642c6490d2187bae2271020a4 Mon Sep 17 00:00:00 2001 From: Sam Selikoff Date: Fri, 22 Aug 2025 18:04:04 -0400 Subject: [PATCH 02/17] Touch-ups to Activity (#7940) --- src/content/reference/react/Activity.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index f437a74da..09b79c79f 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -51,7 +51,7 @@ While hidden, children still re-render in response to new props, albeit at a low When the boundary becomes visible again, React will reveal the children with their previous state restored, and re-create their Effects. -In this way, Activity can thought of as a mechanism for rendering "background activity". Rather than completely discarding content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state, while ensuring hidden content has no unwanted side effects. +In this way, Activity can be thought of as a mechanism for rendering "background activity". Rather than completely discarding content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state, while ensuring that your hidden content has no unwanted side effects. [See more examples below.](#usage) @@ -62,7 +62,7 @@ In this way, Activity can thought of as a mechanism for rendering "background ac #### Caveats {/*caveats*/} -- When used with ``, hidden activities that reveal in a transition will activate an "enter" animation. Visible Activities hidden in a transition will activate an "exit" animation. +- If an Activity is rendered inside of a [ViewTransition](/reference/react/ViewTransition), and it becomes visible as a result of an update caused by [startTransition](/reference/react/startTransition), it will activate the ViewTransition's `enter` animation. If it becomes hidden, it will activate its `exit` animation. --- @@ -70,7 +70,7 @@ In this way, Activity can thought of as a mechanism for rendering "background ac ### Restoring the state of hidden components {/*restoring-the-state-of-hidden-components*/} -Typically in React, when you want to conditionally show or hide a component, you mount and unmount it: +In React, when you want to conditionally show or hide a component, you typically mount or unmount it based on that condition: ```jsx {isShowingSidebar && ( @@ -88,11 +88,11 @@ When you hide a component using an Activity boundary instead, React will "save" ``` -This makes it possible to restore components to their previous state. +This makes it possible to hide and then later restore components in the state they were previously in. -The following example has a sidebar with an expandable section – you can press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar. +The following example has a sidebar with an expandable section. You can press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar. -Try expanding the Overview section, then toggling the sidebar closed and open: +Try expanding the Overview section, and then toggling the sidebar closed then open: From 3d537b21af898e6072b2539d10e0b4e38efed99c Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 04:44:24 +0600 Subject: [PATCH 03/17] Fix dead link in add-react-to-an-existing-project --- src/content/learn/add-react-to-an-existing-project.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index 4c98c0013..3ba5a68aa 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -24,11 +24,7 @@ title: ইতোমধ্যে বানানো প্রজেক্টে R ২. **ফ্রেমওয়ার্কের কনফিগারেশন অংশে `/some-app` _base path_ হিসেবে সেট করুন** (এখানে কিভাবে করবেন তা দেখুনঃ [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/))। ৩. **আপনার সার্ভার বা প্রক্সি কনফিগার করুন** যাতে `/some-app/` এর সমস্ত request আপনার React অ্যাপ দ্বারা হ্যান্ডেল করা হয়। -<<<<<<< HEAD -এটি নিশ্চিত করে যে আপনার অ্যাপের React অংশ [এই ফ্রেমওয়ার্কগুলির উন্নয়নগুলির উপর ভিত্তি করে](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) -======= -This ensures the React part of your app can [benefit from the best practices](/learn/build-a-react-app-from-scratch#consider-using-a-framework) baked into those frameworks. ->>>>>>> 27d86ffe6ec82e3642c6490d2187bae2271020a4 +এটি নিশ্চিত করে যে আপনার অ্যাপের React অংশ [এই ফ্রেমওয়ার্কগুলির উন্নয়নগুলির উপর ভিত্তি করে](/learn/build-a-react-app-from-scratch#consider-using-a-framework) অনেক React ভিত্তিক ফ্রেমওয়ার্ক full-stack এবং আপনার React অ্যাপটিকে সার্ভারের সুবিধা নিতে দেয়। তবে আপনি যদি সার্ভারে জাভাস্ক্রিপ্ট রান করার সুযোগ না পান অথবা না চান, সে ক্ষেত্রেও একই পদক্ষেপটি নিতে পারেন। সে ক্ষেত্রে, `/some-app/` এর পরিবর্তে HTML/CSS/JS এক্সপোর্ট করুন (Next.js এর জন্য [`next export` output](https://nextjs.org/docs/advanced-features/static-html-export), Gatsby এর জন্য ডিফল্ট )। From 1b8b16406c8a708181e14c881296071e45064f5d Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 04:44:57 +0600 Subject: [PATCH 04/17] Fix dead link in synchronizing-with-effects --- src/content/learn/synchronizing-with-effects.md | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 1ab4e4ccc..d49befada 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -730,14 +730,9 @@ Effect এ `fetch` কল লেখা [ডেটা ফেচিংয়ের - **মূলত Effect এ সরাসরি ডেটা ফেচ করার মানে এই যে, আপনি ডেটা প্রিলোড বা ক্যাশ করতে পারবেন না।** উদাহরণস্বরূপ, যদি কম্পোনেন্টটি আনমাউন্ট হয় এবং পুনরায় মাউন্ট হয়, এটিকে পুনরায় ডাটা ফেচ করতে হবে। - **এটা খুব একটা ergonomic নয়।** ফেচ কল লেখার সময়, যাতে [রেস কন্ডিশন](https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect) এর মতো বাগে suffer করতে না হয়, তার জন্য বেশ ভালো পরিমাণের বয়লারপ্লেট কোড লেখা লাগে। -<<<<<<< HEAD ডাউনসাইডের এই তালিকাটি React জন্য নির্দিষ্ট নয়। এটি যে কোনো লাইব্রেরির মাধ্যমে মাউন্টের সময় ডেটা ফেচের ক্ষেত্রে প্রযোজ্য। রাউটিংয়ের মতো, ডেটা ফেচিং ভালোভাবে করা সহজ নয়, তাই আমরা নিম্নলিখিত পদ্ধতির পরামর্শ দিই: -======= -- **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls. -- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes). ->>>>>>> 27d86ffe6ec82e3642c6490d2187bae2271020a4 -- **আপনি যদি একটি [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) ব্যবহার করেন, তার built-in ডেটা ফেচিং প্রক্রিয়া ব্যবহার করুন।** আধুনিক রিয়্যাক্ট ফ্রেমওয়ার্কগুলির মধ্যে integrated ডেটা ফেচিং প্রক্রিয়া রয়েছে যা কার্যকর এবং উপরের সমস্যা গুলো মুক্ত। +- **আপনি যদি একটি [framework](/learn/start-a-new-react-project#full-stack-frameworks) ব্যবহার করেন, তার built-in ডেটা ফেচিং প্রক্রিয়া ব্যবহার করুন।** আধুনিক রিয়্যাক্ট ফ্রেমওয়ার্কগুলির মধ্যে integrated ডেটা ফেচিং প্রক্রিয়া রয়েছে যা কার্যকর এবং উপরের সমস্যা গুলো মুক্ত। - **অন্যথায়, একটি ক্লায়েন্ট-সাইড ক্যাশ ইউজ করুন বা বিল্ড করুন।** জনপ্রিয় ওপেন সোর্স সমাধানের মধ্যে [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), এবং [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) রয়েছে। আপনি একটি নিজস্ব সমাধানো তৈরি করতে পারেন এই ক্ষেত্রে আপনি Effect গুলো আন্ডার দ্যা হুডে ব্যবহার করতে পারেন, তবে request ডিডুপ্লিকেট করাতে, response ক্যাশ করতে, এবং নেটওয়ার্ক ওয়াটারফল এড়াতে লজিক add করুন। (ডাটা প্রিলোডিং করে বা ডাটা requirement গুলো রাউটে hoisting করে)। যদি এই পদক্ষেপগুলোর মধ্যে কোনটিই আপনার জন্য প্রযোজ্য না হয়, তবে সরাসরি Effect-এ ডেটা ফেচিং চালিয়ে যেতে পারেন।" From f9137d831a995c9ab85a1040647fb5b8b978cc99 Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 04:45:19 +0600 Subject: [PATCH 05/17] Fix dead link in createRoot --- src/content/reference/react-dom/client/createRoot.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 6ae09c834..74dfaacf0 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -209,11 +209,7 @@ function Counter() {
``` -<<<<<<< HEAD -বিষয়টা খুব ধীর রকম অনুভূত হতে পারে! এটা সমাধানের জন্য, আপনি [বিল্ডের সময় বা সার্ভারে](/reference/react-dom/server) আপনার কম্পোনেন্ট গুলো থেকে প্রাথমিক HTML তৈরি করে ফেলতে পারেন। এর পরে আপনার ভিজিটররা জাভাস্ক্রিপ্ট লোড হবার আগেই টেক্সট পড়তে, ছবি দেখতে এবং লিঙ্ক ক্লিক করতে পারবে। আমাদের উপদেশ থাকবে যে আপনি এর জন্য একটা [ফ্রেমওয়ার্ক ব্যবহার করুন](/learn/start-a-new-react-project#production-grade-react-frameworks) যা নিজেই এই অপটিমাইজেশনটুকু করে দেবে। কখন এটা রান করছে তার উপর নির্ভর করে একে বলা হয়, *server-side rendering (SSR)* অথবা *static site generation (SSG)।* -======= -This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/start-a-new-react-project#full-stack-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).* ->>>>>>> 27d86ffe6ec82e3642c6490d2187bae2271020a4 +বিষয়টা খুব ধীর রকম অনুভূত হতে পারে! এটা সমাধানের জন্য, আপনি [বিল্ডের সময় বা সার্ভারে](/reference/react-dom/server) আপনার কম্পোনেন্ট গুলো থেকে প্রাথমিক HTML তৈরি করে ফেলতে পারেন। এর পরে আপনার ভিজিটররা জাভাস্ক্রিপ্ট লোড হবার আগেই টেক্সট পড়তে, ছবি দেখতে এবং লিঙ্ক ক্লিক করতে পারবে। আমাদের উপদেশ থাকবে যে আপনি এর জন্য একটা [ফ্রেমওয়ার্ক ব্যবহার করুন](/learn/start-a-new-react-project#full-stack-frameworks) যা নিজেই এই অপটিমাইজেশনটুকু করে দেবে। কখন এটা রান করছে তার উপর নির্ভর করে একে বলা হয়, *server-side rendering (SSR)* অথবা *static site generation (SSG)।* From 99a6dc7b1e2de1ec667fcfef5f83bcdf652cadf6 Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 04:45:37 +0600 Subject: [PATCH 06/17] Fix dead link in rwact-dom/client/index --- src/content/reference/react-dom/client/index.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/reference/react-dom/client/index.md b/src/content/reference/react-dom/client/index.md index 4e624d588..78871c526 100644 --- a/src/content/reference/react-dom/client/index.md +++ b/src/content/reference/react-dom/client/index.md @@ -4,11 +4,7 @@ title: ক্লায়েন্ট React DOM API -<<<<<<< HEAD -`react-dom/client` API গুলো ক্লায়েন্টে (ব্রাউজারের মধ্যে) React কম্পোনেন্ট রেন্ডার করতে দেয়। এই API গুলো সাধারণত আপনার অ্যাপের একদম উপরের স্তরে React ট্রি ইনিশিয়ালাইজ করার কাজে ব্যবহৃত হয়। আপনার জন্য কল দিয়ে দিতে পারে একটি [framework](/learn/start-a-new-react-project#production-grade-react-frameworks)। আপনার বেশিরভাগ কম্পোনেন্টের সেগুলো ইমপোর্ট বা ব্যবহারের প্রয়োজন পড়বে না। -======= -The `react-dom/client` APIs let you render React components on the client (in the browser). These APIs are typically used at the top level of your app to initialize your React tree. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them. ->>>>>>> 27d86ffe6ec82e3642c6490d2187bae2271020a4 +`react-dom/client` API গুলো ক্লায়েন্টে (ব্রাউজারের মধ্যে) React কম্পোনেন্ট রেন্ডার করতে দেয়। এই API গুলো সাধারণত আপনার অ্যাপের একদম উপরের স্তরে React ট্রি ইনিশিয়ালাইজ করার কাজে ব্যবহৃত হয়। আপনার জন্য কল দিয়ে দিতে পারে একটি [framework](/learn/start-a-new-react-project#full-stack-frameworks)। আপনার বেশিরভাগ কম্পোনেন্টের সেগুলো ইমপোর্ট বা ব্যবহারের প্রয়োজন পড়বে না। From c00df9fa023965448ea0fcca2f4a71bdc42efbad Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 04:45:55 +0600 Subject: [PATCH 07/17] Fix dead link in react-dom/server/index --- src/content/reference/react-dom/server/index.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/reference/react-dom/server/index.md b/src/content/reference/react-dom/server/index.md index 3c032ecc9..4d514457c 100644 --- a/src/content/reference/react-dom/server/index.md +++ b/src/content/reference/react-dom/server/index.md @@ -4,11 +4,7 @@ title: Server React DOM API -<<<<<<< HEAD -`react-dom/server` API গুলো আপনাকে সার্ভারে React কম্পোনেন্টকে HTML এ রেন্ডার করার সুযোগ দেয়। প্রাথমিক HTML তৈরীর জন্য এই API গুলো কেবল মাত্র সার্ভারে আপনার অ্যাপের একদম উপরের লেভেলে ব্যবহৃত হয়। আপনার হয়ে একটা [ফ্রেমওয়ার্ক](/learn/start-a-new-react-project#production-grade-react-frameworks) এই API গুলোকে কল দিতে পারে। আপনার বেশিরভাগ কম্পোনেন্টের এগুলোকে ব্যবহারের দরকার পড়বে না। -======= -The `react-dom/server` APIs let you server-side render React components to HTML. These APIs are only used on the server at the top level of your app to generate the initial HTML. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them. ->>>>>>> 27d86ffe6ec82e3642c6490d2187bae2271020a4 +`react-dom/server` API গুলো আপনাকে সার্ভারে React কম্পোনেন্টকে HTML এ রেন্ডার করার সুযোগ দেয়। প্রাথমিক HTML তৈরীর জন্য এই API গুলো কেবল মাত্র সার্ভারে আপনার অ্যাপের একদম উপরের লেভেলে ব্যবহৃত হয়। আপনার হয়ে একটা [ফ্রেমওয়ার্ক](/learn/start-a-new-react-project#full-stack-frameworks) এই API গুলোকে কল দিতে পারে। আপনার বেশিরভাগ কম্পোনেন্টের এগুলোকে ব্যবহারের দরকার পড়বে না। From cc261ccb4565305680afa6a7ff4d6155eccfd1fd Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 04:46:15 +0600 Subject: [PATCH 08/17] Fix dead link in render to pipeableStream --- .../reference/react-dom/server/renderToPipeableStream.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 7d0d1ab3d..f705893c2 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -431,7 +431,7 @@ function ProfilePage() { } ``` -If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content) +If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content) 1. It will emit the loading fallback for the closest `` boundary (`PostsGlimmer`) into the HTML. 2. It will "give up" on trying to render the `Posts` content on the server anymore. From bdcd7fb11695f2b1ff11ec5856cb8ca40b0f53b5 Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 04:46:38 +0600 Subject: [PATCH 09/17] Fix dead link in renderToReadableStream --- .../reference/react-dom/server/renderToReadableStream.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index f407f2245..f4ed54ce2 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -435,7 +435,7 @@ function ProfilePage() { } ``` -If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content) +If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content) 1. It will emit the loading fallback for the closest `` boundary (`PostsGlimmer`) into the HTML. 2. It will "give up" on trying to render the `Posts` content on the server anymore. From 6302d52743657da8b5b3c5b64d21cdbbed5adeef Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 04:46:57 +0600 Subject: [PATCH 10/17] FIx merge conflict in memo --- src/content/reference/react/memo.md | 41 +++++++++++------------------ 1 file changed, 16 insertions(+), 25 deletions(-) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index 9f1c8406d..126bf3c1b 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -118,11 +118,7 @@ label { #### আপনি কি সর্বত্র `memo` যোগ করবেন? {/*should-you-add-memo-everywhere*/} -<<<<<<< HEAD যদি আপনার অ্যাপ এই সাইটের মতো হয়, এবং বেশিরভাগ ইন্টারেকশন ভারী (যেমন একটি পৃষ্ঠা বা পুরো অংশ প্রতিস্থাপন করা) হয়, তাহলে মেমোয়াইজেশন সাধারণত অপ্রয়োজনীয়। অন্যদিকে, যদি আপনার অ্যাপ একটি ড্রয়িং এডিটরের মতো হয়, এবং বেশিরভাগ ইন্টারেকশন সূক্ষ্ম (যেমন shape সরানো), তাহলে মেমোয়াইজেশন আপনার কাছে খুব উপকারী মনে হতে পারে। -======= -If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful. ->>>>>>> 27d86ffe6ec82e3642c6490d2187bae2271020a4 `memo` দ্বারা অপ্টিমাইজেশন তখনই মূল্যবান যখন আপনার কম্পোনেন্ট একই নির্দিষ্ট প্রপসের সাথে প্রায়শই পুনরায় রেন্ডার হয়, এবং এর পুনরায় রেন্ডার লজিক খরচবহুল। যদি আপনার কম্পোনেন্ট পুনরায় রেন্ডার হওয়ার সময় কোনো লক্ষণীয় ধীরতা না থাকে, তাহলে `memo` অপ্রয়োজনীয়। মনে রাখবেন, যদি আপনার কম্পোনেন্টের পাস করা প্রপস *সর্বদা আলাদা* হয়, যেমন যদি আপনি একটি অবজেক্ট বা রেন্ডারিং সময় ডিফাইন করা একটি সাধারণ ফাংশন পাস করেন। এই কারণে আপনার প্রায়শই [`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components) এবং [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components) এর সাথে `memo` ব্যবহার করা প্রয়োজন হবে। @@ -367,17 +363,13 @@ function arePropsEqual(oldProps, newProps) { --- -<<<<<<< HEAD -## ট্রাবলশুটিং {/*troubleshooting*/} -### আমার কম্পোনেন্ট পুনরায় রেন্ডার হয় যখন একটি প্রপ অবজেক্ট, অ্যারে, অথবা ফাংশন হয় {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/} -======= -### Do I still need React.memo if I use React Compiler? {/*react-compiler-memo*/} +### যদি আমি React কম্পাইলার ব্যবহার করি তাও কি আমার কি React.memo লাগবে? {/*react-compiler-memo*/} -When you enable [React Compiler](/learn/react-compiler), you typically don't need `React.memo` anymore. The compiler automatically optimizes component re-rendering for you. +যখন আপনি [React Compiler](/learn/react-compiler) এনাবল করেন, তখন সাধারণত `React.memo` এর প্রয়োজন হয় না আর। কম্পাইলার স্বয়ংক্রিয়ভাবে আপনার কম্পোনেন্ট রি-রেন্ডারিং অপ্টিমাইজ করে দেয়। -Here's how it works: +এটা এভাবে কাজ করে: -**Without React Compiler**, you need `React.memo` to prevent unnecessary re-renders: +**React কম্পাইলার ব্যতীত**, অপ্রয়োজনীয় রি-রেন্ডার ঠেকাতে আপনার `React.memo` এর প্রয়োজন পড়বে: ```js // Parent re-renders every second @@ -406,7 +398,7 @@ const ExpensiveChild = memo(function ExpensiveChild({ name }) { }); ``` -**With React Compiler enabled**, the same optimization happens automatically: +**React কম্পাইলার সক্রিয় অবস্থায়**, একই অপটিমাইজেশন স্বয়ংক্রিয় ভাবে হবে: ```js // No memo needed - compiler prevents re-renders automatically @@ -416,7 +408,7 @@ function ExpensiveChild({ name }) { } ``` -Here's the key part of what the React Compiler generates: +React কম্পাইলার যা তৈরি করে তার মূল অংশ হল এটা: ```js {6-12} function Parent() { @@ -435,25 +427,24 @@ function Parent() { } ``` -Notice the highlighted lines: The compiler wraps `` in a cache check. Since the `name` prop is always `"John"`, this JSX is created once and reused on every parent re-render. This is exactly what `React.memo` does - it prevents the child from re-rendering when its props haven't changed. +হাইলাইট করা লাইনগুলো খেয়াল করুন: কম্পাইলার ``-কে একটি cache check দিয়ে ঘিরে রাখে। যেহেতু `name` prop সবসময় `"John"`, এই JSX একবারই তৈরি হয় এবং প্রতিটি parent re-render-এর সময় পুনরায় ব্যবহার হয়। ঠিক এটাই `React.memo` করে—props না বদলালে child re-render হওয়া থামিয়ে দেয়। -The React Compiler automatically: -1. Tracks that the `name` prop passed to `ExpensiveChild` hasn't changed -2. Reuses the previously created JSX for `` -3. Skips re-rendering `ExpensiveChild` entirely +React Compiler স্বয়ংক্রিয়ভাবে: +1. ট্র্যাক করে যে `ExpensiveChild`-এ পাঠানো `name` prop বদলায়নি +2. ``-এর জন্য আগে তৈরি করা JSX-টাই পুনঃব্যবহার করে +3. `ExpensiveChild`-কে পুরোপুরি re-render করা স্কিপ করে -This means **you can safely remove `React.memo` from your components when using React Compiler**. The compiler provides the same optimization automatically, making your code cleaner and easier to maintain. +এর মানে হলো **React Compiler ব্যবহার করলে নির্ভয়ে কম্পোনেন্টগুলো থেকে `React.memo` সরিয়ে দিতে পারেন**। কম্পাইলার একই অপ্টিমাইজেশন স্বয়ংক্রিয়ভাবে দেয়, ফলে কোড আরও পরিচ্ছন্ন হয় এবং মেইনটেইন করাও সহজ হয়। -The compiler's optimization is actually more comprehensive than `React.memo`. It also memoizes intermediate values and expensive computations within your components, similar to combining `React.memo` with `useMemo` throughout your component tree. +কম্পাইলারের অপ্টিমাইজেশন আসলে `React.memo`-এর থেকেও বেশি বিস্তৃত। এটি কম্পোনেন্টের ভেতরের মধ্যবর্তী মান (intermediate values) ও ব্যয়বহুল গণনাগুলোও memoize করে, যা পুরো কম্পোনেন্ট ট্রি জুড়ে `React.memo` এবং `useMemo` একসাথে ব্যবহারের মতো ফল দেয়। --- -## Troubleshooting {/*troubleshooting*/} -### My component re-renders when a prop is an object, array, or function {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/} ->>>>>>> 27d86ffe6ec82e3642c6490d2187bae2271020a4 +## ট্রাবলশুটিং {/*troubleshooting*/} +### আমার কম্পোনেন্ট পুনরায় রেন্ডার হয় যখন একটি প্রপ অবজেক্ট, অ্যারে, অথবা ফাংশন হয় {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/} -React পুরানো এবং নতুন প্রপসগুলি shallow equality দ্বারা তুলনা করেঃ অর্থাৎ, এটি বিবেচনা করে যে প্রতিটি নতুন প্রপ পুরানো প্রপের সাথে রেফারেন্স-সমান কিনা। যদি আপনি প্রতি বার প্যারেন্ট পুনরায় রেন্ডার হলে একটি নতুন অবজেক্ট বা অ্যারে তৈরি করেন, এমনকি যদি প্রতিটি উপাদান একই হয়, React এটিকে পরিবর্তিত হিসেবে বিবেচনা করবে। একই ভাবে, যদি আপনি প্যারেন্ট কম্পোনেন্ট রেন্ডার করার সময় একটি নতুন ফাংশন তৈরি করেন, React এটিকে পরিবর্তিত হিসেবে বিবেচনা করবে, এমনকি যদি ফাংশনের ডেফিনিশন একই হয়। এটি এড়াতে, [প্রপসগুলি সরল করুন অথবা প্যারেন্ট কম্পোনেন্টে প্রপসগুলি মেমোয়াইজ করুন](#minimizing-props-changes)। +React পুরানো এবং নতুন প্রপসগুলি shallow equality দ্বারা তুলনা করেঃ অর্থাৎ, এটি বিবেচনা করে যে প্রতিটি নতুন প্রপ পুরানো প্রপের সাথে রেফারেন্স-সমান কিনা। যদি আপনি প্রতি বার প্যারেন্ট পুনরায় রেন্ডার হলে একটি নতুন অবজেক্ট বা অ্যারে তৈরি করেন, এমনকি যদি প্রতিটি উপাদান একই হয়, React এটিকে পরিবর্তিত হিসেবে বিবেচনা করবে। একই ভাবে, যদি আপনি প্যারেন্ট কম্পোনেন্ট রেন্ডার করার সময় একটি নতুন ফাংশন তৈরি করেন, React এটিকে পরিবর্তিত হিসেবে বিবেচনা করবে, এমনকি যদি ফাংশনের ডেফিনিশন একই হয়। এটি এড়াতে, [প্রপসগুলি সরল করুন অথবা প্যারেন্ট কম্পোনেন্টে প্রপসগুলি মেমোয়াইজ করুন](#minimizing-props-changes)। \ No newline at end of file From ead792fb071a998bf2b6fc0bca91c6f8bc7b3eb7 Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 04:47:10 +0600 Subject: [PATCH 11/17] Fix dead link in useLayoutEffect --- src/content/reference/react/useLayoutEffect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md index d38458f14..ab4b1e476 100644 --- a/src/content/reference/react/useLayoutEffect.md +++ b/src/content/reference/react/useLayoutEffect.md @@ -734,7 +734,7 @@ However, if you're running into this problem, you have a few different options: - Replace `useLayoutEffect` with [`useEffect`.](/reference/react/useEffect) This tells React that it's okay to display the initial render result without blocking the paint (because the original HTML will become visible before your Effect runs). -- Alternatively, [mark your component as client-only.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content) This tells React to replace its content up to the closest [``](/reference/react/Suspense) boundary with a loading fallback (for example, a spinner or a glimmer) during server rendering. +- Alternatively, [mark your component as client-only.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content) This tells React to replace its content up to the closest [``](/reference/react/Suspense) boundary with a loading fallback (for example, a spinner or a glimmer) during server rendering. - Alternatively, you can render a component with `useLayoutEffect` only after hydration. Keep a boolean `isMounted` state that's initialized to `false`, and set it to `true` inside a `useEffect` call. Your rendering logic can then be like `return isMounted ? : `. On the server and during the hydration, the user will see `FallbackContent` which should not call `useLayoutEffect`. Then React will replace it with `RealContent` which runs on the client only and can include `useLayoutEffect` calls. From a358728a6e6318a00b57a213403f7314282eadca Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 04:47:31 +0600 Subject: [PATCH 12/17] Fix dead link in useSyncExternalStore --- src/content/reference/react/useSyncExternalStore.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md index ce989a2a4..b15bf1a12 100644 --- a/src/content/reference/react/useSyncExternalStore.md +++ b/src/content/reference/react/useSyncExternalStore.md @@ -361,7 +361,7 @@ The `getServerSnapshot` function is similar to `getSnapshot`, but it runs only i - It runs on the server when generating the HTML. - It runs on the client during [hydration](/reference/react-dom/client/hydrateRoot), i.e. when React takes the server HTML and makes it interactive. -This lets you provide the initial snapshot value which will be used before the app becomes interactive. If there is no meaningful initial value for the server rendering, omit this argument to [force rendering on the client.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content) +This lets you provide the initial snapshot value which will be used before the app becomes interactive. If there is no meaningful initial value for the server rendering, omit this argument to [force rendering on the client.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content) From 24ae9e2c015d3f9dd59e3c04432283460537c3e9 Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 04:49:06 +0600 Subject: [PATCH 13/17] Fix dead link in option --- src/content/reference/react-dom/components/option.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/reference/react-dom/components/option.md b/src/content/reference/react-dom/components/option.md index f38f61d60..aee21be8e 100644 --- a/src/content/reference/react-dom/components/option.md +++ b/src/content/reference/react-dom/components/option.md @@ -36,11 +36,7 @@ title: "