diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx
index 2716fa2d1..3be1fa7a7 100644
--- a/src/components/MDX/TeamMember.tsx
+++ b/src/components/MDX/TeamMember.tsx
@@ -68,7 +68,7 @@ function GroupBadges({group}: {group: string}) {
);
}
-// TODO: good alt text for images/links
+// TODO: good alt text for images
export function TeamMember({
name,
title,
@@ -113,7 +113,7 @@ export function TeamMember({
aria-label={`${name} on Twitter`}
href={`https://twitter.com/${twitter}`}
className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-
+
{twitter}
@@ -124,7 +124,7 @@ export function TeamMember({
aria-label={`${name} on Threads`}
href={`https://threads.net/${threads}`}
className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-
+
{threads}
@@ -135,7 +135,7 @@ export function TeamMember({
aria-label={`${name} on Bluesky`}
href={`https://bsky.app/profile/${bsky}`}
className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-
+
{bsky}
@@ -143,19 +143,19 @@ export function TeamMember({
{github && (
- {github}
+ {github}
)}
{personal && (
- {personal}
+ {personal}
)}
diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md
index 96d2a630d..8f47a1645 100644
--- a/src/content/blog/2023/03/16/introducing-react-dev.md
+++ b/src/content/blog/2023/03/16/introducing-react-dev.md
@@ -42,7 +42,7 @@ When we released React Hooks in 2018, the Hooks docs assumed the reader is famil
**The new docs teach React with Hooks from the beginning.** The docs are divided in two main sections:
* **[Learn React](/learn)** is a self-paced course that teaches React from scratch.
-* **[API Reference](/reference)** provides the details and usage examples for every React API.
+* **[API Reference](/reference/react)** provides the details and usage examples for every React API.
Let's have a closer look at what you can find in each section.
@@ -462,7 +462,7 @@ In the [API Reference](/reference/react), every React API now has a dedicated pa
- Built-in Hooks like [`useState`](/reference/react/useState).
- Built-in components like [``](/reference/react/Suspense).
- Built-in browser components like [``](/reference/react-dom/components/input).
-- Framework-oriented APIs like [`renderToPipeableStream`](/reference/react-dom/server/renderToReadableStream).
+- Framework-oriented APIs like [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream).
- Other React APIs like [`memo`](/reference/react/memo).
You'll notice that every API page is split into at least two segments: *Reference* and *Usage*.
@@ -607,7 +607,7 @@ button { display: block; margin-top: 10px; }
-Some API pages also include [Troubleshooting](/reference/react/useEffect#troubleshooting) (for common problems) and [Alternatives](/reference/react-dom/findDOMNode#alternatives) (for deprecated APIs).
+Some API pages also include [Troubleshooting](/reference/react/useEffect#troubleshooting) (for common problems) and [Alternatives](https://18.react.dev/reference/react-dom/findDOMNode#alternatives) (for deprecated APIs).
We hope that this approach will make the API reference useful not only as a way to look up an argument, but as a way to see all the different things you can do with any given API—and how it connects to the other ones.
diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
index 6f918a2a9..99d8a1874 100644
--- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md
+++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
@@ -639,7 +639,7 @@ const ref = useRef(null);
ref.current = 1;
```
-`MutableRef` is now deprecated in favor of a single `RefObject` type which `useRef` will always return:
+`MutableRefObject` is now deprecated in favor of a single `RefObject` type which `useRef` will always return:
```ts
interface RefObject {
diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md
index 93ac0c360..1b382b1c7 100644
--- a/src/content/blog/2024/12/05/react-19.md
+++ b/src/content/blog/2024/12/05/react-19.md
@@ -389,7 +389,7 @@ For more info, see the docs for [Directives](/reference/rsc/directives).
Server Actions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.
-For more, see the docs for [React Server Actions](/reference/rsc/server-actions).
+For more, see the docs for [React Server Actions](/reference/rsc/server-functions).
## Improvements in React 19 {/*improvements-in-react-19*/}
diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
index 95821fc43..8bc53d6c8 100644
--- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
+++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
@@ -14266,7 +14266,7 @@ Unfortunately, some hooks are still hard to think in terms of function instead o
We found that often, the confusion is from using an Effect when you don't need to. The [You Might Not Need an Effect](/learn/you-might-not-need-an-effect) guide covers many cases for when Effects are not the right solution. However, even when an Effect is the right fit for a problem, Effects can still be harder to understand than class component lifecycles.
-We believe one of the reasons for confusion is that developers to think of Effects from the _component's_ perspective (like a lifecycle), instead of the _Effects_ point of view (what the Effect does).
+We believe one of the reasons for confusion is that developers tend to think of Effects from the _component's_ perspective (like a lifecycle), instead of the _Effects_ point of view (what the Effect does).
Let's look at an example [from the docs](/learn/lifecycle-of-reactive-effects#thinking-from-the-effects-perspective):
diff --git a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md
index 206d49e39..1dd4e2b65 100644
--- a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md
+++ b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md
@@ -76,7 +76,7 @@ Additional disclosures can be frustrating, but they are generally a sign of a he
### Affected frameworks and bundlers {/*affected-frameworks-and-bundlers*/}
-Some React frameworks and bundlers depended on, had peer dependencies for, or included the vulnerable React packages. The following React frameworks & bundlers are affected: [next](https://www.npmjs.com/package/next), [react-router](https://www.npmjs.com/package/react-router), [waku](https://www.npmjs.com/package/waku), [@parcel/rsc](https://www.npmjs.com/package/@parcel/rsc), [@vite/rsc-plugin](https://www.npmjs.com/package/@vitejs/plugin-rsc), and [rwsdk](https://www.npmjs.com/package/rwsdk).
+Some React frameworks and bundlers depended on, had peer dependencies for, or included the vulnerable React packages. The following React frameworks & bundlers are affected: [next](https://www.npmjs.com/package/next), [react-router](https://www.npmjs.com/package/react-router), [waku](https://www.npmjs.com/package/waku), [@parcel/rsc](https://www.npmjs.com/package/@parcel/rsc), [@vitejs/plugin-rsc](https://www.npmjs.com/package/@vitejs/plugin-rsc), and [rwsdk](https://www.npmjs.com/package/rwsdk).
Please see [the instructions in the previous post](/blog/2025/12/03/critical-security-vulnerability-in-react-server-components#update-instructions) for upgrade steps.
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 37d3726e7..3286222c3 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -10,26 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
## Upcoming Conferences {/*upcoming-conferences*/}
-### ZurichJS Conf 2026 {/*zurichjs-conf-2026*/}
-September 10-11, 2026. In-person in Zurich, Switzerland
-
-[Website](https://conf.zurichjs.com?utm_campaign=ZurichJS_Conf&utm_source=referral&utm_content=reactjs_community_conferences) - [Twitter](https://x.com/zurichjs) - [LinkedIn](https://www.linkedin.com/company/zurichjs/)
-
-### React Alicante 2026 {/*react-alicante-2026*/}
-Sep 24 - 26, 2026. In-person in Alicante
-
-[Website](https://reactalicante.es//) - [Twitter](https://x.com/ReactAlicante)
-
-### CityJS Athens 2026 {/*cityjs-athens-2026*/}
-October 21-23, 2026. In-person in Athens
-
-[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
-
-### React Advanced London 2026 {/*react-advanced-london-2026*/}
-October 23 & 26, 2026. In-person in London, UK + online (hybrid event)
-
-[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) - [LinkedIn](https://www.linkedin.com/showcase/react-advanced-london/)
-
### React Summit US 2026 {/*react-summit-us-2026*/}
November 17 & 20, 2026. In-person in New York, USA + online (hybrid event)
@@ -45,6 +25,11 @@ April 15 & 19, 2027. In-person in Singapore + online (hybrid event)
[Website](https://reactsummit.asia/) - [Twitter](https://x.com/reactsummit) - [LinkedIn](https://www.linkedin.com/showcase/reactsummit)
+### React Conf Japan 2027 {/*react-conf-japan-2027*/}
+April 24, 2027. In-person in Tokyo, Japan
+
+[Website](https://reactconf.jp/) - [Twitter](https://x.com/reactconfjp)
+
### React Summit 2027 {/*react-summit-2027*/}
May 21 & 25, 2027. In-person in Amsterdam, Netherlands + online (hybrid event)
@@ -53,16 +38,60 @@ May 21 & 25, 2027. In-person in Amsterdam, Netherlands + online (hybrid event)
## Past Conferences {/*past-conferences*/}
+### React India 2026 {/*react-india-2026*/}
+October 29-31, 2026. In-person in Goa, India
-### React Conf Japan 2027 {/*react-conf-japan-2027*/}
-April 24, 2027. In-person in Tokyo, Japan
+[Website](https://www.reactindia.io/) - [Twitter](https://x.com/react_india)
-[Website](https://reactconf.jp/) - [Twitter](https://x.com/reactconfjp)
+### React Advanced London 2026 {/*react-advanced-london-2026*/}
+October 23 & 26, 2026. In-person in London, UK + online (hybrid event)
+
+[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) - [LinkedIn](https://www.linkedin.com/showcase/react-advanced-london/)
+
+### CityJS Athens 2026 {/*cityjs-athens-2026*/}
+October 21-23, 2026. In-person in Athens
+
+[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
+### React Alicante 2026 {/*react-alicante-2026*/}
+Sep 24 - 26, 2026. In-person in Alicante
+
+[Website](https://reactalicante.es//) - [Twitter](https://x.com/ReactAlicante)
+
+### React Native Connection 2026 {/*react-native-connection-2026*/}
+September 24, 2026. In-person in Paris, France
+
+[Website](https://reactnativeconnection.io/) - [Twitter](https://x.com/ReactNativeConn) - [Bluesky](https://bsky.app/profile/reactnativeconnect.bsky.social)
+
+### ZurichJS Conf 2026 {/*zurichjs-conf-2026*/}
+September 10-11, 2026. In-person in Zurich, Switzerland
+
+[Website](https://conf.zurichjs.com?utm_campaign=ZurichJS_Conf&utm_source=referral&utm_content=reactjs_community_conferences) - [Twitter](https://x.com/zurichjs) - [LinkedIn](https://www.linkedin.com/company/zurichjs/)
+
+### Render(ATL) 2026 🍑 {/*renderatl-2026-*/}
+August 12-13, 2026. In-person in Atlanta, GA, USA
+
+[Website](https://renderatl.com/) - [Twitter](https://x.com/renderATL) - [LinkedIn](https://www.linkedin.com/company/renderatl)
+
+### React Summit 2026 {/*react-summit-2026*/}
+June 12 & 16, 2026. In-person in Amsterdam, Netherlands + online (hybrid event)
+
+[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit) - [LinkedIn](https://www.linkedin.com/showcase/reactsummit)
+
+### React Norway 2026 {/*react-norway-2026*/}
+June 5, 2026. In-person in Oslo, Norway
+
+[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway)
+
+### React Miami 2026 {/*react-miami-2026*/}
+April 23-24, 2026. In-person in Miami, FL, USA
+
+[Website](https://reactmiami.com/) - [Twitter](https://x.com/ReactMiamiConf)
### CityJS London 2026 {/*cityjs-london-2026*/}
April 14-17, 2026. In-person in London
-[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
### React Paris 2026 {/*react-paris-2026*/}
@@ -79,7 +108,7 @@ February 12-13, 2026. In-person in New Delhi, India
### CityJS Singapore 2026 {/*cityjs-singapore-2026*/}
February 4-6, 2026. In-person in Singapore
-[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+[Website](https://singapore.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
### React Advanced London 2025 {/*react-advanced-london-2025*/}
November 28 & December 1, 2025. In-person in London, UK + online (hybrid event)
diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index ff39fbd56..2816d0294 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -530,7 +530,7 @@ React কম্পোনেন্ট এবং মডিউলের ভেত
একটা React রেন্ডার ট্রি হল কম্পোনেন্টের মাঝে থাকা প্যারেন্ট-চাইল্ড সম্পর্কের একটা প্রতিফলন।
-
+
React রেন্ডার ট্রিয়ের একটি উদাহরণ।
diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md
index 0ea49d695..fd3435243 100644
--- a/src/content/learn/extracting-state-logic-into-a-reducer.md
+++ b/src/content/learn/extracting-state-logic-into-a-reducer.md
@@ -874,7 +874,11 @@ Reducer এর যে একদম কোনো খারাপ দিক নে
- **টেস্ট করা (Testing):** Reducer হলো একটি pure function যা আপনার কম্পোনেন্টের উপর নির্ভর করে না। এর মানে আপনি একে আলাদা ভাবে export করে test করতে পারবেন। যদিও স্বাভাবিকভাবে কম্পোনেন্টস কে আরো realistic environment এ টেস্ট করা উত্তম, তবে জটিল state update logic এর ক্ষেত্রে "নির্দিষ্ট initial state এবং action এর জন্য আপনার reducer নির্দিষ্ট state রিটার্ন করে" এ ব্যাপারে নিশ্চিত থাকা উপকারে আসতে পারে।
- **ব্যাক্তিগত পছন্দ (Personal preference):** কেউ reducer পছন্দ করে, কেউ করেনা। এটা কোনো সমস্যা না। এটা একটা রুচির বিষয়। আপনি সর্বদাই `useState` এবং `useReducer` এর মাঝে অদল বদল করতে পারবেনঃ তারা উভয়ই সমান!
+<<<<<<< HEAD
যদি আপনি কোনো কম্পোনেন্টে ভুলভাল স্টেট আপডেটের কারণে bug এর সম্মুখীন হন এবং এর কোডের কাঠামো আরো সুন্দর করতে চান, সেক্ষেত্রে আমরা একটি reducer ব্যাবহার করা রেকমেন্ড করি। আপনার সব কিছুর জন্য reducer ব্যাবহার করতে হবে এমন কোনো কথা নেইঃ আপনি বিনা বাধায় মিলিয়ে মিশিয়ে ব্যাবহার করতে পারেন! এমনকি আপনি একই কম্পোনেন্টে `useState` এবং `useReducer` ব্যাবহার করতে পারেন।
+=======
+We recommend using a reducer if you often encounter bugs due to incorrect state updates in some component, and want to introduce more structure to its code. You don't have to use reducers for everything: feel free to mix and match! You can even use `useState` and `useReducer` in the same component.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
## যেভাবে ভালো reducer লেখবেন {/*writing-reducers-well*/}
diff --git a/src/content/learn/index.md b/src/content/learn/index.md
index 90aae8859..2df2a885b 100644
--- a/src/content/learn/index.md
+++ b/src/content/learn/index.md
@@ -338,7 +338,11 @@ function MyButton() {
}
```
+<<<<<<< HEAD
React আপনার কম্পোনেন্ট ফাংশনকে আবার কল করবে। এবার, `count` হবে `1`। পরবর্তীতে এটা হবে `2` এবং এভাবে বাড়তে থাকবে।
+=======
+Calling `setCount` tells React to call your component function again. This is called a *re-render*. This time, `count` will be `1`. Then it will be `2`. And so on.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
আপনি যদি একই component একাধিকবার render করেন তবে প্রতিটি তার নিজস্ব state পাবে। প্রতিটি button এ আলাদাভাবে ক্লিক করুন:
diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md
index 608db09a0..ec3719736 100644
--- a/src/content/learn/lifecycle-of-reactive-effects.md
+++ b/src/content/learn/lifecycle-of-reactive-effects.md
@@ -1375,7 +1375,7 @@ export default function App() {
```
```js {expectedErrors: {'react-compiler': [8]}} src/ChatRoom.js active
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
export default function ChatRoom({ roomId, createConnection }) {
useEffect(() => {
@@ -1473,7 +1473,7 @@ export default function App() {
```
```js src/ChatRoom.js active
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
export default function ChatRoom({ roomId, createConnection }) {
useEffect(() => {
@@ -1561,7 +1561,7 @@ export default function App() {
```
```js src/ChatRoom.js active
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
import {
createEncryptedConnection,
createUnencryptedConnection,
diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index 685f63ef4..47042cbc4 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -18,7 +18,7 @@ State is isolated between components. React keeps track of which state belongs t
## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/}
-React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
+React builds [render trees](/learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the render tree.
diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md
index ff5d6eae4..2b6b26d38 100644
--- a/src/content/learn/react-compiler/introduction.md
+++ b/src/content/learn/react-compiler/introduction.md
@@ -144,7 +144,7 @@ However, if `expensivelyProcessAReallyLargeArrayOfObjects` is truly an expensive
- React Compiler only memoizes React components and hooks, not every function
- React Compiler's memoization is not shared across multiple components or hooks
-So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated.
+So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated.
## Should I try out the compiler? {/*should-i-try-out-the-compiler*/}
diff --git a/src/content/learn/setup.md b/src/content/learn/setup.md
index 2c46ee148..b93155cc1 100644
--- a/src/content/learn/setup.md
+++ b/src/content/learn/setup.md
@@ -17,7 +17,7 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. [Le
## React Developer Tools {/*react-developer-tools*/}
-React Developer Tools is a browser extension that can inspect React components, edit props and state, and identify performance problems. Learn how to install it [here](learn/react-developer-tools).
+React Developer Tools is a browser extension that can inspect React components, edit props and state, and identify performance problems. Learn how to install it [here](/learn/react-developer-tools).
## React Compiler {/*react-compiler*/}
diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md
index 0f7a03344..7ad13f28c 100644
--- a/src/content/learn/synchronizing-with-effects.md
+++ b/src/content/learn/synchronizing-with-effects.md
@@ -730,7 +730,12 @@ Effect এ `fetch` কল লেখা [ডেটা ফেচিংয়ের
- **মূলত Effect এ সরাসরি ডেটা ফেচ করার মানে এই যে, আপনি ডেটা প্রিলোড বা ক্যাশ করতে পারবেন না।** উদাহরণস্বরূপ, যদি কম্পোনেন্টটি আনমাউন্ট হয় এবং পুনরায় মাউন্ট হয়, এটিকে পুনরায় ডাটা ফেচ করতে হবে।
- **এটা খুব একটা ergonomic নয়।** ফেচ কল লেখার সময়, যাতে [রেস কন্ডিশন](https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect) এর মতো বাগে suffer করতে না হয়, তার জন্য বেশ ভালো পরিমাণের বয়লারপ্লেট কোড লেখা লাগে।
+<<<<<<< HEAD
ডাউনসাইডের এই তালিকাটি React জন্য নির্দিষ্ট নয়। এটি যে কোনো লাইব্রেরির মাধ্যমে মাউন্টের সময় ডেটা ফেচের ক্ষেত্রে প্রযোজ্য। রাউটিংয়ের মতো, ডেটা ফেচিং ভালোভাবে করা সহজ নয়, তাই আমরা নিম্নলিখিত পদ্ধতির পরামর্শ দিই:
+=======
+- **If you use a [framework](/learn/creating-a-react-app#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 [TanStack Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router](https://reactrouter.com/). 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).
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
- **আপনি যদি একটি [framework](/learn/creating-a-react-app#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 করে)।
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 56e0cbbf1..de84db45e 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -1138,7 +1138,7 @@ JavaScript supports [closures](https://developer.mozilla.org/en-US/docs/Web/Java
-Now you can add X's to the board... but only to the upper left square. Your `handleClick` function is hardcoded to update the index for the upper left square (`0`). Let's update `handleClick` to be able to update any square. Add an argument `i` to the `handleClick` function that takes the index of the square to update:
+Now you can add X's to the board... but only to the upper left square. Your `handleClick` function is hardcoded to update the index for the upper left square (`0`). Let's update `handleClick` to be able to update any square. Add a parameter `i` to the `handleClick` function that takes the index of the square to update:
```js {4,6}
export default function Board() {
diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index 2e6f7edc5..739efe366 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -335,7 +335,7 @@ function MyComponent() {
-The [`useMemo`](/reference/react/useMemo) Hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the Hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the Hook.
+The [`useMemo`](/reference/react/useMemo) Hooks will create/re-access a memoized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the Hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the Hook.
```ts
// The type of visibleTodos is inferred from the return value of filterTodos
diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md
index afc38cd33..497eb48de 100644
--- a/src/content/learn/understanding-your-ui-as-a-tree.md
+++ b/src/content/learn/understanding-your-ui-as-a-tree.md
@@ -135,7 +135,7 @@ The root node in a React render tree is the [root component](/learn/importing-an
#### Where are the HTML tags in the render tree? {/*where-are-the-html-elements-in-the-render-tree*/}
-You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](learn/your-first-component#components-ui-building-blocks).
+You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](/learn/your-first-component#components-ui-building-blocks).
React, as a UI framework, is platform agnostic. On react.dev, we showcase examples that render to the web, which uses HTML markup as its UI primitives. But a React app could just as likely render to a mobile or desktop platform, which may use different UI primitives like [UIView](https://developer.apple.com/documentation/uikit/uiview) or [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0).
diff --git a/src/content/reference/dev-tools/react-performance-tracks.md b/src/content/reference/dev-tools/react-performance-tracks.md
index d4757b9ec..1c10823d3 100644
--- a/src/content/reference/dev-tools/react-performance-tracks.md
+++ b/src/content/reference/dev-tools/react-performance-tracks.md
@@ -140,7 +140,7 @@ In development builds, when you click on a component render entry, you can inspe
The Server Requests track visualized all Promises that eventually end up in a React Server Component. This includes any `async` operations like calling `fetch` or async Node.js file operations.
-React will try to combine Promises that are started from inside third-party code into a single span representing the the duration of the entire operation blocking 1st party code.
+React will try to combine Promises that are started from inside third-party code into a single span representing the duration of the entire operation blocking 1st party code.
For example, a third party library method called `getUser` that calls `fetch` internally multiple times will be represented as a single span called `getUser`, instead of showing multiple `fetch` spans.
Clicking on spans will show you a stack trace of where the Promise was created as well as a view of the value that the Promise resolved to, if available.
@@ -155,5 +155,5 @@ If you await a Promise, React will display duration of that Promise. To see all
Different colors are used to indicate the duration of the component render. The darker the color, the longer the duration.
-The Server Components track group will always contain a "Primary" track. If React is able to render Server Components concurrently, it will display addititional "Parallel" tracks.
+The Server Components track group will always contain a "Primary" track. If React is able to render Server Components concurrently, it will display additional "Parallel" tracks.
If more than 8 Server Components are rendered concurrently, React will associate them with the last "Parallel" track instead of adding more tracks.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
index 7517d5f92..87262949d 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
@@ -107,4 +107,4 @@ function Counter({max}) {
Now the setter only runs in response to the click, React finishes the render normally, and `count` never crosses `max`.
-In rare cases, you may need to adjust state based on information from previous renders. For those, follow [this pattern](https://react.dev/reference/react/useState#storing-information-from-previous-renders) of setting state conditionally.
+In rare cases, you may need to adjust state based on information from previous renders. For those, follow [this pattern](/reference/react/useState#storing-information-from-previous-renders) of setting state conditionally.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md
index a5a77e5f6..56810c359 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md
@@ -79,7 +79,7 @@ function Component({user}) {
}
```
-If the side effect sychronizes React state with some external state (or vice versa), use `useEffect`:
+If the side effect synchronizes React state with some external state (or vice versa), use `useEffect`:
```js
// ✅ Good: Synchronization in useEffect
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index 282922a62..f0d5b1c89 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -90,7 +90,11 @@ React `root`-এ `` দেখাবে, এবং এর মধ্যক
* আপনি যদি একি রুটে একাধিকবার `render` কল করেন, তাহলে আপনার পাঠানো সর্বশেষ JSX দেখানোর খাতিরে React প্রয়োজনমত DOM আপডেট করে ফেলবে। React আগেরবার রেন্ডার হওয়া ট্রি এর সাথে ["মিলিয়ে দেখবে"](/learn/preserving-and-resetting-state) এবং সিদ্ধান্ত নিবে DOM এর কোণ অংশগুলো পুনর্ব্যবহার করা যায় আর কোনগুলো আবার বানাতে হবে। একই রুটে আবার `render` কল করা রুট কম্পোনেন্টে [`set` function](/reference/react/useState#setstate) কল করার মতঃ React অপ্রয়োজনীয় DOM আপডেট এড়ানোর চেষ্টা করে।
+<<<<<<< HEAD
* যদিও rendering শুরু হওয়ার পর synchronous, `root.render(...)` synchronous নয়। এর মানে হল `root.render()` এর পরের কোড ওই নির্দিষ্ট render এর কোন effects (`useLayoutEffect`, `useEffect`) fire হওয়ার আগেই রান হতে পারে। এটা সাধারণত ঠিক আছে এবং খুব কমই adjustment প্রয়োজন হয়। বিরল ক্ষেত্রে যেখানে effect timing গুরুত্বপূর্ণ, আপনি `root.render(...)` কে [`flushSync`](/reference/react-dom/flushSync) দিয়ে wrap করতে পারেন যাতে initial render সম্পূর্ণভাবে synchronously রান হয়।
+=======
+* Although rendering is synchronous once it starts, `root.render(...)` is not. This means code after `root.render()` may run before any effects (`useLayoutEffect`, `useEffect`) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap `root.render(...)` in [`flushSync`](/reference/react-dom/flushSync) to ensure the initial render runs fully synchronously.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
```js
const root = createRoot(document.getElementById('root'));
@@ -379,7 +383,11 @@ const root = createRoot(container, {
1. যে error throw হয়েছে।
2. একটি errorInfo অবজেক্ট যাতে error এর componentStack রয়েছে।
+<<<<<<< HEAD
`onUncaughtError` এবং `onRecoverableError` এর সাথে একত্রে, আপনি আপনার নিজস্ব error reporting system implement করতে পারেনঃ
+=======
+Together with `onUncaughtError` and `onRecoverableError`, you can implement your own error reporting system:
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
@@ -417,9 +425,15 @@ import {
const container = document.getElementById("root");
const root = createRoot(container, {
+<<<<<<< HEAD
// মনে রাখবেন development এ এই options গুলো সরিয়ে দিন যাতে
// React এর default handlers ব্যবহার করতে পারেন বা development এর জন্য আপনার নিজস্ব overlay implement করতে পারেন।
// handlers গুলো এখানে শুধুমাত্র demonstration উদ্দেশ্যে unconditionally specify করা হয়েছে।
+=======
+ // Keep in mind to remove these options in development to leverage
+ // React's default handlers or implement your own overlay for development.
+ // The handlers are only specified unconditionally here for demonstration purposes.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
onCaughtError: onCaughtErrorProd,
onRecoverableError: onRecoverableErrorProd,
onUncaughtError: onUncaughtErrorProd,
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
index 3bb2ae865..6d95ce889 100644
--- a/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -124,7 +124,11 @@ root.unmount();
### সার্ভার-রেন্ডার্ড HTML এর hydrating {/*hydrating-server-rendered-html*/}
+<<<<<<< HEAD
আপনার অ্যাপের HTML যদি [`react-dom/server`](/reference/react-dom/client/createRoot) দিয়ে বানানো হয়ে থাকে, আপনাকে একে ক্লায়েন্টে *hydrate* করতে হবে।
+=======
+If your app's HTML was generated by [`react-dom/server`](/reference/react-dom/server), you need to *hydrate* it on the client.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
```js [[1, 3, "document.getElementById('root')"], [2, 3, ""]]
import { hydrateRoot } from 'react-dom/client';
@@ -447,9 +451,15 @@ import {
const container = document.getElementById("root");
hydrateRoot(container, , {
+<<<<<<< HEAD
// মনে রাখবেন development এ React এর default handler ব্যবহার করতে বা
// development এর জন্য নিজস্ব overlay বাস্তবায়ন করতে এই option গুলো সরান।
// handler গুলো শুধুমাত্র প্রদর্শনের উদ্দেশ্যে নিঃশর্তভাবে নির্দিষ্ট করা হয়েছে।
+=======
+ // Keep in mind to remove these options in development to leverage
+ // React's default handlers or implement your own overlay for development.
+ // The handlers are only specified unconditionally here for demonstration purposes.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
onCaughtError: onCaughtErrorProd,
onRecoverableError: onRecoverableErrorProd,
onUncaughtError: onUncaughtErrorProd,
diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index f81788da0..a70035947 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -257,9 +257,9 @@ Instead of a ref object (like the one returned by [`useRef`](/reference/react/us
[See an example of using the `ref` callback.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
-When the `
` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `
` DOM node is removed, React will call your the cleanup function returned from the callback.
+When the `
` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `
` DOM node is removed, React will call the cleanup function returned from the callback.
-React will also call your `ref` callback whenever you pass a *different* `ref` callback. In the above example, `(node) => { ... }` is a different function on every render. When your component re-renders, the *previous* function will be called with `null` as the argument, and the *next* function will be called with the DOM node.
+React will also call your `ref` callback whenever you pass a *different* `ref` callback. In the above example, `(node) => { ... }` is a different function on every render. When your component re-renders, the cleanup function returned by the *previous* function will be called, and the *next* function will be called with the DOM node. If no cleanup function is returned, the *previous* function will be called with `null` as the argument instead.
#### Parameters {/*ref-callback-parameters*/}
diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index 10e9c6794..459c27e0b 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -38,21 +38,27 @@ To create interactive controls for submitting information, render the [built-in
`