Skip to content

Commit 57654a1

Browse files
merging all conflicts
2 parents 89ea698 + 49c2d26 commit 57654a1

34 files changed

+466
-138
lines changed

src/components/Layout/Sidebar/SidebarLink.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ interface SidebarLinkProps {
2424
selected?: boolean;
2525
title: string;
2626
level: number;
27-
version?: 'canary' | 'major' | 'experimental';
27+
version?: 'canary' | 'major' | 'experimental' | 'rc';
2828
icon?: React.ReactNode;
2929
isExpanded?: boolean;
3030
hideArrow?: boolean;
@@ -102,6 +102,12 @@ export function SidebarLink({
102102
className="ms-1 text-gray-30 dark:text-gray-60 inline-block w-3.5 h-3.5 align-[-3px]"
103103
/>
104104
)}
105+
{version === 'rc' && (
106+
<IconCanary
107+
title=" - This feature is available in the latest RC version"
108+
className="ms-1 text-gray-30 dark:text-gray-60 inline-block w-3.5 h-3.5 align-[-3px]"
109+
/>
110+
)}
105111
</div>
106112

107113
{isExpanded != null && !hideArrow && (

src/components/MDX/ExpandableCallout.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ type CalloutVariants =
2424
| 'wip'
2525
| 'canary'
2626
| 'experimental'
27+
| 'rc'
2728
| 'major'
2829
| 'rsc';
2930

@@ -50,6 +51,15 @@ const variantMap = {
5051
overlayGradient:
5152
'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
5253
},
54+
rc: {
55+
title: 'RC',
56+
Icon: IconCanary,
57+
containerClasses:
58+
'bg-gray-5 dark:bg-gray-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg',
59+
textColor: 'text-gray-60 dark:text-gray-30',
60+
overlayGradient:
61+
'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
62+
},
5363
canary: {
5464
title: 'Test Ortamı (Canary)',
5565
Icon: IconCanary,

src/components/MDX/MDXComponents.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,10 @@ const Canary = ({children}: {children: React.ReactNode}) => (
106106
<ExpandableCallout type="canary">{children}</ExpandableCallout>
107107
);
108108

109+
const RC = ({children}: {children: React.ReactNode}) => (
110+
<ExpandableCallout type="rc">{children}</ExpandableCallout>
111+
);
112+
109113
const Experimental = ({children}: {children: React.ReactNode}) => (
110114
<ExpandableCallout type="experimental">{children}</ExpandableCallout>
111115
);
@@ -533,6 +537,7 @@ export const MDXComponents = {
533537
Math,
534538
MathI,
535539
Note,
540+
RC,
536541
Canary,
537542
Experimental,
538543
ExperimentalBadge,

src/components/PageHeading.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {IconExperimental} from './Icon/IconExperimental';
1919

2020
interface PageHeadingProps {
2121
title: string;
22-
version?: 'experimental' | 'canary';
22+
version?: 'experimental' | 'canary' | 'rc';
2323
experimental?: boolean;
2424
status?: string;
2525
description?: string;
@@ -46,6 +46,12 @@ function PageHeading({
4646
className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
4747
/>
4848
)}
49+
{version === 'rc' && (
50+
<IconCanary
51+
title=" - This feature is available in the latest RC version"
52+
className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
53+
/>
54+
)}
4955
{version === 'experimental' && (
5056
<IconExperimental
5157
title=" - This feature is available in the latest Experimental version of React"

src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14303,7 +14303,7 @@ useEffect(() => {
1430314303
}); // compiler inserted dependencies.
1430414304
```
1430514305

14306-
With this code, the React Compiler can infer the dependencies for you and insert them automatically so you don't need to see or write them. With features like [the IDE extension](#compiler-ide-extension) and [`useEffectEvent`](/reference/react/experimental_useEffectEvent), we can provide a CodeLens to show you what the Compiler inserted for times you need to debug, or to optimize by removing a dependency. This helps reinforce the correct mental model for writing Effects, which can run at any time to synchronize your component or hook's state with something else.
14306+
With this code, the React Compiler can infer the dependencies for you and insert them automatically so you don't need to see or write them. With features like [the IDE extension](#compiler-ide-extension) and [`useEffectEvent`](/reference/react/useEffectEvent), we can provide a CodeLens to show you what the Compiler inserted for times you need to debug, or to optimize by removing a dependency. This helps reinforce the correct mental model for writing Effects, which can run at any time to synchronize your component or hook's state with something else.
1430714307

1430814308
Our hope is that automatically inserting dependencies is not only easier to write, but that it also makes them easier to understand by forcing you to think in terms of what the Effect does, and not in component lifecycles.
1430914309

src/content/learn/escape-hatches.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -455,8 +455,8 @@ Bu ideal değildir. Sohbete yalnızca `roomId` değiştiğinde tekrar bağlanmak
455455
```json package.json hidden
456456
{
457457
"dependencies": {
458-
"react": "experimental",
459-
"react-dom": "experimental",
458+
"react": "canary",
459+
"react-dom": "canary",
460460
"react-scripts": "latest",
461461
"toastify-js": "1.12.0"
462462
},
@@ -471,7 +471,7 @@ Bu ideal değildir. Sohbete yalnızca `roomId` değiştiğinde tekrar bağlanmak
471471

472472
```js
473473
import { useState, useEffect } from 'react';
474-
import { experimental_useEffectEvent as useEffectEvent } from 'react';
474+
import { useEffectEvent } from 'react';
475475
import { createConnection, sendMessage } from './chat.js';
476476
import { showNotification } from './notifications.js';
477477

src/content/learn/removing-effect-dependencies.md

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -610,11 +610,17 @@ function ChatRoom({ roomId }) {
610610
611611
### Bir değeri, değişikliklerine "tepki vermeden" okumak mı istiyorsunuz? {/*do-you-want-to-read-a-value-without-reacting-to-its-changes*/}
612612
613-
<Wip>
613+
<Canary>
614614
615+
<<<<<<< HEAD
615616
Bu bölümde, React'in kararlı bir sürümünde henüz yayınlanmamış **deneysel bir API** açıklanmaktadır.
617+
=======
618+
**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.**
619+
>>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
616620
617-
</Wip>
621+
[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
622+
623+
</Canary>
618624
619625
Kullanıcı yeni bir mesaj aldığında `isMuted` değeri `true` olmadığı sürece bir ses çalmak istediğinizi varsayalım:
620626
@@ -1262,8 +1268,8 @@ Efektin içinde reaktif olmaması gereken bir kod satırı var mı? Reaktif olma
12621268
```json package.json hidden
12631269
{
12641270
"dependencies": {
1265-
"react": "experimental",
1266-
"react-dom": "experimental",
1271+
"react": "canary",
1272+
"react-dom": "canary",
12671273
"react-scripts": "latest"
12681274
},
12691275
"scripts": {
@@ -1277,7 +1283,7 @@ Efektin içinde reaktif olmaması gereken bir kod satırı var mı? Reaktif olma
12771283
12781284
```js
12791285
import { useState, useEffect, useRef } from 'react';
1280-
import { experimental_useEffectEvent as useEffectEvent } from 'react';
1286+
import { useEffectEvent } from 'react';
12811287
import { FadeInAnimation } from './animation.js';
12821288

12831289
function Welcome({ duration }) {
@@ -1389,8 +1395,8 @@ Efektinizin `duration` ın en son değerini okuması gerekir, ancak `duration`da
13891395
```json package.json hidden
13901396
{
13911397
"dependencies": {
1392-
"react": "experimental",
1393-
"react-dom": "experimental",
1398+
"react": "canary",
1399+
"react-dom": "canary",
13941400
"react-scripts": "latest"
13951401
},
13961402
"scripts": {
@@ -1405,7 +1411,7 @@ Efektinizin `duration` ın en son değerini okuması gerekir, ancak `duration`da
14051411
```js
14061412
import { useState, useEffect, useRef } from 'react';
14071413
import { FadeInAnimation } from './animation.js';
1408-
import { experimental_useEffectEvent as useEffectEvent } from 'react';
1414+
import { useEffectEvent } from 'react';
14091415

14101416
function Welcome({ duration }) {
14111417
const ref = useRef(null);
@@ -1825,8 +1831,8 @@ Bu fonksiyonlardan bir diğeri yalnızca içe aktarılan bir API yöntemine baz
18251831
```json package.json hidden
18261832
{
18271833
"dependencies": {
1828-
"react": "experimental",
1829-
"react-dom": "experimental",
1834+
"react": "canary",
1835+
"react-dom": "canary",
18301836
"react-scripts": "latest",
18311837
"toastify-js": "1.12.0"
18321838
},
@@ -1907,7 +1913,7 @@ export default function App() {
19071913

19081914
```js src/ChatRoom.js active
19091915
import { useState, useEffect } from 'react';
1910-
import { experimental_useEffectEvent as useEffectEvent } from 'react';
1916+
import { useEffectEvent } from 'react';
19111917
19121918
export default function ChatRoom({ roomId, createConnection, onMessage }) {
19131919
useEffect(() => {
@@ -2120,8 +2126,8 @@ Sonuç olarak, sohbet yalnızca anlamlı bir şey (`roomId` veya `isEncrypted`)
21202126
```json package.json hidden
21212127
{
21222128
"dependencies": {
2123-
"react": "experimental",
2124-
"react-dom": "experimental",
2129+
"react": "canary",
2130+
"react-dom": "canary",
21252131
"react-scripts": "latest",
21262132
"toastify-js": "1.12.0"
21272133
},
@@ -2189,7 +2195,7 @@ export default function App() {
21892195
21902196
```js src/ChatRoom.js active
21912197
import { useState, useEffect } from 'react';
2192-
import { experimental_useEffectEvent as useEffectEvent } from 'react';
2198+
import { useEffectEvent } from 'react';
21932199
import {
21942200
createEncryptedConnection,
21952201
createUnencryptedConnection,

src/content/learn/reusing-logic-with-custom-hooks.md

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -837,11 +837,17 @@ export default function ChatRoom({ roomId }) {
837837
838838
### Olay yöneticilerini özel Hook'lara geçirme {/*passing-event-handlers-to-custom-hooks*/}
839839
840-
<Wip>
840+
<Canary>
841841
842+
<<<<<<< HEAD
842843
Bu bölüm **henüz kararlı bir sürümde yayınlanmamış olan deneysel bir API'yi** açıklar.
844+
=======
845+
**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.**
846+
>>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
843847
844-
</Wip>
848+
[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
849+
850+
</Canary>
845851
846852
`useChatRoom`'u daha fazla bileşende kullanmaya başladıkça, bileşenlerin onun davranışını özelleştirmesine izin vermek isteyebilirsiniz. Örneğin, şu anda, bir mesaj geldiğinde ne yapılacağının mantığı Hook'un içine sabit kodlanmış durumda:
847853
@@ -985,7 +991,7 @@ export default function ChatRoom({ roomId }) {
985991
986992
```js src/useChatRoom.js
987993
import { useEffect } from 'react';
988-
import { experimental_useEffectEvent as useEffectEvent } from 'react';
994+
import { useEffectEvent } from 'react';
989995
import { createConnection } from './chat.js';
990996
991997
export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
@@ -1070,8 +1076,8 @@ export function showNotification(message, theme = 'dark') {
10701076
```json package.json hidden
10711077
{
10721078
"dependencies": {
1073-
"react": "experimental",
1074-
"react-dom": "experimental",
1079+
"react": "canary",
1080+
"react-dom": "canary",
10751081
"react-scripts": "latest",
10761082
"toastify-js": "1.12.0"
10771083
},
@@ -1668,7 +1674,7 @@ export default function App() {
16681674
16691675
```js src/useFadeIn.js active
16701676
import { useState, useEffect } from 'react';
1671-
import { experimental_useEffectEvent as useEffectEvent } from 'react';
1677+
import { useEffectEvent } from 'react';
16721678
16731679
export function useFadeIn(ref, duration) {
16741680
const [isRunning, setIsRunning] = useState(true);
@@ -1721,8 +1727,8 @@ html, body { min-height: 300px; }
17211727
```json package.json hidden
17221728
{
17231729
"dependencies": {
1724-
"react": "experimental",
1725-
"react-dom": "experimental",
1730+
"react": "canary",
1731+
"react-dom": "canary",
17261732
"react-scripts": "latest"
17271733
},
17281734
"scripts": {
@@ -2216,8 +2222,8 @@ Görünen o ki `useInterval` Hook'unuz argüman olarak bir olay dinleyicisi alı
22162222
```json package.json hidden
22172223
{
22182224
"dependencies": {
2219-
"react": "experimental",
2220-
"react-dom": "experimental",
2225+
"react": "canary",
2226+
"react-dom": "canary",
22212227
"react-scripts": "latest"
22222228
},
22232229
"scripts": {
@@ -2260,7 +2266,7 @@ export function useCounter(delay) {
22602266
22612267
```js src/useInterval.js
22622268
import { useEffect } from 'react';
2263-
import { experimental_useEffectEvent as useEffectEvent } from 'react';
2269+
import { useEffectEvent } from 'react';
22642270

22652271
export function useInterval(onTick, delay) {
22662272
useEffect(() => {
@@ -2287,8 +2293,8 @@ Bu değişiklikle birlikte, her iki interval de beklediğiniz gibi çalışır v
22872293
```json package.json hidden
22882294
{
22892295
"dependencies": {
2290-
"react": "experimental",
2291-
"react-dom": "experimental",
2296+
"react": "canary",
2297+
"react-dom": "canary",
22922298
"react-scripts": "latest"
22932299
},
22942300
"scripts": {
@@ -2332,7 +2338,7 @@ export function useCounter(delay) {
23322338
23332339
```js src/useInterval.js active
23342340
import { useEffect } from 'react';
2335-
import { experimental_useEffectEvent as useEffectEvent } from 'react';
2341+
import { useEffectEvent } from 'react';
23362342

23372343
export function useInterval(callback, delay) {
23382344
const onTick = useEffectEvent(callback);

0 commit comments

Comments
 (0)