fix: useSelector usage in logistration and login component #1203
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## attiya/VAN-1810 #1203 +/- ##
===================================================
+ Coverage 84.22% 84.37% +0.14%
===================================================
Files 126 125 -1
Lines 2384 2387 +3
Branches 677 677
===================================================
+ Hits 2008 2014 +6
+ Misses 356 353 -3
Partials 20 20 ☔ View full report in Codecov by Sentry. |
| const backedUpFormData = useSelector(state => state.login.loginFormData); | ||
| const loginErrorCode = useSelector(state => state.login.loginErrorCode); | ||
| const loginErrorContext = useSelector(state => state.login.loginErrorContext); | ||
| const loginResult = useSelector(state => state.login.loginResult); | ||
| const shouldBackupState = useSelector(state => state.login.shouldBackupState); | ||
| const showResetPasswordSuccessBanner = useSelector(state => state.login.showResetPasswordSuccessBanner); | ||
| const submitState = useSelector(state => state.login.submitState); |
There was a problem hiding this comment.
Have you noticed a decrease in rerendering the login component by granular selector state?
There was a problem hiding this comment.
There was an extra render of login component which was actually being caused by the re-rendering of its parent component (Logistration).
Logistration was subscribed to register reducer thus a change in register redux state was causing the Logistration hence the Login component to re-render.
By making the useSelectors granular in both components removed that extra render being caused by register store change.
syedsajjadkazmii
changed the title
Description
Optimization PR: This PR enhances the usage of useSelector in the Login and Logistration components, adhering to best practices. By doing so, it reduces unnecessary renders in these components, leading to improved performance.
Docs: Selectors should be as granular as possible
Reference: https://react-redux.js.org/api/hooks
JIRA
VAN-1866
How Has This Been Tested?
Locally