I've refactored the code to improve code organization, performance, and maintainability. Here are the key changes:
Moved the routes object outside the component function, as it doesn't need to be recreated on each render.
Created a helper function getTabValue that takes a URL path and returns the corresponding tab value from the routes object.
In the component function, the initial value of the value state is set using the getTabValue function with the current URL path.
The handleChange function is memoized using the useCallback hook, and it updates the URL path based on the new tab value.
The useEffect hook uses the history.listen method to update the value state whenever the URL path changes. The getTabValue function is used to get the new tab value based on the updated URL path.
The useEffect hook also returns an unlisten function, which is used to clean up the listener when the component unmounts.
The rest of the component remains the same, rendering the tabs and the corresponding content based on the value state and the URL path.
This refactored version ensures that the tab value and the URL path are always in sync, and it follows best practices for performance and code organization.
Purpose
Solve the bug in #1086
Solution
The main solution implemented is the refactoring of the code as described in the "Description" section. The key aspects of the solution are:
Separating the routes object from the component function to improve performance and prevent unnecessary re-creation.
Creating a helper function getTabValue to centralize the logic for mapping URL paths to tab values.
Using the useCallback hook to memoize the handleChange function and prevent unnecessary re-creations.
Utilizing the history.listen method to keep the value state in sync with the URL path and maintain a consistent user experience.
Returning an unlisten function from the useEffect hook to clean up the listener when the component unmounts, preventing memory leaks.
These changes ensure that the tab value and the URL path are always in sync, while also improving code organization, performance, and maintainability.
Pull Request For Issue #1086
Description
I've refactored the code to improve code organization, performance, and maintainability. Here are the key changes:
routesobject outside the component function, as it doesn't need to be recreated on each render.getTabValuethat takes a URL path and returns the corresponding tab value from theroutesobject.valuestate is set using thegetTabValuefunction with the current URL path.handleChangefunction is memoized using theuseCallbackhook, and it updates the URL path based on the new tab value.useEffecthook uses thehistory.listenmethod to update thevaluestate whenever the URL path changes. ThegetTabValuefunction is used to get the new tab value based on the updated URL path.useEffecthook also returns anunlistenfunction, which is used to clean up the listener when the component unmounts.The rest of the component remains the same, rendering the tabs and the corresponding content based on the
valuestate and the URL path.This refactored version ensures that the tab value and the URL path are always in sync, and it follows best practices for performance and code organization.
Purpose
Solve the bug in #1086
Solution
The main solution implemented is the refactoring of the code as described in the "Description" section. The key aspects of the solution are:
routesobject from the component function to improve performance and prevent unnecessary re-creation.getTabValueto centralize the logic for mapping URL paths to tab values.useCallbackhook to memoize thehandleChangefunction and prevent unnecessary re-creations.history.listenmethod to keep thevaluestate in sync with the URL path and maintain a consistent user experience.unlistenfunction from theuseEffecthook to clean up the listener when the component unmounts, preventing memory leaks.These changes ensure that the tab value and the URL path are always in sync, while also improving code organization, performance, and maintainability.
Screenshots
https://github.com/worknenjoy/gitpay/assets/87583799/85ba495f-4bed-4303-a966-d3e2f4b623ed
Checklist
Related Issues
This pull request addresses the issue #1086.