From 4b0935b8c119d03278f709681c63ad8a940b22b5 Mon Sep 17 00:00:00 2001 From: Jordan Thomson Date: Mon, 20 Oct 2025 23:15:38 +1100 Subject: [PATCH 1/3] Add `` bullet to built-in components section (#8087) --- src/content/reference/react/components.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/reference/react/components.md b/src/content/reference/react/components.md index 7ce3fab63..081f206c0 100644 --- a/src/content/reference/react/components.md +++ b/src/content/reference/react/components.md @@ -16,6 +16,7 @@ React exposes a few built-in components that you can use in your JSX. * [``](/reference/react/Profiler) lets you measure rendering performance of a React tree programmatically. * [``](/reference/react/Suspense) lets you display a fallback while the child components are loading. * [``](/reference/react/StrictMode) enables extra development-only checks that help you find bugs early. +* [``](/reference/react/Activity) lets you hide and restore the UI and internal state of its children. --- From 2c7798dcc51fbd07ebe41f49e5ded4839a029f72 Mon Sep 17 00:00:00 2001 From: lauren Date: Mon, 20 Oct 2025 13:31:58 -0400 Subject: [PATCH 2/3] Fix typo in react compiler blog post date (#8091) Fix a small typo --- src/sidebarBlog.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json index 56aa0ee2c..7bcd4a000 100644 --- a/src/sidebarBlog.json +++ b/src/sidebarBlog.json @@ -22,7 +22,7 @@ "title": "React Compiler v1.0", "titleForHomepage": "React Compiler v1.0", "icon": "blog", - "date": "October 8, 2025", + "date": "October 7, 2025", "path": "/blog/2025/10/07/react-compiler-1" }, { From 34babc63db878130086500a67824632a13af6e9a Mon Sep 17 00:00:00 2001 From: anilcanboga Date: Mon, 27 Oct 2025 22:42:40 +0300 Subject: [PATCH 3/3] Sync with react.dev @ 2c7798dc --- src/components/Layout/HomeContent.js | 22 +++++------- src/content/learn/thinking-in-react.md | 15 ++++---- .../learn/understanding-your-ui-as-a-tree.md | 10 +++--- src/content/reference/react/Suspense.md | 8 ++--- src/content/reference/react/apis.md | 7 ++-- src/content/reference/react/components.md | 22 ++++-------- src/content/reference/react/use.md | 35 ++++++------------- src/content/reference/react/useCallback.md | 14 +++----- src/content/reference/react/useRef.md | 6 +--- .../reference/rsc/server-components.md | 9 ----- 10 files changed, 47 insertions(+), 101 deletions(-) diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index d7b12b7ba..b70ab9180 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -247,20 +247,14 @@ 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. ->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72 + React bir kütüphanedir. Bileşenleri bir araya getirmenizi sağlar, + ancak yönlendirme (routing) ve veri çekme (data fetching) + işlemlerini nasıl yapmanız gerektiğini belirlemez. React ile tam + bir uygulama oluşturmak için, tam yığın (full-stack) React + framework’ü olarak + Next.js veya{' '} + React Router{' '} + kullanmanızı öneririz.
diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 170934548..447cfff7e 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -37,15 +37,12 @@ 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. ->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72 +* **Programlama** — Yeni bir fonksiyon veya nesne oluşturup oluşturmamaya karar verirken aynı teknikleri kullanın. + Bu tekniklerden biri [separation of concerns](https://en.wikipedia.org/wiki/Separation_of_concerns) (sorumlulukların ayrımı) ilkesidir; yani bir bileşen ideal olarak yalnızca tek bir işle ilgilenmelidir. + Eğer bileşen büyürse, daha küçük alt bileşenlere (subcomponents) bölünmelidir. +* **CSS** — Hangi yapılar için class selector tanımlayacağınızı düşünün. + (Ancak bileşenler CSS sınıflarına göre biraz daha az ayrıntılıdır.) +* **Tasarım** — Tasarımın katmanlarını nasıl organize edeceğinizi göz önünde bulundurun. 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 7050f2ad3..78aeb4bb3 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -20,11 +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. ->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72 +Ağaçlar (Trees), öğeler arasındaki ilişkileri modelleyen yapılardır. +Kullanıcı arayüzü (UI) genellikle ağaç yapıları kullanılarak temsil edilir. +Örneğin, tarayıcılar HTML’yi [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) +ve CSS’i [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) ile modellemek için ağaç yapıları kullanır. +Mobil platformlar da kendi **görünüm hiyerarşilerini (view hierarchy)** temsil etmek için ağaç yapılarından yararlanır. diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md index 4762abd7e..cbe323929 100644 --- a/src/content/reference/react/Suspense.md +++ b/src/content/reference/react/Suspense.md @@ -2009,11 +2009,9 @@ 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. ->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72 +İstemci tarafında (client), React aynı bileşeni yeniden render etmeye çalışır. +Eğer istemci tarafında da hata oluşursa, React bu hatayı fırlatır (**throw**) ve en yakın [Error Boundary](/reference/react/Component#static-getderivedstatefromerror) bileşenini gösterir. Ancak, istemci tarafında hata oluşmazsa, React kullanıcıya hatayı göstermez; +çünkü içerik sonuçta başarılı bir şekilde görüntülenmiştir. 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 44d88edb2..e75b28d15 100644 --- a/src/content/reference/react/apis.md +++ b/src/content/reference/react/apis.md @@ -4,11 +4,8 @@ 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. ->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72 +[Hooks](/reference/react/hooks) ve [Components](/reference/react/components)’e ek olarak, +`react` paketi bileşen tanımlamak için faydalı birkaç başka API daha dışa aktarır (**export eder**). Bu sayfa, modern React API’lerinin geri kalanını listeler. diff --git a/src/content/reference/react/components.md b/src/content/reference/react/components.md index 5628956fe..8ac5d2286 100644 --- a/src/content/reference/react/components.md +++ b/src/content/reference/react/components.md @@ -10,21 +10,13 @@ React, JSX'lerinizde kullanabileceğiniz birkaç yerleşik bileşeni sunar. --- -<<<<<<< HEAD -## Yerleşik react bileşenleri {/*built-in-components*/} -* [``](/reference/react/Fragment) bileşeni, alternatif olarak `<>...` şeklinde yazılır ve birden fazla JSX düğümünü bir araya getirmenize olanak tanır. -* [``](/reference/react/Profiler) bileşeni, bir React ağacının render performansını programlama yoluyla ölçmenizi sağlar. -* [``](/reference/react/Suspense) bileşeni, alt bileşenler yüklenirken bir yedek içerik görüntülemenizi sağlar. -* [``](/reference/react/StrictMode) bileşeni, hataları erken tespit etmenize yardımcı olan ekstra kontrolleri gerçekleştirir. Yalnızca geliştirme ortamında geçerlidir. -======= -## Built-in components {/*built-in-components*/} - -* [``](/reference/react/Fragment), alternatively written as `<>...`, lets you group multiple JSX nodes together. -* [``](/reference/react/Profiler) lets you measure rendering performance of a React tree programmatically. -* [``](/reference/react/Suspense) lets you display a fallback while the child components are loading. -* [``](/reference/react/StrictMode) enables extra development-only checks that help you find bugs early. -* [``](/reference/react/Activity) lets you hide and restore the UI and internal state of its children. ->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72 +## Yerleşik Bileşenler (Built-in components) {/*built-in-components*/} + +* [``](/reference/react/Fragment), alternatif olarak `<>...` şeklinde yazılabilir, birden fazla JSX düğümünü bir arada gruplamanızı sağlar. +* [``](/reference/react/Profiler), bir React ağacının render performansını programatik olarak ölçmenizi sağlar. +* [``](/reference/react/Suspense), alt bileşenler yüklenirken bir **fallback** içerik göstermeyi sağlar. +* [``](/reference/react/StrictMode), hataları erken bulmanıza yardımcı olan yalnızca geliştirme sırasında çalışan ekstra kontrolleri etkinleştirir. +* [``](/reference/react/Activity), çocuklarının kullanıcı arayüzünü (UI) ve iç durumunu gizlemenizi ve geri yüklemenizi sağlar. --- diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index c781c02fb..5986418e1 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -34,11 +34,7 @@ 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. ->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72 +Bir Promise ile çağrıldığında, `use` API’si [`Suspense`](/reference/react/Suspense) ve [Error Boundaries](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) ile entegre çalışır. `use` çağrısı yapan bileşen, `use` fonksiyonuna iletilen Promise beklemede (**pending**) olduğu sürece *askıya alınır* (**suspend olur**). Eğer bu bileşen bir Suspense boundary içine sarılmışsa, fallback içerik gösterilir. Promise çözümlendiğinde (**resolved**), Suspense fallback kaldırılır ve `use` API’si tarafından döndürülen veriyi kullanan bileşenler render edilir. Eğer `use` fonksiyonuna iletilen Promise reddedilirse (**rejected**), en yakın Error Boundary’nin fallback içeriği gösterilir. #### Parametreler {/*parameters*/} @@ -324,27 +320,18 @@ 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) ->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72 +1. [Error Boundary ile kullanıcılara hata gösterme](#displaying-an-error-to-users-with-error-boundary) +2. [`Promise.catch` ile alternatif değer sağlama](#providing-an-alternative-value-with-promise-catch) `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*/} +#### Error Boundary ile kullanıcılara hata gösterme {/*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. ->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72 +Bir Promise reddedildiğinde kullanıcıya hata göstermek istiyorsanız, [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) kullanabilirsiniz. +Error Boundary kullanmak için, `use` API’sini çağırdığınız bileşeni bir Error Boundary ile sarın. +Eğer `use` fonksiyonuna iletilen Promise reddedilirse, Error Boundary için tanımlanan fallback içerik görüntülenecektir. @@ -455,11 +442,9 @@ 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). ->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72 +Ya `use` fonksiyonunu bir **React Component** veya **Hook** fonksiyonu dışında çağırıyorsunuz, +ya da `use`’u bir **try–catch** bloğu içinde çağırıyorsunuz. Eğer `use`’u bir try–catch bloğu içinde çağırıyorsanız, bileşeninizi bir **Error Boundary** ile sarın, +veya Promise’in `catch` metodunu kullanarak hatayı yakalayın ve Promise’i başka bir değerle çözümleyin (**resolve edin**). [Bu örneklere bakın](#dealing-with-rejected-promises). 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 6d6b526c2..bb0173588 100644 --- a/src/content/reference/react/useCallback.md +++ b/src/content/reference/react/useCallback.md @@ -235,15 +235,11 @@ 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. ->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72 +1. Bir bileşen diğer bileşenleri görsel olarak sarıyorsa, onun [JSX’i children olarak kabul etmesine](/learn/passing-props-to-a-component#passing-jsx-as-children) izin verin. Böylece, sarmalayan bileşen kendi state’ini güncellediğinde, React çocuk bileşenlerin yeniden render edilmesine gerek olmadığını bilir. +2. Yerel (local) state kullanmayı tercih edin ve [state’i yukarı taşımayı (lift state up)](/learn/sharing-state-between-components) sadece gerektiği kadar yapın. Formlar veya bir öğenin hover durumu gibi geçici (transient) state’leri ağacınızın en üstünde veya global state kütüphanesinde tutmayın. +3. [Render mantığınızı saf (pure) tutun.](/learn/keeping-components-pure) Eğer bir bileşeni yeniden render etmek sorun yaratıyor veya göze çarpan bir görsel bozulma oluşturuyorsa, bu bileşeninizde bir hatadır! Hatayı düzeltin, memoization eklemeye çalışmayın. +4. [State’i güncelleyen gereksiz Effect’lerden](/learn/you-might-not-need-an-effect) kaçının. React uygulamalarındaki çoğu performans problemi, Effect’lerden kaynaklanan ve bileşenlerin tekrar tekrar render edilmesine neden olan güncelleme zincirlerinden oluşur. +5. Effect’lerinizden [gereksiz bağımlılıkları kaldırmaya](/learn/removing-effect-dependencies) çalışın. Örneğin, memoization yerine bazı obje veya fonksiyonları Effect’in içine veya bileşenin dışına taşımak çoğu zaman daha basittir. 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 832da0561..4fe4b84dd 100644 --- a/src/content/reference/react/useRef.md +++ b/src/content/reference/react/useRef.md @@ -575,11 +575,7 @@ 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: ->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72 +Daha sonra, bileşeninizin kabul ettiği prop’lar listesine `ref` ekleyin ve `ref`’i ilgili çocuk [yerleşik bileşene (built-in component)](/reference/react-dom/components/common) prop olarak iletin, şöyle: ```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 0c2bbd0a9..7f236f3f5 100644 --- a/src/content/reference/rsc/server-components.md +++ b/src/content/reference/rsc/server-components.md @@ -2,15 +2,6 @@ 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. - - - -======= ->>>>>>> 2c7798dcc51fbd07ebe41f49e5ded4839a029f72 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.