Sync with react.dev @ ebc45f56

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/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

@@ -127,7 +127,7 @@ If your app's HTML was generated by [`react-dom/server`](/reference/react-dom/cl
 import { hydrateRoot } from 'react-dom/client';
 
 hydrateRoot(document.getElementById('root'), <App />);
-````
+```
 
 This will hydrate the server HTML inside the <CodeStep step={1}>browser DOM node</CodeStep> with the <CodeStep step={2}>React component</CodeStep> for your app. Usually, you will do it once at startup. If you use a framework, it might do this behind the scenes for you.
 

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 {/*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.