Skip to content

Commit

Permalink
Remove unnecessary backticks breaking markdown highlighting (#6025)
Browse files Browse the repository at this point in the history
  • Loading branch information
mekarthedev authored May 12, 2023
1 parent da93812 commit ebc45f5
Show file tree
Hide file tree
Showing 11 changed files with 15 additions and 15 deletions.
4 changes: 2 additions & 2 deletions src/content/learn/removing-effect-dependencies.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.**
Expand Down Expand Up @@ -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:
Expand Down
6 changes: 3 additions & 3 deletions src/content/learn/separating-events-from-effects.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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:
Expand Down Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/updating-objects-in-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ const nextPosition = {};
nextPosition.x = e.clientX;
nextPosition.y = e.clientY;
setPosition(nextPosition);
````
```

In fact, it is completely equivalent to writing this:

Expand Down
4 changes: 2 additions & 2 deletions src/content/reference/react-dom/client/createRoot.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/client/hydrateRoot.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/hydrate.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/render.md
Original file line number Diff line number Diff line change
Expand Up @@ -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*/}
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/unmountComponentAtNode.md
Original file line number Diff line number Diff line change
Expand Up @@ -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*/}
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react/cloneElement.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>`:
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react/createContext.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react/useEffect.md
Original file line number Diff line number Diff line change
Expand Up @@ -531,7 +531,7 @@ function ChatRoom({ roomId }) {
serverUrl: serverUrl
});
// ...
````
```
There are also many excellent custom Hooks for every purpose available in the React ecosystem.
Expand Down

0 comments on commit ebc45f5

Please sign in to comment.