Merge pull request #625 from reactjs/sync-5138e605

bilalkarakollu · web-flow · commit 241973ad1c0c · 2025-04-10T07:44:40.000+03:00
Sync with react.dev @ 5138e60
diff --git a/postcss.config.js b/postcss.config.js
@@ -17,4 +17,4 @@ module.exports = {
       },
     },
   },
-}
+};
diff --git a/public/js/jsfiddle-integration-babel.js b/public/js/jsfiddle-integration-babel.js
@@ -4,12 +4,14 @@
 
 // Do not delete or move this file.
 // Many fiddles reference it so we have to keep it here.
-(function() {
+(function () {
   var tag = document.querySelector(
     'script[type="application/javascript;version=1.7"]'
   );
   if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
-    alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
+    alert(
+      'Bad JSFiddle configuration, please fork the original React JSFiddle'
+    );
   }
   tag.setAttribute('type', 'text/babel');
   tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');
diff --git a/public/js/jsfiddle-integration.js b/public/js/jsfiddle-integration.js
@@ -4,12 +4,14 @@
 
 // Do not delete or move this file.
 // Many fiddles reference it so we have to keep it here.
-(function() {
+(function () {
   var tag = document.querySelector(
     'script[type="application/javascript;version=1.7"]'
   );
   if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
-    alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
+    alert(
+      'Bad JSFiddle configuration, please fork the original React JSFiddle'
+    );
   }
   tag.setAttribute('type', 'text/jsx;harmony=true');
   tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');
diff --git a/scripts/headingIDHelpers/walk.js b/scripts/headingIDHelpers/walk.js
@@ -2,10 +2,10 @@ const fs = require('fs');
 
 module.exports = function walk(dir) {
   let results = [];
-  /** 
+  /**
    * If the param is a directory we can return the file
    */
-  if(dir.includes('md')){
+  if (dir.includes('md')) {
     return [dir];
   }
   const list = fs.readdirSync(dir);
diff --git a/scripts/headingIdLinter.js b/scripts/headingIdLinter.js
@@ -1,12 +1,12 @@
 const validateHeaderIds = require('./headingIDHelpers/validateHeadingIDs');
 const generateHeadingIds = require('./headingIDHelpers/generateHeadingIDs');
 
-/** 
+/**
  * yarn lint-heading-ids --> Checks all files and causes an error if heading ID is missing
  * yarn lint-heading-ids --fix --> Fixes all markdown file's heading IDs
  * yarn lint-heading-ids path/to/markdown.md --> Checks that particular file for missing heading ID (path can denote a directory or particular file)
  * yarn lint-heading-ids --fix path/to/markdown.md --> Fixes that particular file's markdown IDs (path can denote a directory or particular file)
-*/
+ */
 
 const markdownPaths = process.argv.slice(2);
 if (markdownPaths.includes('--fix')) {
diff --git a/src/components/MDX/ErrorDecoder.tsx b/src/components/MDX/ErrorDecoder.tsx
@@ -69,7 +69,7 @@ function parseQueryString(search: string): Array<string | undefined> {
 }
 
 export default function ErrorDecoder() {
-  const {errorMessage} = useErrorDecoderParams();
+  const {errorMessage, errorCode} = useErrorDecoderParams();
   /** error messages that contain %s require reading location.search */
   const hasParams = errorMessage?.includes('%s');
   const [message, setMessage] = useState<React.ReactNode | null>(() =>
@@ -82,23 +82,28 @@ export default function ErrorDecoder() {
     if (errorMessage == null || !hasParams) {
       return;
     }
+    const args = parseQueryString(window.location.search);
+    let message = errorMessage;
+    if (errorCode === '418') {
+      // Hydration errors have a %s for the diff, but we don't add that to the args for security reasons.
+      message = message.replace(/%s$/, '');
 
-    setMessage(
-      urlify(
-        replaceArgs(
-          errorMessage,
-          parseQueryString(window.location.search),
-          '[missing argument]'
-        )
-      )
-    );
+      // Before React 19.1, the error message didn't have an arg, and was always HTML.
+      if (args.length === 0) {
+        args.push('HTML');
+      } else if (args.length === 1 && args[0] === '') {
+        args[0] = 'HTML';
+      }
+    }
+
+    setMessage(urlify(replaceArgs(message, args, '[missing argument]')));
     setIsReady(true);
-  }, [hasParams, errorMessage]);
+  }, [errorCode, hasParams, errorMessage]);
 
   return (
     <code
       className={cn(
-        'block bg-red-100 text-red-600 py-4 px-6 mt-5 rounded-lg',
+        'whitespace-pre-line block bg-red-100 text-red-600 py-4 px-6 mt-5 rounded-lg',
         isReady ? 'opacity-100' : 'opacity-0'
       )}>
       <b>{message}</b>
diff --git a/src/components/MDX/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts
@@ -28,8 +28,8 @@ root.render(
           eject: 'react-scripts eject',
         },
         dependencies: {
-          react: '19.0.0-rc-3edc000d-20240926',
-          'react-dom': '19.0.0-rc-3edc000d-20240926',
+          react: '^19.1.0',
+          'react-dom': '^19.1.0',
           'react-scripts': '^5.0.0',
         },
       },
diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
@@ -81,7 +81,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Thessaloniki](https://www.meetup.com/Thessaloniki-ReactJS-Meetup/)
 
 ## India {/*india*/}
-* [Ahmedabad](https://www.meetup.com/react-ahmedabad/)
+* [Ahmedabad](https://reactahmedabad.dev/)
 * [Bangalore (React)](https://www.meetup.com/ReactJS-Bangalore/)
 * [Bangalore (React Native)](https://www.meetup.com/React-Native-Bangalore-Meetup)
 * [Chennai](https://www.linkedin.com/company/chennaireact)
@@ -169,6 +169,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Cleveland, OH - ReactJS](https://www.meetup.com/Cleveland-React/)
 * [Columbus, OH - ReactJS](https://www.meetup.com/ReactJS-Columbus-meetup/)
 * [Dallas, TX - ReactJS](https://www.meetup.com/ReactDallas/)
+* [Denver, CO - React Denver](https://reactdenver.com/)
 * [Detroit, MI - Detroit React User Group](https://www.meetup.com/Detroit-React-User-Group/)
 * [Indianapolis, IN - React.Indy](https://www.meetup.com/React-Indy)
 * [Irvine, CA - ReactJS](https://www.meetup.com/ReactJS-OC/)
diff --git a/src/content/learn/build-a-react-app-from-scratch.md b/src/content/learn/build-a-react-app-from-scratch.md
@@ -65,7 +65,7 @@ Rsbuild includes built-in support for React features like fast refresh, JSX, Typ
 
 #### Metro for React Native {/*react-native*/}
 
-If you'd you're starting from scratch with React Native you'll need to use [Metro](https://metrobundler.dev/), the JavaScript bundler for React Native. Metro supports bundling for platforms like iOS and Android, but lacks many features when compared to the tools here. We recommend starting with Vite, Parcel, or Rsbuild unless your project requires React Native support.
+If you're starting from scratch with React Native you'll need to use [Metro](https://metrobundler.dev/), the JavaScript bundler for React Native. Metro supports bundling for platforms like iOS and Android, but lacks many features when compared to the tools here. We recommend starting with Vite, Parcel, or Rsbuild unless your project requires React Native support.
 
 </Note>
 
@@ -83,7 +83,7 @@ Routers are a core part of modern applications, and are usually integrated with
 
 We suggest using:
 
-- [React Router](https://reactrouter.com/start/framework/custom)
+- [React Router](https://reactrouter.com/start/data/custom)
 - [Tanstack Router](https://tanstack.com/router/latest)
 
 
diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md
@@ -1335,7 +1335,7 @@ export function useOnlineStatus() {
 
 Yukarıdaki örnekte, `useOnlineStatus`, [`useState`](/reference/react/useState) ve [`useEffect`.](/reference/react/useEffect) ikilisi kullanılarak oluşturulmuştur. Ancak, bu en iyi muhtemel çözüm değildir. Dikkate alınmayan birçok uç senaryo vardır. Örneğin, bileşen DOM'a eklendiğinde, `isOnline`'ın halihazırda `true` olacağını varsayar, ancak ağ halihazırda çevrimdışı olduğunda bu yanlış olabilir. Bu durumu kontrol etmek için tarayıcının [`navigator.onLine`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine) API'sini kullanabilirsiniz, ancak bunu doğrudan kullanmak ilk HTML'i sunucuda oluşturmak için çalışmayacaktır. Kısacası, bu kod geliştirilebilir.
 
-Şansımıza, React 18 bu sorunların hepsini sizin için çözecek olan [`useSyncExternalStore`](/reference/react/useSyncExternalStore) adında özel bir API içerir. İşte bu yeni API'den faydalanarak yeniden yazılmış `useOnlineStatus` Hook'unuz:
+React, tüm bu sorunları sizin için çözen özel bir API olan [`useSyncExternalStore`](/reference/react/useSyncExternalStore) adlı bir yapı sunar. İşte bu yeni API'den faydalanacak şekilde yeniden yazılmış `useOnlineStatus` Hook'u:
 
 <Sandpack>
 
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
@@ -2247,7 +2247,7 @@ body {
 
 </Sandpack>
 
-`map` fonksiyonuna ilettiğiniz `history` dizisi içinde gezerken, `squares` argümanı `history` dizisinin her bir elemanından geçer ve `move` argümanı her bir dizi indeksinden geçer: `0`, `1`, `2`, …. (Çoğu durumda, gerçek dizi elemanlarına ihtiyacınız olacaktır ancak bir hamle listesi oluşturmak için yalnızca indekslere ihtiyacınız olacaktır.)
+`map` fonksiyonuna verdiğiniz işlevin içinde `history` dizisi üzerinde yineleme yaparken, `squares` argümanı `history` dizisinin her bir elemanını, `move` argümanı ise dizi indislerini sırayla temsil eder: `0`, `1`, `2`, …. (Çoğu durumda dizi elemanlarının kendisine ihtiyaç duyarsınız, ancak hamleler listesini oluşturmak için yalnızca indeksler yeterlidir.)
 
 Tic-tac-toe oyunundaki her bir hamle için bir buton `<button>` içeren `<li>` elementi oluşturacaksınız. Buton, `jumpTo` (daha yazmadınız) adı verilen fonksiyonu `onClick` yöneticisi ile çağıracaktır.
 
diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md
@@ -1273,7 +1273,7 @@ By default, if your application throws an error during rendering, React will rem
 
 To implement an error boundary component, you need to provide [`static getDerivedStateFromError`](#static-getderivedstatefromerror) which lets you update state in response to an error and display an error message to the user. You can also optionally implement [`componentDidCatch`](#componentdidcatch) to add some extra logic, for example, to log the error to an analytics service.
 
-<CanaryBadge /> With [`captureOwnerStack`](/reference/react/captureOwnerStack) you can include the Owner Stack during development.
+With [`captureOwnerStack`](/reference/react/captureOwnerStack) you can include the Owner Stack during development.
 
 ```js {9-12,14-27}
 import * as React from 'react';
@@ -1298,8 +1298,7 @@ class ErrorBoundary extends React.Component {
       //   in div (created by App)
       //   in App
       info.componentStack,
-      // Only available in react@canary.
-      // Warning: Owner Stack is not available in production.
+      // Warning: `captureOwnerStack` is not available in production.
       React.captureOwnerStack(),
     );
   }
diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md
@@ -86,10 +86,11 @@ Strict Mod kontrolleri **yalnızca geliştirme aşamasında çalıştırılsa da
 
 Strict Modu geliştirme sırasında aşağıdaki kontrolleri etkinleştirir:
 
-- Bileşenleriniz, saf olmayan render'dan kaynaklanan hataları bulmak için [bir ekstra kez yeniden render edilir](#fixing-bugs-found-by-double-rendering-in-development).
-- Bileşenleriniz, eksik Effect temizliklerinden kaynaklanan hataları bulmak için [bir ekstra kez Effect'leri yeniden çalıştırır](#fixing-bugs-found-by-re-running-effects-in-development).
-- Bileşenleriniz, eksik ref temizliklerinden kaynaklanan hataları bulmak için [bir ekstra kez ref geri çağırmalarını yeniden çalıştırır](#fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development).
-- Bileşenleriniz, [deprecate edilmiş API'lerin kullanımına karşı kontrol edilir](#fixing-deprecation-warnings-enabled-by-strict-mode).
+- Bileşenleriniz, saf olmayan render işlemlerinden kaynaklanan hataları bulmak için [bir kez fazladan yeniden render edilir](#fixing-bugs-found-by-double-rendering-in-development).
+- Bileşenleriniz, eksik Efekt temizliğinden kaynaklanan hataları bulmak için [Efektleri bir kez fazladan çalıştırır](#fixing-bugs-found-by-re-running-effects-in-development).
+- Bileşenleriniz, eksik ref temizliğinden kaynaklanan hataları bulmak için [ref callback'lerini bir kez fazladan çalıştırır](#fixing-bugs-found-by-re-running-ref-callbacks-in-development).
+- Bileşenlerinizin [kullanımdan kaldırılmış API’leri kullanıp kullanmadığı kontrol edilir.](#fixing-deprecation-warnings-enabled-by-strict-mode)
+
 
 **Tüm bu kontroller yalnızca geliştirme sırasında çalıştırılar ve canlıda herhangi bir etkisi yoktur.**
 
@@ -120,7 +121,14 @@ function App() {
 }
 ```
 
-Örnekte gösterildiği üzere, Strict Modu `Header` ve `Footer` bileşenlerinde çalışmayacaktır. Ancak `Sidebar` ve `Content` bileşenleri ve bu bileşenler içindeki alt bileşenlerde, ne kadar derin olduğu farketmeksizin, çalışacaktır.
+Bu örnekte, `Strict Mode` kontrolleri `Header` ve `Footer` bileşenleri için çalıştırılmaz. Ancak `Sidebar` ve `Content` ile onların içindeki tüm bileşenlerde, derinlik fark etmeksizin çalıştırılır.
+
+<Note>
+
+Uygulamanın bir bölümü için `StrictMode` etkinleştirildiğinde, React yalnızca üretim ortamında mümkün olan davranışları etkinleştirir. Örneğin, eğer `<StrictMode>` uygulamanın kökünde etkin değilse, ilk yüklemede [Efektleri bir kez daha çalıştırma](#fixing-bugs-found-by-re-running-effects-in-development) davranışı etkin olmaz. Çünkü bu durumda, üretim ortamında gerçekleşmesi mümkün olmayan şekilde, alt efektler ebeveyn efektler olmadan iki kez tetiklenmiş olurdu.
+
+</Note>
+
 ---
 
 ### Geliştirme sırasında çift renderda bulunan hataları düzeltme {/*fixing-bugs-found-by-double-rendering-in-development*/}
diff --git a/src/content/reference/react/captureOwnerStack.md b/src/content/reference/react/captureOwnerStack.md
@@ -2,12 +2,6 @@
 title: captureOwnerStack
 ---
 
-<Canary>
-
-The `captureOwnerStack` API is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
-
-</Canary>
-
 <Intro>
 
 `captureOwnerStack` reads the current Owner Stack in development and returns it as a string if available.
@@ -126,22 +120,6 @@ createRoot(document.createElement('div'), {
 );
 ```
 
-```json package.json hidden
-{
-  "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
-    "react-scripts": "latest"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}
-```
-
 ```html public/index.html hidden
 <!DOCTYPE html>
 <html lang="en">
@@ -357,22 +335,6 @@ const container = document.getElementById("root");
 createRoot(container).render(<App />);
 ```
 
-```json package.json hidden
-{
-  "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
-    "react-scripts": "latest"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}
-```
-
 ```js src/App.js
 function Component() {
   return <button onClick={() => console.error('Some console error')}>Trigger console.error()</button>;
@@ -417,22 +379,6 @@ export default function App() {
 }
 ```
 
-```json package.json hidden
-{
-  "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
-    "react-scripts": "latest"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}
-```
-
 </Sandpack>
 
 ### `captureOwnerStack` is not available {/*captureownerstack-is-not-available*/}
diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md
@@ -414,42 +414,42 @@ Deponuzdaki veri değişken (mutable) ise `getSnapshot` fonksiyonunuz değişmez
 
 Örnekteki `subscribe` fonksiyonu bileşenin *içinde* tanımlanmıştır ve bu nedenle her render'da farklıdır:
 
-```js {4-7}
+```js {2-5}
 function ChatIndicator() {
-  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
-  
-  // 🚩 Her zaman farklı fonksiyondur, React her render'da yeniden abone olur
+  // 🚩 Her zaman farklı bir işlev olduğu için, React her yeniden render’da yeniden abone olur.
   function subscribe() {
     // ...
   }
+  
+  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
 
   // ...
 }
 ```
 Yeniden render'lar arasında farklı bir `subscribe` fonksiyonu iletirseniz, React deponuza yeniden abone olur. Bu durum performans sorunlarına neden oluyorsa ve sürekli abone olmaktan kaçınmak istiyorsanız, `subscribe` fonksiyonunu bileşen dışına taşıyın:
 
-```js {6-9}
-function ChatIndicator() {
-  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
+```js {1-4}
+// ✅ Her zaman aynı işlev olduğu için, React yeniden abone olmaya ihtiyaç duymaz.
+function subscribe() {
   // ...
 }
 
-// ✅ Her zaman aynı fonksiyondur, React yeniden abone olmaz
-function subscribe() {
+function ChatIndicator() {
+  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
   // ...
 }
 ```
 
 Alternatif olarak, yalnızca bir takım argümanlar değiştiğinde yeniden abone olmak için `subscribe` fonksiyonunu [`useCallback`](/reference/react/useCallback) Hook'una sarın:
 
-```js {4-8}
+```js {2-5}
 function ChatIndicator({ userId }) {
-  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
-  
-  // ✅ userId değişmediği sürece aynı fonksiyondur
+  // ✅ Aynı işlev, kullanıcı kimliği (`userId`) değişmediği sürece geçerlidir.
   const subscribe = useCallback(() => {
     // ...
   }, [userId]);
+  
+  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
 
   // ...
 }
diff --git a/src/pages/errors/[errorCode].tsx b/src/pages/errors/[errorCode].tsx
@@ -36,7 +36,7 @@ export default function ErrorDecoderPage({
         }}
         routeTree={sidebarLearn as RouteItem}
         section="unknown">
-        <div className="whitespace-pre-line">{parsedContent}</div>
+        <div>{parsedContent}</div>
         {/* <MaxWidth>
           <P>
             We highly recommend using the development build locally when debugging
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
diff --git a/src/siteConfig.js b/src/siteConfig.js

-Original file line number
+Diff line change
       },
     },
   },
 -}
 +};