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/adding-interactivity.md
+4Lines changed: 4 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -265,7 +265,11 @@ setCount(count + 1); // Richiedi un re-render con 1
265
265
console.log(count); // Ancora 0!
266
266
```
267
267
268
+
<<<<<<< HEAD
268
269
Questo comportamento aiuta a evitare bug difficili da individuare. Ecco una piccola app di messaggistica. Prova a indovinare cosa succede se premi "Send" e *poi* selezioni il destinatario Bob. Quale nome apparirà nell'`alert` cinque secondi dopo?
270
+
=======
271
+
This behavior helps you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later?
Copy file name to clipboardExpand all lines: src/content/learn/conditional-rendering.md
+22-14Lines changed: 22 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -52,13 +52,17 @@ export default function PackingList() {
52
52
53
53
</Sandpack>
54
54
55
+
<<<<<<< HEAD
55
56
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}`.
57
+
=======
58
+
Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✅) to packed items if `isPacked={true}`.
59
+
>>>>>>> 0f2284ddc8dcab8bbb9b42c04f3c7af94b5b2e73
56
60
57
61
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
62
59
63
```js
60
64
if (isPacked) {
61
-
return <li className="item">{name} ✔</li>;
65
+
return <li className="item">{name} ✅</li>;
62
66
}
63
67
return <li className="item">{name}</li>;
64
68
```
@@ -70,7 +74,7 @@ Se la prop `isPacked` è `true`, questo codice **ritorna un albero JSX different
70
74
```js
71
75
function Item({ name, isPacked }) {
72
76
if (isPacked) {
73
-
return <li className="item">{name} ✔</li>;
77
+
return <li className="item">{name} ✅</li>;
74
78
}
75
79
return <li className="item">{name}</li>;
76
80
}
@@ -159,7 +163,7 @@ Nella pratica, ritornare `null` da un componente non è comune perché potrebbe
159
163
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