-
+
-We announced an experimental release of React Compiler at React Conf 2024. We've made a lot of progress since then, and in this post we want to share what's next for React Compiler ...
+In the React 19 Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them ...
-
+
-Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. This was our first in-person conference since 2019, and we were thrilled to be able to bring the community together again ...
+We announced an experimental release of React Compiler at React Conf 2024. We've made a lot of progress since then, and in this post we want to share what's next for React Compiler ...
-
+
-In the React 19 RC Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them ...
+Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. This was our first in-person conference since 2019, and we were thrilled to be able to bring the community together again ...
-
+
The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible, and we don't expect the changes to impact most apps. In this post, we will guide you through the steps for upgrading libraries to React 19 ...
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index 9b8759a10..8dfee73f1 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -256,11 +256,11 @@ export default function CatFriends() {
key={cat}
ref={(node) => {
const map = getMap();
- if (node) {
- map.set(cat, node);
- } else {
+ map.set(cat, node);
+
+ return () => {
map.delete(cat);
- }
+ };
}}
>
@@ -309,16 +309,6 @@ li {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "^5.0.0"
- }
-}
-```
-
Bu örnekte `itemsRef` tek bir DOM elemanını tutmaz. Bunun yerine öge kimliğinden DOM elemanına bir [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) tutar. ([Ref'ler herhangi bir değeri tutabilir!](/learn/referencing-values-with-refs)) Her liste ögesindeki [`ref` callback'i](/reference/react-dom/components/common#ref-callback) Map'i güncellemeye özen gösterir:
@@ -328,6 +318,7 @@ Bu örnekte `itemsRef` tek bir DOM elemanını tutmaz. Bunun yerine öge kimliğ
key={cat.id}
ref={node => {
const map = getMap();
+<<<<<<< HEAD
if (node) {
// Add to the Map
map.set(cat, node);
@@ -350,6 +341,8 @@ This example shows another approach for managing the Map with a `ref` callback c
key={cat.id}
ref={node => {
const map = getMap();
+=======
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
// Add to the Map
map.set(cat, node);
@@ -361,7 +354,15 @@ This example shows another approach for managing the Map with a `ref` callback c
>
```
-
+This lets you read individual DOM nodes from the Map later.
+
+
+
+When Strict Mode is enabled, ref callbacks will run twice in development.
+
+Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bugs-found-by-re-running-ref-callbacks-in-development) in callback refs.
+
+
diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md
index 968f548be..b70dbd6cc 100644
--- a/src/content/learn/react-developer-tools.md
+++ b/src/content/learn/react-developer-tools.md
@@ -55,15 +55,20 @@ Web sitenizi geliştirici araçlarında görüntülemek sayfayı yenileyin.
## Mobil (React Native) {/*mobile-react-native*/}
React Developer Tools, [React Native](https://reactnative.dev/) ile oluşturulan uygulamaları incelemek için de kullanılabilir.
+<<<<<<< HEAD
React Developer Tools'u kullanmanın en kolay yolu, onu global olarak yüklemektir:
```bash
# Yarn
yarn global add react-devtools
+=======
+## Mobile (React Native) {/*mobile-react-native*/}
-# Npm
-npm install -g react-devtools
-```
+To inspect apps built with [React Native](https://reactnative.dev/), you can use [React Native DevTools](https://reactnative.dev/docs/debugging/react-native-devtools), the built-in debugger that deeply integrates React Developer Tools. All features work identically to the browser extension, including native element highlighting and selection.
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
+
+[Learn more about debugging in React Native.](https://reactnative.dev/docs/debugging)
+<<<<<<< HEAD
Daha sonra, terminalden React Developer Tools'u açın.
```bash
react-devtools
@@ -74,3 +79,6 @@ Yerelde çalışan herhangi bir React Native uygulamasına bağlanmalıdır.
> Birkaç saniye sonra React Developer Tools bağlanmazsa, uygulamayı yeniden yüklemeyi deneyin.
[React Native'de hata ayıklama hakkında daha fazla bilgi edinmek için.](https://reactnative.dev/docs/debugging)
+=======
+> For versions of React Native earlier than 0.76, please use the standalone build of React DevTools by following the [Safari and other browsers](#safari-and-other-browsers) guide above.
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index fd760092e..1178025e4 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -45,10 +45,17 @@ Tamamen React ile oluşturulmuş bir uygulama genellikle kök bileşeni için ya
* **opsiyonel** `options`: Bu React kökü için seçenekler içeren bir nesne.
+<<<<<<< HEAD
*
`onUncaughtError` sadece en son React Canary sürümünde mevcuttur.
@@ -354,6 +362,9 @@ Birden fazla kez `render` çağrısı yapmak nadirdir. Genellikle bileşenlerini
Varsayılan olarak, React tüm yakalanmamış hataları konsola kaydeder. Kendi hata raporlamanızı uygulamak için, isteğe bağlı `onUncaughtError` root seçeneğini sağlayabilirsin:
+=======
+By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option:
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
```js [[1, 6, "onUncaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
import { createRoot } from 'react-dom/client';
@@ -580,22 +591,12 @@ export default function App() {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js"
-}
-```
-
### Hata yakalayıcı ile ilgili hataları görüntüleme {/*displaying-error-boundary-errors*/}
+<<<<<<< HEAD
`onCaughtError` sadece en son React Canary sürümünde mevcuttur.
@@ -603,6 +604,9 @@ export default function App() {
Varsayılan olarak, React bir Hata yakalayıcı tarafından yakalanan tüm hataları `console.error` dosyasına kaydeder. Bu davranışı geçersiz kılmak için, bir Hata yakalayıcı tarafından yakalanan hataları işlemek üzere isteğe bağlı `onCaughtError` kök seçeneğini sağlayabilirsin. [Hata yakalayıcı](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
+=======
+By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option to handle errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
import { createRoot } from 'react-dom/client';
@@ -867,8 +871,8 @@ function Throw({error}) {
```json package.json hidden
{
"dependencies": {
- "react": "canary",
- "react-dom": "canary",
+ "react": "19.0.0-rc-3edc000d-20240926",
+ "react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
@@ -1126,8 +1130,8 @@ function Throw({error}) {
```json package.json hidden
{
"dependencies": {
- "react": "canary",
- "react-dom": "canary",
+ "react": "19.0.0-rc-3edc000d-20240926",
+ "react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
index cc30ce22c..c54b6fe11 100644
--- a/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -41,8 +41,8 @@ React will attach to the HTML that exists inside the `domNode`, and take over ma
* **optional** `options`: An object with options for this React root.
- *
-
-`onUncaughtError` is only available in the latest React Canary release.
-
-
-
By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option:
```js [[1, 7, "onUncaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]]
@@ -612,28 +606,11 @@ export default function App() {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js"
-}
-```
-
### Displaying Error Boundary errors {/*displaying-error-boundary-errors*/}
-
-
-`onCaughtError` is only available in the latest React Canary release.
-
-
-
By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option for errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]]
@@ -902,8 +879,8 @@ function Throw({error}) {
```json package.json hidden
{
"dependencies": {
- "react": "canary",
- "react-dom": "canary",
+ "react": "19.0.0-rc-3edc000d-20240926",
+ "react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
@@ -1164,8 +1141,8 @@ function Throw({error}) {
```json package.json hidden
{
"dependencies": {
- "react": "canary",
- "react-dom": "canary",
+ "react": "19.0.0-rc-3edc000d-20240926",
+ "react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index 40a61eed4..b546ad963 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -246,6 +246,7 @@ Prop olarak özel nitelikler de verebilirsiniz, örneğin `ozelprop="herhangiBir
`ref` niteliğine, bir ref nesnesi yerine ([`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref) tarafından döndürülen gibi) bir fonksiyon verebilirsiniz.
```js
+<<<<<<< HEAD
console.log(node)} />
```
@@ -267,22 +268,47 @@ Ayrıca React, siz *farklı* bir `ref` callback'i verir vermez `ref` callback'in
```js
+=======
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
{
- console.log(node);
+ console.log('Attached', node);
return () => {
console.log('Clean up', node)
}
}}>
-
```
+<<<<<<< HEAD
#### Uyarılar {/*caveats*/}
+=======
+[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 Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function.
-* When you pass a *different* `ref` callback, React will call the *previous* callback's cleanup function if provided. If not cleanup function is defined, the `ref` callback will be called with `null` as the argument. The *next* function will be called with the DOM node.
+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.
+
+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.
+
+#### Parameters {/*ref-callback-parameters*/}
+
+* `node`: A DOM node. React will pass you the DOM node when the ref gets attached. Unless you pass the same function reference for the `ref` callback on every render, the callback will get temporarily cleanup and re-create during every re-render of the component.
+
+
+
+#### React 19 added cleanup functions for `ref` callbacks. {/*react-19-added-cleanup-functions-for-ref-callbacks*/}
-
+To support backwards compatibility, if a cleanup function is not returned from the `ref` callback, `node` will be called with `null` when the `ref` is detached. This behavior will be removed in a future version.
+
+
+
+#### Returns {/*returns*/}
+
+* **optional** `cleanup function`: When the `ref` is detached, React will call the cleanup function. If a function is not returned by the `ref` callback, React will call the callback again with `null` as the argument when the `ref` gets detached. This behavior will be removed in a future version.
+
+#### Caveats {/*caveats*/}
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
+
+* When Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function.
+* When you pass a *different* `ref` callback, React will call the *previous* callback's cleanup function if provided. If no cleanup function is defined, the `ref` callback will be called with `null` as the argument. The *next* function will be called with the DOM node.
---
diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index 8f6ab00e0..047b65aa7 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -1,15 +1,7 @@
---
title: "