-
Notifications
You must be signed in to change notification settings - Fork 45.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: Eager bailout when calling the state setter function multiple times #28725
Comments
My general assumption here would be:
|
Thank you for your comment. It is helpful to understand. However, I'm still having trouble understanding this specific case: const [number, setNumber] = useState(0);
const handleClick = () => {
setNumber(3);
} In this code, when the button is clicked for the first time, both the parent and child components are rendered (as expected). Then, on the second click, only the parent component is rendered. And from the third click on, no components are rendered. This part is very confusing for me in understanding eager bailouts. (I tried to understand it by reading your posts, and it was very helpful, but I'm still having trouble.) |
I've tried to trace the internals of the early bailout logic a couple times. Tbh it's really complicated, and I don't remember the exact details. Based on that behavior description, here's my best guess at what happens:
|
Thank you so much for the detailed explanation! It was really difficult to understand the internal logic by tracing the implementation code, but now I understand it. |
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment! |
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you! |
I understand from several issues (#20817 #28287) that React implements an eager bailout for state updates to optimize performance. So I ran some tests with simple examples, and I had some questions about calling the state setter function multiple times for a single event. Below is a detailed explanation of that.
React version: 18.0.0
Steps To Reproduce
useState
hook:setCount
multiple times:Link to code example: CodeSandbox
The current behavior
The two cases behaved differently when the button was clicked. In the first case, the parent component did not render at all, and of course, its child components did not render either. In contrast, in the second case, only the component rendered. (Child components did not render.)
I'm wondering why the parent component re-renders in the second case when the state is eventually set to 0 (to initial state). Does the parent component have to start the rendering process to figure out if it can quit early? Why?
The expected behavior
Since React batches updates for an event, it seems to be more efficient to compare only the last update and the previous state? In other words, shouldn't it be possible to avoid re-rendering the parent component for the second case as well?
My understanding of the internally implemented code might be incomplete, so please let me know if there are any errors or misunderstandings in my explanation.
The text was updated successfully, but these errors were encountered: