Skip to content

Commit 7d50c3f

Browse files
Emphasize the second problem paragraph with chain of effects example (#7108)
* Emphasize the second problem acapit with chain of effects example * Replace 'One' with 'First' to keep problems counting consistent
1 parent b5f28b4 commit 7d50c3f

File tree

1 file changed

+2
-2
lines changed

1 file changed

+2
-2
lines changed

src/content/learn/you-might-not-need-an-effect.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -408,9 +408,9 @@ function Game() {
408408
409409
There are two problems with this code.
410410
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.
412412
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.
414414
415415
In this case, it's better to calculate what you can during rendering, and adjust the state in the event handler:
416416

0 commit comments

Comments
 (0)