Sync with react.dev @ ebc45f5 (#644)

* Next Channel -> Canary Channel (#5992)

See facebook/react#26761 for more context.

* Canaries blog post

* Revert "Canaries blog post"

This reverts commit aa88d8a.

* Fixes grammar (#5967)

* Canaries blog post (#5993)

* Revert "Revert "Canaries blog post""

This reverts commit 9a865fd.

* words

---------

Co-authored-by: Sophie Alpert <git@sophiebits.com>

* tweak

* renderToReadableStream => renders a readable web stream (and not a Node.js stream) (#6001)

* Update Profiler.md (#6000)

* remove cancelled conference 2023 (#5999)

* Minor tweak to remove implication that mounting can happen only once (#6003)

Mounting with Suspense and Offscreen can happen multiple times. This removes some wording that implies a that effects / lifecycle hooks only happen on first mount.

* Conditionally render offset div (#5997)

Otherwise the address is being offset to the right when the refresh icon is not displayed

* Remove unnecessary backticks breaking markdown highlighting (#6025)

* resolve sync conflcit

---------

Co-authored-by: Andrew Clark <git@andrewclark.io>
Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
Co-authored-by: Elton Maiyo <lt.eltronix@gmail.com>
Co-authored-by: Sophie Alpert <git@sophiebits.com>
Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
Co-authored-by: declval <123750459+declval@users.noreply.github.com>
Co-authored-by: Hernani Fernandes <hernanif1@gmail.com>
Co-authored-by: Jan Kassens <jan@kassens.net>
Co-authored-by: Sami Romdhana <64911368+sami-romdhana@users.noreply.github.com>
Co-authored-by: Viacheslav Makarov <9768704+mekarthedev@users.noreply.github.com>
Co-authored-by: eomttt <hyunt0413@gmail.com>

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

@@ -882,7 +882,7 @@ const options2 = { serverUrl: 'https://localhost:1234', roomId: 'music' };
 
 // These are two different objects!
 console.log(Object.is(options1, options2)); // false
-````
+```
 
 **Object and function dependencies can make your Effect re-synchronize more often than you need.** 
 
@@ -968,7 +968,7 @@ const roomId2 = 'music';
 
 // These two strings are the same!
 console.log(Object.is(roomId1, roomId2)); // true
-````
+```
 
 Thanks to this fix, the chat no longer re-connects if you edit the input:
 

src/content/learn/separating-events-from-effects.md

@@ -239,7 +239,7 @@ function ChatRoom({ roomId, theme }) {
     });
     connection.connect();
     // ...
-````
+```
 
 However, `theme` is a reactive value (it can change as a result of re-rendering), and [every reactive value read by an Effect must be declared as its dependency.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) Now you have to specify `theme` as a dependency of your Effect:
 
@@ -256,7 +256,7 @@ function ChatRoom({ roomId, theme }) {
     };
   }, [roomId, theme]); // ✅ All dependencies declared
   // ...
-````
+```
 
 Play with this example and see if you can spot the problem with this user experience:
 
@@ -416,7 +416,7 @@ function ChatRoom({ roomId, theme }) {
     showNotification('Connected!', theme);
   });
   // ...
-````
+```
 
 Here, `onConnected` is called an *Effect Event.* It's a part of your Effect logic, but it behaves a lot more like an event handler. The logic inside it is not reactive, and it always "sees" the latest values of your props and state.
 

src/content/learn/state-as-a-snapshot.md

@@ -327,7 +327,7 @@ label, textarea { margin-bottom: 10px; display: block; }
 
 #### 신호등을 구현해봅시다 {/*implement-a-traffic-light*/}
 
-다음은 버튼을 눌렀을 때 켜지는 횡단보도 조명 컴포넌트입니다.
+다음은 버튼을 토글되는 신호등 컴포넌트입니다.
 
 <Sandpack>
 

src/content/learn/updating-objects-in-state.md

@@ -184,7 +184,7 @@ const nextPosition = {};
 nextPosition.x = e.clientX;
 nextPosition.y = e.clientY;
 setPosition(nextPosition);
-````
+```
 
 위 코드는 아래처럼 작성할 수 있습니다.
 

src/content/reference/react-dom/client/createRoot.md

@@ -133,7 +133,7 @@ import { createRoot } from 'react-dom/client';
 
 const root = createRoot(document.getElementById('root'));
 root.render(<App />);
-````
+```
 
 Usually, you only need to run this code once at startup. It will:
 
@@ -395,7 +395,7 @@ root.render(App);
 
 // ✅ Correct: <App /> is a component.
 root.render(<App />);
-````
+```
 
 Or if you pass a function to `root.render`, instead of the result of calling it:
 

src/content/reference/react-dom/client/hydrateRoot.md

@@ -124,7 +124,7 @@ root.unmount();
 import { hydrateRoot } from 'react-dom/client';
 
 hydrateRoot(document.getElementById('root'), <App />);
-````
+```
 
 위 코드를 통해 서버 HTML을 <CodeStep step={1}>브라우저 DOM node</CodeStep>에서 <CodeStep step={2}>리액트 컴포넌트</CodeStep>를 이용해 hydrate 해줄 것 입니다. 주로 앱을 시작할 때 단 한 번 실행하게 될 것입니다. 프레임워크를 사용중이라면 프레임워크가 알아서 실행해 줄 것입니다.
 

src/content/reference/react-dom/hydrate.md

@@ -68,7 +68,7 @@ Call `hydrate` to attach a <CodeStep step={1}>React component</CodeStep> into a
 import { hydrate } from 'react-dom';
 
 hydrate(<App />, document.getElementById('root'));
-````
+```
 
 Using `hydrate()` to render a client-only app (an app without server-rendered HTML) is not supported. Use [`render()`](/reference/react-dom/render) (in React 17 and below) or [`createRoot()`](/reference/react-dom/client/createRoot) (in React 18+) instead.
 

src/content/reference/react-dom/render.md

@@ -77,7 +77,7 @@ import { render } from 'react-dom';
 import App from './App.js';
 
 render(<App />, document.getElementById('root'));
-````
+```
 
 ### 최상단 컴포넌트 렌더링하기 {/*rendering-the-root-component*/}
 

src/content/reference/react-dom/unmountComponentAtNode.md

@@ -64,7 +64,7 @@ render(<App />, rootNode);
 
 // ...
 unmountComponentAtNode(rootNode);
-````
+```
 
 
 ### Removing a React app from a DOM element {/*removing-a-react-app-from-a-dom-element*/}

src/content/reference/react/cloneElement.md

@@ -427,7 +427,7 @@ With this approach, `Row` does not need to receive an `isHighlighted` prop at al
 export default function Row({ title }) {
   const isHighlighted = useContext(HighlightContext);
   // ...
-````
+```
 
 This allows the calling component to not know or worry about passing `isHighlighted` to `<Row>`:
 

src/content/reference/react/createContext.md

@@ -166,7 +166,7 @@ import { createContext } from 'react';
 
 export const ThemeContext = createContext('light');
 export const AuthContext = createContext(null);
-````
+```
 
 Components declared in other files can then use the [`import`](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/import) statement to read or provide this context:
 

src/content/reference/react/useEffect.md

@@ -531,7 +531,7 @@ function ChatRoom({ roomId }) {
     serverUrl: serverUrl
   });
   // ...
-````
+```
 
 There are also many excellent custom Hooks for every purpose available in the React ecosystem.