diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 6b1d09c43..ade9e0d41 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -247,12 +247,20 @@ export function HomeContent() {
Bir framework ile tam özellikli geliştirmeler yapın
+<<<<<<< HEAD
React bir kütüphanedir. Bileşenleri bir araya getirmenize olanak
sağlar, ancak yönlendirme ve veri çekme gibi konularda nasıl
yapılacağına dair talimat vermez. React ile tüm bir uygulama
oluşturmak için Next.js{' '}
veya Remix gibi tam
özellikli React framework'lerini öneriyoruz.
+=======
+ React is a library. It lets you put components together, but it
+ doesn’t prescribe how to do routing and data fetching. To build an
+ entire app with React, we recommend a full-stack React framework
+ like Next.js or{' '}
+ React Router.
+>>>>>>> f8c81a0f4f8e454c850f0c854ad054b32313345c
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index 89c25f46f..aa39fe5fc 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -15,7 +15,7 @@ import {useRouter} from 'next/router';
import {SidebarNav} from './SidebarNav';
import {Footer} from './Footer';
import {Toc} from './Toc';
-import SocialBanner from '../SocialBanner';
+// import SocialBanner from '../SocialBanner';
import {DocsPageFooter} from 'components/DocsFooter';
import {Seo} from 'components/Seo';
import PageHeading from 'components/PageHeading';
@@ -142,7 +142,7 @@ export function Page({
/>
)}
-
+ {/* */}
-
-
-React Conf 2024 is scheduled for May 15–16 in Henderson, Nevada! If you’re interested in attending React Conf in person, you can [sign up for the ticket lottery](https://forms.reform.app/bLaLeE/react-conf-2024-ticket-lottery/1aRQLK) until February 28th.
-
-For more info on tickets, free streaming, sponsoring, and more, see [the React Conf website](https://conf.react.dev).
-
-
-
---
## React Compiler {/*react-compiler*/}
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 cdc8f353f..9b6095f8b 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
@@ -16,14 +16,6 @@ In React Labs posts, we write about projects in active research and development.
-
-
-React Conf 2025 is scheduled for October 7–8 in Henderson, Nevada!
-
-Watch the livestream on [the React Conf website](https://conf.react.dev).
-
-
-
Today, we're excited to release documentation for two new experimental features that are ready for testing:
- [View Transitions](#view-transitions)
@@ -40,6 +32,14 @@ We're also sharing updates on new features currently in development:
# New Experimental Features {/*new-experimental-features*/}
+
+
+`` has shipped in `react@19.2`.
+
+`` and `addTransitionType` are now available in `react@canary`.
+
+
+
View Transitions and Activity are now ready for testing in `react@experimental`. These features have been tested in production and are stable, but the final API may still change as we incorporate feedback.
You can try them by upgrading React packages to the most recent experimental version:
@@ -11543,7 +11543,7 @@ Try searching for a video, selecting it, and clicking "back":
```js src/App.js
-import { ViewTransition } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity;
+import { Activity, ViewTransition } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router";
export default function App() {
const { url } = useRouter();
@@ -12880,7 +12880,7 @@ With this update, if the content on the next page has time to pre-render, it wil
```js src/App.js
-import { ViewTransition, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity;
+import { Activity, ViewTransition, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data';
export default function App() {
const { url } = useRouter();
diff --git a/src/content/blog/2025/10/16/react-conf-2025-recap.md b/src/content/blog/2025/10/16/react-conf-2025-recap.md
new file mode 100644
index 000000000..8476b02aa
--- /dev/null
+++ b/src/content/blog/2025/10/16/react-conf-2025-recap.md
@@ -0,0 +1,133 @@
+---
+title: "React Conf 2025 Recap"
+author: Matt Carroll and Ricky Hanlon
+date: 2025/10/16
+description: Last week we hosted React Conf 2025, in this post, we summarize the talks and announcements from the event...
+---
+
+Oct 16, 2025 by [Matt Carroll](https://x.com/mattcarrollcode) and [Ricky Hanlon](https://bsky.app/profile/ricky.fm)
+
+---
+
+
+
+Last week we hosted React Conf 2025 where we announced the [React Foundation](/blog/2025/10/07/introducing-the-react-foundation) and showcased new features coming to React and React Native.
+
+
+
+---
+
+React Conf 2025 was held on October 7-8, 2025, in Henderson, Nevada.
+
+The entire [day 1](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=1067s) and [day 2](https://www.youtube.com/watch?v=p9OcztRyDl0&t=2299s) streams are available online, and you can view photos from the event [here](https://conf.react.dev/photos).
+
+In this post, we'll summarize the talks and announcements from the event.
+
+
+## Day 1 Keynote {/*day-1-keynote*/}
+
+_Watch the full day 1 stream [here.](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=1067s)_
+
+In the day 1 keynote, Joe Savona shared the updates from the team and community since the last React Conf and highlights from React 19.0 and 19.1.
+
+Mofei Zhang highlighted the new features in React 19.2 including:
+* [``](https://react.dev/reference/react/Activity) — a new component to manage visibility.
+* [`useEffectEvent`](https://react.dev/reference/react/useEffectEvent) to fire events from Effects.
+* [Performance Tracks](https://react.dev/reference/dev-tools/react-performance-tracks) — a new profiling tool in DevTools.
+* [Partial Pre-Rendering](https://react.dev/blog/2025/10/01/react-19-2#partial-pre-rendering) to pre-render part of an app ahead of time, and resume rendering it later.
+
+Jack Pope announced new features in Canary including:
+
+* [``](https://react.dev/reference/react/ViewTransition) — a new component to animate page transitions.
+* [Fragment Refs](https://react.dev/reference/react/Fragment#fragmentinstance) — a new way to interact with the DOM nodes wrapped by a Fragment.
+
+Lauren Tan announced [React Compiler v1.0](https://react.dev/blog/2025/10/07/react-compiler-1) and recommended all apps use React Compiler for benefits like:
+* [Automatic memoization](/learn/react-compiler/introduction#what-does-react-compiler-do) that understands React code.
+* [New lint rules](/learn/react-compiler/installation#eslint-integration) powered by React Compiler to teach best practices.
+* [Default support](/learn/react-compiler/installation#basic-setup) for new apps in Vite, Next.js, and Expo.
+* [Migration guides](/learn/react-compiler/incremental-adoption) for existing apps migrating to React Compiler.
+
+Finally, Seth Webster announced the [React Foundation](/blog/2025/10/07/introducing-the-react-foundation) to steward React's open source development and community.
+
+Watch day 1 here:
+
+
+
+## Day 2 Keynote {/*day-2-keynote*/}
+
+_Watch the full day 2 stream [here.](https://www.youtube.com/watch?v=p9OcztRyDl0&t=2299s)_
+
+Jorge Cohen and Nicola Corti kicked off day 2 highlighting React Native’s incredible growth with 4M weekly downloads (100% growth YoY), and some notable app migrations from Shopify, Zalando, and HelloFresh, award-winning apps like RISE, RUNNA, and Partyful, and AI apps from Mistral, Replit, and v0.
+
+Riccardo Cipolleschi shared two major announcements for React Native:
+- [React Native 0.82 will be New Architecture only](https://reactnative.dev/blog/2025/10/08/react-native-0.82#new-architecture-only)
+- [Experimental Hermes V1 support](https://reactnative.dev/blog/2025/10/08/react-native-0.82#experimental-hermes-v1)
+
+Ruben Norte and Alex Hunt finished out the keynote by announcing:
+- [New web-aligned DOM APIs](https://reactnative.dev/blog/2025/10/08/react-native-0.82#dom-node-apis) for improved compatibility with React on the web.
+- [New Performance APIs](https://reactnative.dev/blog/2025/10/08/react-native-0.82#web-performance-apis-canary) with a new network panel and desktop app.
+
+Watch day 2 here:
+
+
+
+
+## React team talks {/*react-team-talks*/}
+
+Throughout the conference, there were talks from the React team including:
+* [Async React Part I](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=10907s) and [Part II](https://www.youtube.com/watch?v=p9OcztRyDl0&t=29073s) [(Ricky Hanlon)](https://x.com/rickhanlonii) showed what's possible using the last 10 years of innovation.
+* [Exploring React Performance](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=20274s) [(Joe Savona)](https://x.com/en_js) showed the results of our React performance research.
+* [Reimagining Lists in React Native](https://www.youtube.com/watch?v=p9OcztRyDl0&t=10382s) [(Luna Wei)](https://x.com/lunaleaps) introduced Virtual View, a new primitive for lists that manages visibility with mode-based rendering (hidden/pre-render/visible).
+* [Profiling with React Performance tracks](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=8276s) [(Ruslan Lesiutin)](https://x.com/ruslanlesiutin) showed how to use the new React Performance Tracks to debug performance issues and build great apps.
+* [React Strict DOM](https://www.youtube.com/watch?v=p9OcztRyDl0&t=9026s) [(Nicolas Gallagher)](https://nicolasgallagher.com/) talked about Meta's approach to using web code on native.
+* [View Transitions and Activity](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=4870s) [(Chance Strickland)](https://x.com/chancethedev) — Chance worked with the React team to showcase how to use `` and `` to build fast, native-feeling animations.
+* [In case you missed the memo](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=9525s) [(Cody Olsen)](https://bsky.app/profile/codey.bsky.social) - Cody worked with the React team to adopt the Compiler at Sanity Studio, and shared how it went.
+## React framework talks {/*react-framework-talks*/}
+
+The second half of day 2 had a series of talks from React Framework teams including:
+
+* [React Native, Amplified](https://www.youtube.com/watch?v=p9OcztRyDl0&t=5737s) by [Giovanni Laquidara](https://x.com/giolaq) and [Eric Fahsl](https://x.com/efahsl).
+* [React Everywhere: Bringing React Into Native Apps](https://www.youtube.com/watch?v=p9OcztRyDl0&t=18213s) by [Mike Grabowski](https://x.com/grabbou).
+* [How Parcel Bundles React Server Components](https://www.youtube.com/watch?v=p9OcztRyDl0&t=19538s) by [Devon Govett](https://x.com/devonovett).
+* [Designing Page Transitions](https://www.youtube.com/watch?v=p9OcztRyDl0&t=20640s) by [Delba de Oliveira](https://x.com/delba_oliveira).
+* [Build Fast, Deploy Faster — Expo in 2025](https://www.youtube.com/watch?v=p9OcztRyDl0&t=21350s) by [Evan Bacon](https://x.com/baconbrix).
+* [The React Router's take on RSC](https://www.youtube.com/watch?v=p9OcztRyDl0&t=22367s) by [Kent C. Dodds](https://x.com/kentcdodds).
+* [RedwoodSDK: Web Standards Meet Full-Stack React](https://www.youtube.com/watch?v=p9OcztRyDl0&t=24992s) by [Peter Pistorius](https://x.com/appfactory) and [Aurora Scharff](https://x.com/aurorascharff).
+* [TanStack Start](https://www.youtube.com/watch?v=p9OcztRyDl0&t=26065s) by [Tanner Linsley](https://x.com/tannerlinsley).
+
+## Q&A {/*q-and-a*/}
+There were three Q&A panels during the conference:
+
+* [React Team at Meta Q&A](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=26304s) hosted by [Shruti Kapoor](https://x.com/shrutikapoor08)
+* [React Frameworks Q&A](https://www.youtube.com/watch?v=p9OcztRyDl0&t=26812s) hosted by [Jack Herrington](https://x.com/jherr)
+* [React and AI Panel](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=18741s) hosted by [Lee Robinson](https://x.com/leerob)
+
+## And more... {/*and-more*/}
+
+We also heard talks from the community including:
+* [Building an MCP Server](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=24204s) by [James Swinton](https://x.com/JamesSwintonDev) ([AG Grid](https://www.ag-grid.com/?utm_source=react-conf&utm_medium=react-conf-homepage&utm_campaign=react-conf-sponsorship-2025))
+* [Modern Emails using React](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=25521s) by [Zeno Rocha](https://x.com/zenorocha) ([Resend](https://resend.com/))
+* [Why React Native Apps Make All the Money](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=24917s) by [Perttu Lähteenlahti](https://x.com/plahteenlahti) ([RevenueCat](https://www.revenuecat.com/))
+* [The invisible craft of great UX](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=23400s) by [Michał Dudak](https://x.com/michaldudak) ([MUI](https://mui.com/))
+
+## Thanks {/*thanks*/}
+
+Thank you to all the staff, speakers, and participants, who made React Conf 2025 possible. There are too many to list, but we want to thank a few in particular.
+
+Thank you to [Matt Carroll](https://x.com/mattcarrollcode) for planning the entire event and building the conference website.
+
+Thank you to [Michael Chan](https://x.com/chantastic) for MCing React Conf with incredible dedication and energy, delivering thoughtful speaker intros, fun jokes, and genuine enthusiasm throughout the event. Thank you to [Jorge Cohen](https://x.com/JorgeWritesCode) for hosting the livestream, interviewing each speaker, and bringing the in-person React Conf experience online.
+
+Thank you to [Mateusz Kornacki](https://x.com/mat_kornacki), [Mike Grabowski](https://x.com/grabbou), [Kris Lis](https://www.linkedin.com/in/krzysztoflisakakris/) and the team at [Callstack](https://www.callstack.com/) for co-organizing React Conf and providing design, engineering, and marketing support. Thank you to the [ZeroSlope team](https://zeroslopeevents.com/contact-us/): Sunny Leggett, Tracey Harrison, Tara Larish, Whitney Pogue, and Brianne Smythia for helping to organize the event.
+
+Thank you to [Jorge Cabiedes Acosta](https://github.com/jorge-cab), [Gijs Weterings](https://x.com/gweterings), [Tim Yung](https://x.com/yungsters), and [Jason Bonta](https://x.com/someextent) for bringing questions from the Discord to the livestream. Thank you to [Lynn Yu](https://github.com/lynnshaoyu) for leading the moderation of the Discord. Thank you to [Seth Webster](https://x.com/sethwebster) for welcoming us each day; and to [Christopher Chedeau](https://x.com/vjeux), [Kevin Gozali](https://x.com/fkgozali), and [Pieter De Baets](https://x.com/Javache) for joining us with a special message during the after-party.
+
+Thank you to [Kadi Kraman](https://x.com/kadikraman), [Beto](https://x.com/betomoedano) and [Nicolas Solerieu](https://www.linkedin.com/in/nicolas-solerieu/) for building the conference mobile app. Thank you [Wojtek Szafraniec](https://x.com/wojteg1337) for help with the conference website. Thank you to [Mustache](https://www.mustachepower.com/) & [Cornerstone](https://cornerstoneav.com/) for the visuals, stage, and sound; and to the Westin Hotel for hosting us.
+
+Thank you to all the sponsors who made the event possible: [Amazon](https://www.developer.amazon.com), [MUI](https://mui.com/), [Vercel](https://vercel.com/), [Expo](https://expo.dev/), [RedwoodSDK](https://rwsdk.com), [Ag Grid](https://www.ag-grid.com), [RevenueCat](https://www.revenuecat.com/), [Resend](https://resend.com), [Mux](https://www.mux.com/), [Old Mission](https://www.oldmissioncapital.com/), [Arcjet](https://arcjet.com), [Infinite Red](https://infinite.red/), and [RenderATL](https://renderatl.com).
+
+Thank you to all the speakers who shared their knowledge and experience with the community.
+
+Finally, thank you to everyone who attended in person and online to show what makes React, React. React is more than a library, it is a community, and it was inspiring to see everyone come together to share and learn together.
+
+See you next time!
diff --git a/src/content/blog/index.md b/src/content/blog/index.md
index 46bfe018e..1a3d5ab1e 100644
--- a/src/content/blog/index.md
+++ b/src/content/blog/index.md
@@ -14,6 +14,12 @@ Bluesky'de [@react.dev](https://bsky.app/profile/react.dev) hesabını veya Twit
+
+
+Last week we hosted React Conf 2025. In this post, we summarize the talks and announcements from the event...
+
+
+
We're releasing the compiler's first stable release today, plus linting and tooling improvements to make adoption easier.
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 9354dc9c3..9cd83cffc 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -35,12 +35,6 @@ October 31 - November 01, 2025. In-person in Goa, India (hybrid event) + Oct 15
[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
-
-### CityJS New Delhi 2025 {/*cityjs-newdelhi*/}
-November 6-7, 2025. In-person in New Delhi, India
-
-[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
-
### React Summit US 2025 {/*react-summit-us-2025*/}
November 18 - 21, 2025. In-person in New York, USA + remote (hybrid event)
@@ -51,12 +45,29 @@ November 28 & December 1, 2025. In-person in London, UK + online (hybrid event)
[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)
+### 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)
+
+### CityJS New Delhi 2026 {/*cityjs-newdelhi-2026*/}
+February 12-13, 2026. In-person in New Delhi, India
+
+[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
+
### React Paris 2026 {/*react-paris-2026*/}
March 26 - 27, 2026. In-person in Paris, France (hybrid event)
[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_)
+### 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)
+
+
## Past Conferences {/*past-conferences*/}
diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md
index 223a373f8..659a1fbbb 100644
--- a/src/content/learn/thinking-in-react.md
+++ b/src/content/learn/thinking-in-react.md
@@ -37,9 +37,15 @@ Her bileşenin etrafına kutular çizin ve bileşenlerinize isim verin. Bir tasa
Tecrübenize bağlı olarak, bir tasarımı farklı yöntemlerle bileşenlere ayırmayı düşünebilirsiniz:
+<<<<<<< HEAD
* **Programlama**--yeni bir fonksiyon veya nesne oluşturup oluşturmayacağınıza karar vermek için aynı teknikleri kullanın. Bu tekniklerden biri [tek sorumluluk ilkesi](https://tr.wikipedia.org/wiki/Tek_sorumluluk_ilkesi)dir, yani bir bileşen ideal olarak sadece bir şey yapmalıdır. Büyümeye başlarsa, daha küçük alt bileşenlere ayrılmalıdır.
* **CSS**--tek tek neler için sınıf seçiçiler yazacağınızı düşünün. (Bununla birlikte, bileşenler biraz daha az ayrıntılıdır.)
* **Tasarım**--tasarımın katmanlarını nasıl düzenleyeceğinizi düşünün.
+=======
+* **Programming**--use the same techniques for deciding if you should create a new function or object. One such technique is the [separation of concerns](https://en.wikipedia.org/wiki/Separation_of_concerns), that is, a component should ideally only be concerned with one thing. If it ends up growing, it should be decomposed into smaller subcomponents.
+* **CSS**--consider what you would make class selectors for. (However, components are a bit less granular.)
+* **Design**--consider how you would organize the design's layers.
+>>>>>>> f8c81a0f4f8e454c850f0c854ad054b32313345c
JSON veriniz iyi yapılandırılmışsa, genellikle arayüzün bileşen yapısıyla doğal bir şekilde eşleştiğini göreceksiniz. Çünkü UI ve veri modelleri genellikle aynı bilgi mimarisine, yani aynı şekle sahiptir. Arayüzünüzü, her bileşenin veri modelinizin bir parçasıyla eşleştiği bileşenlere ayırın.
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 e62d3edf3..0021c4543 100644
--- a/src/content/learn/understanding-your-ui-as-a-tree.md
+++ b/src/content/learn/understanding-your-ui-as-a-tree.md
@@ -20,7 +20,11 @@ React ve diğer birçok UI kütüphanesi, UI'ı bir ağaç olarak modeller. Uygu
## Bir ağaç olarak kullanıcı arayüzünüz {/*your-ui-as-a-tree*/}
+<<<<<<< HEAD
Ağaçlar öğeler arasında bir ilişki modelidir ve kullanıcı arayüzü genellikle ağaç yapıları kullanılarak temsil edilir. Örneğin, tarayıcılar HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) ve CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)) modellemek için ağaç yapılarını kullanır. Mobil platformlar da görünüm hiyerarşilerini temsil etmek için ağaçları kullanır.
+=======
+Trees are a relationship model between items. The UI is often represented using tree structures. For example, browsers use tree structures to model HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) and CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Mobile platforms also use trees to represent their view hierarchy.
+>>>>>>> f8c81a0f4f8e454c850f0c854ad054b32313345c
diff --git a/src/content/reference/react-dom/hooks/index.md b/src/content/reference/react-dom/hooks/index.md
index 5dfb07d82..5bda2b5ad 100644
--- a/src/content/reference/react-dom/hooks/index.md
+++ b/src/content/reference/react-dom/hooks/index.md
@@ -4,7 +4,7 @@ title: "Built-in React DOM Hooks"
-The `react-dom` package contains Hooks that are only supported for web applications (which run in the browser DOM environment). These Hooks are not supported in non-browser environments like iOS, Android, or Windows applications. If you are looking for Hooks that are supported in web browsers *and other environments* see [the React Hooks page](/reference/react). This page lists all the Hooks in the `react-dom` package.
+The `react-dom` package contains Hooks that are only supported for web applications (which run in the browser DOM environment). These Hooks are not supported in non-browser environments like iOS, Android, or Windows applications. If you are looking for Hooks that are supported in web browsers *and other environments* see [the React Hooks page](/reference/react/hooks). This page lists all the Hooks in the `react-dom` package.
diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md
index 961587803..7a31f66a1 100644
--- a/src/content/reference/react-dom/static/prerenderToNodeStream.md
+++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md
@@ -4,7 +4,7 @@ title: prerenderToNodeStream
-`prerenderToNodeStream` renders a React tree to a static HTML string using a [Node.js Stream.](https://nodejs.org/api/stream.html).
+`prerenderToNodeStream` renders a React tree to a static HTML string using a [Node.js Stream.](https://nodejs.org/api/stream.html)
```js
const {prelude, postponed} = await prerenderToNodeStream(reactNode, options?)
@@ -88,7 +88,7 @@ The static `prerenderToNodeStream` API is used for static server-side generation
### Rendering a React tree to a stream of static HTML {/*rendering-a-react-tree-to-a-stream-of-static-html*/}
-Call `prerenderToNodeStream` to render your React tree to static HTML into a [Node.js Stream.](https://nodejs.org/api/stream.html):
+Call `prerenderToNodeStream` to render your React tree to static HTML into a [Node.js Stream](https://nodejs.org/api/stream.html):
```js [[1, 5, ""], [2, 6, "['/main.js']"]]
import { prerenderToNodeStream } from 'react-dom/static';
diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index cf73efb26..b53064c2b 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -48,6 +48,7 @@ In this way, Activity can be thought of as a mechanism for rendering "background
#### Caveats {/*caveats*/}
- 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.
+- An Activity that just renders text will not render anything rather than rendering hidden text, because there’s no corresponding DOM element to apply visibility changes to. For example, `` will not produce any output in the DOM for `const ComponentThatJustReturnsText = () => "Hello, World!"`.
---
@@ -189,7 +190,7 @@ and check out the new behavior:
```js src/App.js active
-import { useState } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity;
+import { Activity, useState } from 'react';
import Sidebar from './Sidebar.js';
@@ -375,7 +376,7 @@ If we switch to using an Activity boundary to show and hide the active tab, we c
```js src/App.js active
-import { useState } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity;
+import { Activity, useState } from 'react';
import TabButton from './TabButton.js';
import Home from './Home.js';
import Contact from './Contact.js';
@@ -619,7 +620,7 @@ Try clicking the Posts tab now:
```js src/App.js
-import { useState, Suspense } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity;
+import { Activity, useState, Suspense } from 'react';
import TabButton from './TabButton.js';
import Home from './Home.js';
import Posts from './Posts.js';
@@ -1009,7 +1010,7 @@ Let's update `App` to hide the inactive tab with a hidden Activity boundary inst
```js src/App.js active
-import { useState } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity;
+import { Activity, useState } from 'react';
import TabButton from './TabButton.js';
import Home from './Home.js';
import Video from './Video.js';
@@ -1126,7 +1127,7 @@ Let's see the new behavior. Try playing the video, switching to the Home tab, th
```js src/App.js active
-import { useState } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity;
+import { Activity, useState } from 'react';
import TabButton from './TabButton.js';
import Home from './Home.js';
import Video from './Video.js';
@@ -1248,4 +1249,4 @@ When an `` is "hidden", all its children's Effects are cleaned up. Con
If you're relying on an Effect mounting to clean up a component's side effects, refactor the Effect to do the work in the returned cleanup function instead.
-To eagerly find problematic Effects, we recommend adding [``](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side-effects.
\ No newline at end of file
+To eagerly find problematic Effects, we recommend adding [``](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side-effects.
diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md
index 09acbc7d6..9d2d1007b 100644
--- a/src/content/reference/react/Component.md
+++ b/src/content/reference/react/Component.md
@@ -206,7 +206,7 @@ There is no exact equivalent for `constructor` in function components. To declar
If you define `componentDidCatch`, React will call it when some child component (including distant children) throws an error during rendering. This lets you log that error to an error reporting service in production.
-Typically, it is used together with [`static getDerivedStateFromError`](#static-getderivedstatefromerror) which lets you update state in response to an error and display an error message to the user. A component with these methods is called an *error boundary.*
+Typically, it is used together with [`static getDerivedStateFromError`](#static-getderivedstatefromerror) which lets you update state in response to an error and display an error message to the user. A component with these methods is called an *Error Boundary*.
[See an example.](#catching-rendering-errors-with-an-error-boundary)
@@ -932,7 +932,7 @@ Defining `defaultProps` in class components is similar to using [default values]
If you define `static getDerivedStateFromError`, React will call it when a child component (including distant children) throws an error during rendering. This lets you display an error message instead of clearing the UI.
-Typically, it is used together with [`componentDidCatch`](#componentdidcatch) which lets you send the error report to some analytics service. A component with these methods is called an *error boundary.*
+Typically, it is used together with [`componentDidCatch`](#componentdidcatch) which lets you send the error report to some analytics service. A component with these methods is called an *Error Boundary*.
[See an example.](#catching-rendering-errors-with-an-error-boundary)
@@ -1267,11 +1267,11 @@ We recommend defining components as functions instead of classes. [See how to mi
---
-### Catching rendering errors with an error boundary {/*catching-rendering-errors-with-an-error-boundary*/}
+### Catching rendering errors with an Error Boundary {/*catching-rendering-errors-with-an-error-boundary*/}
-By default, if your application throws an error during rendering, React will remove its UI from the screen. To prevent this, you can wrap a part of your UI into an *error boundary*. An error boundary is a special component that lets you display some fallback UI instead of the part that crashed--for example, an error message.
+By default, if your application throws an error during rendering, React will remove its UI from the screen. To prevent this, you can wrap a part of your UI into an *Error Boundary*. An Error Boundary is a special component that lets you display some fallback UI instead of the part that crashed--for example, an error message.
-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.
+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.
With [`captureOwnerStack`](/reference/react/captureOwnerStack) you can include the Owner Stack during development.
@@ -1324,11 +1324,11 @@ Then you can wrap a part of your component tree with it:
If `Profile` or its child component throws an error, `ErrorBoundary` will "catch" that error, display a fallback UI with the error message you've provided, and send a production error report to your error reporting service.
-You don't need to wrap every component into a separate error boundary. When you think about the [granularity of error boundaries,](https://www.brandondail.com/posts/fault-tolerance-react) consider where it makes sense to display an error message. For example, in a messaging app, it makes sense to place an error boundary around the list of conversations. It also makes sense to place one around every individual message. However, it wouldn't make sense to place a boundary around every avatar.
+You don't need to wrap every component into a separate Error Boundary. When you think about the [granularity of Error Boundaries,](https://www.brandondail.com/posts/fault-tolerance-react) consider where it makes sense to display an error message. For example, in a messaging app, it makes sense to place an Error Boundary around the list of conversations. It also makes sense to place one around every individual message. However, it wouldn't make sense to place a boundary around every avatar.
-There is currently no way to write an error boundary as a function component. However, you don't have to write the error boundary class yourself. For example, you can use [`react-error-boundary`](https://github.com/bvaughn/react-error-boundary) instead.
+There is currently no way to write an Error Boundary as a function component. However, you don't have to write the Error Boundary class yourself. For example, you can use [`react-error-boundary`](https://github.com/bvaughn/react-error-boundary) instead.
diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md
index c0d532247..93d89db6a 100644
--- a/src/content/reference/react/Fragment.md
+++ b/src/content/reference/react/Fragment.md
@@ -319,8 +319,6 @@ Fragment refs provide focus management methods that work across all DOM nodes wi
import { Fragment, useRef } from 'react';
function FocusFragment({ children }) {
- const fragmentRef = useRef(null);
-
return (
fragmentInstance?.focus()}>
{children}
diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md
index 18ca3a38e..45d6a0b5b 100644
--- a/src/content/reference/react/StrictMode.md
+++ b/src/content/reference/react/StrictMode.md
@@ -1169,7 +1169,7 @@ export default function CatFriends() {
console.log('❌ Too many cats in the list!');
}
return () => {
- list.splice(list.indexOf(item));
+ list.splice(list.indexOf(item), 1);
console.log(`❌ Removing cat from the map. Total cats: ${itemsRef.current.length}`);
}
}}
diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index 7a8cb41ad..eac77c832 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -2009,7 +2009,11 @@ Ancak, şimdi iki farklı kullanıcı profili arasında geçiş yapmaya çalış
Eğer [stream'leyen sunucu render etme API'leri](/reference/react-dom/server)nden birini (ya da onlara bağlı bir framework) kullanıyorsanız, React sunucuda hataları ele almak için `` sınırlarınızı kullanacaktır. Eğer bir bileşen sunucuda bir hata throw ederse, React sunucu render'ını iptal etmeyecektir. Bunun yerine, onun üzerindeki en yakın `` bileşenini bulacak ve oluşturulan sunucu HTML'ine bileşenin fallback'ini (örneğin bir yükleniyor çarkı) dahil edecektir. Kullanıcı ilk olarak bir yükleniyor çarkı görecektir.
+<<<<<<< HEAD
İstemci tarafında, React aynı bileşeni tekrar render etmeyi deneyecektir. Eğer istemcide de hata verirse, React hatayı throw edip en yakın [hata sınırını](/reference/react/Component#static-getderivedstatefromerror) gösterecektir. Ancak, istemcide hata vermezse, React içeriği nihayetinde başarıyla görüntülediği için hatayı kullanıcıya göstermeyecektir.
+=======
+On the client, React will attempt to render the same component again. If it errors on the client too, React will throw the error and display the closest [Error Boundary.](/reference/react/Component#static-getderivedstatefromerror) However, if it does not error on the client, React will not display the error to the user since the content was eventually displayed successfully.
+>>>>>>> f8c81a0f4f8e454c850f0c854ad054b32313345c
Bunu bazı bileşenlerin sunucuda yüklenmemesini sağlamak için kullanabilirsiniz. Bunu yapmak için, sunucu ortamında bir hata throw edin ve ardından HTML'lerini fallback'lerle değiştirmek için `` sınırı içine alın:
diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md
index f56d2959e..ce87703ef 100644
--- a/src/content/reference/react/apis.md
+++ b/src/content/reference/react/apis.md
@@ -4,7 +4,11 @@ title: "Yerleşik React API'leri"
+<<<<<<< HEAD
`react` paketi, [Hook](/reference/react)'ların ve [Bileşen](/reference/react/components)'lerin yanı sıra, bileşen tanımlarken kullanışlı olan birkaç farklı API içerir. Bu sayfa, tüm modern React API'lerini listeler.
+=======
+In addition to [Hooks](/reference/react/hooks) and [Components](/reference/react/components), the `react` package exports a few other APIs that are useful for defining components. This page lists all the remaining modern React APIs.
+>>>>>>> f8c81a0f4f8e454c850f0c854ad054b32313345c
diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
index 4f2475be4..e3b1526c3 100644
--- a/src/content/reference/react/use.md
+++ b/src/content/reference/react/use.md
@@ -34,7 +34,11 @@ Diğer React Hook'ların aksine, Döngülerin ve `if` gibi koşullu ifadeler iç
Bir Pomise ile çağırıldığında; `use` API, [`Suspense`](/reference/react/Suspense) ve [hata sınırları](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) ile entegre olur. `use`'a iletilen Promise beklenirken, `use` çağrısı yapan bileşen askıya alınır. Eğer `use` çağrısı yapan bileşen Suspense içerisine alınırsa yedek görünüm görüntülenecektir. Promise çözümlendiğinde ise; Suspense yedek görünümü, `use` API'ı tarafından döndürülen değerleri kullanarak oluşturulan bileşenler ile yer değiştirir. Eğer `use`'a iletilen Promise reddedilir ise, en yakındaki Hata Sınırının yedek görünümü görüntülenecektir.
+<<<<<<< HEAD
[Aşağıda daha fazla örnek görebilirsiniz.](#usage)
+=======
+When called with a Promise, the `use` API integrates with [`Suspense`](/reference/react/Suspense) and [Error Boundaries](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). The component calling `use` *suspends* while the Promise passed to `use` is pending. If the component that calls `use` is wrapped in a Suspense boundary, the fallback will be displayed. Once the Promise is resolved, the Suspense fallback is replaced by the rendered components using the data returned by the `use` API. If the Promise passed to `use` is rejected, the fallback of the nearest Error Boundary will be displayed.
+>>>>>>> f8c81a0f4f8e454c850f0c854ad054b32313345c
#### Parametreler {/*parameters*/}
@@ -320,16 +324,27 @@ Ancak bir [Sunucu Bileşeninde](/reference/rsc/server-components) `await` kullan
Bazen `use`'a aktarılan Promise reddedilebilir. Reddedilen Promise'leri şu şekilde yönetebilirsiniz:
+<<<<<<< HEAD
1. [Kullanıcıya hata sınırlayıcısı kullanarak hata göstermek.](#displaying-an-error-to-users-with-error-boundary)
2. [`Promise.catch` methodunu kullanarak alternatif bir veri sunmak](#providing-an-alternative-value-with-promise-catch)
+=======
+1. [Displaying an error to users with an Error Boundary.](#displaying-an-error-to-users-with-error-boundary)
+2. [Providing an alternative value with `Promise.catch`](#providing-an-alternative-value-with-promise-catch)
+>>>>>>> f8c81a0f4f8e454c850f0c854ad054b32313345c
`use`, try-catch bloğu içerisinde çağırılamaz. Try-catch bloğu yerine [bileşeni Error Boundary içerisine ekleyin](#displaying-an-error-to-users-with-error-boundary), ya da [Promise'in `.catch` methodundan yararlanarak alternatif bir değer sağlayın](#providing-an-alternative-value-with-promise-catch).
+<<<<<<< HEAD
#### Kullanıcıya hata sınırlayıcısı kullanarak hata göstermek {/*displaying-an-error-to-users-with-error-boundary*/}
Eğer bir Promise reddedildiğinde kullanıcılarına hata göstermek istersen [hata sınırlayıcısını](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) kullanabilirsin. Bir hata sınırlayıcı kullanmak için `use` API'ını çağırdığınız bir bileşeni Error Boundary içerisine koyun. Eğer `use`'a iletilen Promise reddedilirse hata sınırlayıcı aracılığı ile yedek görünüm görüntülenecektir.
+=======
+#### Displaying an error to users with an Error Boundary {/*displaying-an-error-to-users-with-error-boundary*/}
+
+If you'd like to display an error to your users when a Promise is rejected, you can use an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). To use an Error Boundary, wrap the component where you are calling the `use` API in an Error Boundary. If the Promise passed to `use` is rejected the fallback for the Error Boundary will be displayed.
+>>>>>>> f8c81a0f4f8e454c850f0c854ad054b32313345c
@@ -440,7 +455,11 @@ Promise'in `catch` methodunu kullanmak için Promi
### "Suspense İstisnası: Bu gerçek bir hata değil!" {/*suspense-exception-error*/}
+<<<<<<< HEAD
`use` ya bir React Bileşeni ya da Hook fonksiyonu dışında veya try-catch bloğu içerisinde çağırılıyor. Eğer try-catch bloğu içerisinde `use` çağırıyorsanız bileşeni hata sınırlandırıcı içerisine koyun veya hata yakalamak ve alternatif değer ile çözümlemek için Promise'in `catch` methodunu çağırın. [Bu örneği inceleyin](#dealing-with-rejected-promises)
+=======
+You are either calling `use` outside of a React Component or Hook function, or calling `use` in a try–catch block. If you are calling `use` inside a try–catch block, wrap your component in an Error Boundary, or call the Promise's `catch` to catch the error and resolve the Promise with another value. [See these examples](#dealing-with-rejected-promises).
+>>>>>>> f8c81a0f4f8e454c850f0c854ad054b32313345c
Eğer `use`'u bir React Bileşeni veya Hook fonksiyonu dışında çağırıyorsanız `use` çağrısını bir React Bileşeni veya Hook fonksiyonu içerisine taşıyın.
diff --git a/src/content/reference/react/useCallback.md b/src/content/reference/react/useCallback.md
index bfe82fa1d..bd105eefc 100644
--- a/src/content/reference/react/useCallback.md
+++ b/src/content/reference/react/useCallback.md
@@ -235,7 +235,15 @@ Diğer durumlarda fonksiyonları `useCallback`'e sarmanın hiçbir faydası olma
`useCallback`'in fonksiyon *oluşturmayı* engellemediğini unutmayın. Her zaman yeni fonksiyon oluşturursunuz (ve bu iyidir), ancak React bunu yok sayarak hiçbir şey değişmediği takdirde önbelleğe alınan fonksiyonu geri verir.
+<<<<<<< HEAD
**Pratikte, birkaç ilkeyi takip ederek önbelleğe alma işlemlerinin çoğunu gereksiz hale getirebilirsiniz:**
+=======
+1. When a component visually wraps other components, let it [accept JSX as children.](/learn/passing-props-to-a-component#passing-jsx-as-children) Then, if the wrapper component updates its own state, React knows that its children don't need to re-render.
+2. Prefer local state and don't [lift state up](/learn/sharing-state-between-components) any further than necessary. Don't keep transient state like forms and whether an item is hovered at the top of your tree or in a global state library.
+3. Keep your [rendering logic pure.](/learn/keeping-components-pure) If re-rendering a component causes a problem or produces some noticeable visual artifact, it's a bug in your component! Fix the bug instead of adding memoization.
+4. Avoid [unnecessary Effects that update state.](/learn/you-might-not-need-an-effect) Most performance problems in React apps are caused by chains of updates originating from Effects that cause your components to render over and over.
+5. Try to [remove unnecessary dependencies from your Effects.](/learn/removing-effect-dependencies) For example, instead of memoization, it's often simpler to move some object or a function inside an Effect or outside the component.
+>>>>>>> f8c81a0f4f8e454c850f0c854ad054b32313345c
1. Bir bileşen diğerlerini görsel olarak sardığında, [JSX'i alt bileşen (children) olarak kabul etmesine](/learn/passing-props-to-a-component#passing-jsx-as-children) izin verin. Böylece sarmalayıcı bileşen kendi state'ini güncellerse, React alt bileşenleri yeniden render etmesine gerek olmadığını bilir.
1. Yerel state'i tercih edin ve [state'i gereğinden fazla üst bileşene taşımayın.](/learn/sharing-state-between-components) Form gibi geçici state'leri veya bileşenin tıklanma durumunu ağacınızın en üstünde yada global state yönetim kütüphanesinde saklamayın.
diff --git a/src/content/reference/react/useRef.md b/src/content/reference/react/useRef.md
index cdc62590a..caf762a17 100644
--- a/src/content/reference/react/useRef.md
+++ b/src/content/reference/react/useRef.md
@@ -575,7 +575,11 @@ export default function MyInput({ value, onChange }) {
}
```
+<<<<<<< HEAD
Ve ardından `ref`'i, bileşeninizin kabul ettiği props listesine ekleyin ve `ref`'i ilgili [yerleşik bileşene](/reference/react-dom/components/common) prop olarak iletin, şöyle:
+=======
+And then add `ref` to the list of props your component accepts and pass `ref` as a prop to the relevant child [built-in component](/reference/react-dom/components/common) like this:
+>>>>>>> f8c81a0f4f8e454c850f0c854ad054b32313345c
```js {1,6}
function MyInput({ value, onChange, ref }) {
diff --git a/src/content/reference/rsc/server-components.md b/src/content/reference/rsc/server-components.md
index e4e8ebc02..e73697d58 100644
--- a/src/content/reference/rsc/server-components.md
+++ b/src/content/reference/rsc/server-components.md
@@ -2,12 +2,15 @@
title: Sunucu Bileşenleri
---
+<<<<<<< HEAD
Server Components, [React Server Components](/learn/start-a-new-react-project#full-stack-frameworks) içinde kullanılmak içindir.
+=======
+>>>>>>> f8c81a0f4f8e454c850f0c854ad054b32313345c
Sunucu Bileşenleri, önceden, paketlemeden önce, istemci uygulamanızdan veya SSR sunucusundan ayrı bir ortamda render edilen yeni bir Bileşen türüdür.
@@ -293,7 +296,7 @@ function Comments({commentsPromise}) {
// NOT: Bu, sunucudan gelen promise'i yeniden başlatacak.
// Veriler mevcut olana kadar askıya alınacak.
const comments = use(commentsPromise);
- return comments.map(commment =>