-
Notifications
You must be signed in to change notification settings - Fork 2
fix: FIx react act warnings #103
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
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #103 +/- ##
=======================================
Coverage 99.21% 99.21%
=======================================
Files 27 27
Lines 634 636 +2
Branches 171 169 -2
=======================================
+ Hits 629 631 +2
Misses 5 5 ☔ View full report in Codecov by Sentry. |
src/internal/visual-mode/index.ts
Outdated
* References: https://www.reddit.com/r/reactjs/comments/1ej505e/why_does_it_rerender_even_when_state_is_same/#:~:text=If%20the%20new%20value%20you,shouldn't%20affect%20your%20code | ||
*/ | ||
if (newValue !== value) { | ||
setValue(isMotionDisabled(node)); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
setValue(isMotionDisabled(node)); | |
setValue(newValue); |
you do not need to query the DOM second time
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good call, I missed that for some reason. Updated the code.
When using test utils in some of our components we get react act warnings, an example of a utility that does that is inside the Autosuggest wrapper
wrapper.findAutosuggest().openDrawer()
.This happens in all of the components that changes a state like opening a drawer, closing a drawer, or doing an action that will create a transitition effect. The logs of that act warnings:
When looking closely, we can notice that the warning is emitted from the setValue state inside the
useReducedMotion
effect, this is because React does a re-render phase even if the value is the same which is an unexpected behavior.So for example, if the initial value of the hook is false, and the mutation observer triggered another callback with another value of false, React will reredner the component using that hook, which is the Transition component.
Any following set states with the same value will cause no rerenders in React, this behavior is disccused in great detail in this thread:
https://www.reddit.com/r/reactjs/comments/1ej505e/comment/lths0uh/
To have a resolution, we can manually not update any state if the previous value and the current value is equal inside the hook, this will by defailt fix all of the act warnings stemming from the Transition component.
The solution here might not be ideal, but this is an internal behavior. Following up, I will create an issue with a reproduicble example to the React team and link it here for future work (if needed).