Emphasize the second problem paragraph with chain of effects example #7108
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
| 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. | ||
| 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. | ||
| 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. |
There was a problem hiding this comment.
Im not sure why, but I feel we should address this as next problem instead of second problem? or change the One problem to first problem?
There was a problem hiding this comment.
Thanks!
I followed the There are two problems with this code. at the beginning, thinking that sticking to "counting" will feel consistent.
I would lean toward changing the One problem to First problem, like you suggested, so let me know if we want to go that direction?
There was a problem hiding this comment.
Alright, thanks for the review, @harish-sethuraman!
| There are two problems with this code. | ||
| 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. | ||
| 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. |
There was a problem hiding this comment.
(this is not quite grammatical; it should be “The first problem”)
There was a problem hiding this comment.
updated #7169 :)
4 participants
This pull request quickly fixes #7069
It starts the paragraph describing second problem of chaining effects example with "The second problem", so that it's more emphasized to the reader that the description is there.