You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/conditional-rendering.md
+16-16Lines changed: 16 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -52,13 +52,13 @@ export default function PackingList() {
52
52
53
53
</Sandpack>
54
54
55
-
Nota che alcuni componenti `Item` hanno la loro prop `isPacked` settata a `true` invece che `false`. Vuoi aggiungere un segno di spunta (✔) agli elementi imballati se `isPacked={true}`.
55
+
Nota che alcuni componenti `Item` hanno la loro prop `isPacked` settata a `true` invece che `false`. Vuoi aggiungere un segno di spunta (✅) agli elementi imballati se `isPacked={true}`.
56
56
57
57
Puoi scrivere questo come un'[istruzione `if`/`else`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) in questo modo:
58
58
59
59
```js
60
60
if (isPacked) {
61
-
return <li className="item">{name} ✔</li>;
61
+
return <li className="item">{name} ✅</li>;
62
62
}
63
63
return <li className="item">{name}</li>;
64
64
```
@@ -70,7 +70,7 @@ Se la prop `isPacked` è `true`, questo codice **ritorna un albero JSX different
70
70
```js
71
71
function Item({ name, isPacked }) {
72
72
if (isPacked) {
73
-
return <li className="item">{name} ✔</li>;
73
+
return <li className="item">{name} ✅</li>;
74
74
}
75
75
return <li className="item">{name}</li>;
76
76
}
@@ -159,7 +159,7 @@ Nella pratica, ritornare `null` da un componente non è comune perché potrebbe
159
159
Nell'esempio precedente, hai controllato quale albero JSX sarebbe stato ritornato dal componente (se presente!). Potresti aver già notato qualche duplicazione nell'output renderizzato:
Copy file name to clipboardExpand all lines: src/content/learn/react-compiler.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -121,7 +121,7 @@ In addition to these docs, we recommend checking the [React Compiler Working Gro
121
121
Prior to installing the compiler, you can first check to see if your codebase is compatible:
122
122
123
123
<TerminalBlock>
124
-
npx react-compiler-healthcheck@latest
124
+
npx react-compiler-healthcheck@experimental
125
125
</TerminalBlock>
126
126
127
127
This script will:
@@ -143,7 +143,7 @@ Found no usage of incompatible libraries.
143
143
React Compiler also powers an eslint plugin. The eslint plugin can be used **independently** of the compiler, meaning you can use the eslint plugin even if you don't use the compiler.
Copy file name to clipboardExpand all lines: src/content/learn/you-might-not-need-an-effect.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -408,9 +408,9 @@ function Game() {
408
408
409
409
There are two problems with this code.
410
410
411
-
One problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below.
411
+
First problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below.
412
412
413
-
Even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Such code is often rigid and fragile.
413
+
The second problem is that even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Such code is often rigid and fragile.
414
414
415
415
In this case, it's better to calculate what you can during rendering, and adjust the state in the event handler:
0 commit comments