mirror of https://github.com/jetkvm/kvm.git
2.5 KiB
2.5 KiB
useLocation() Refactoring Summary
Goal
Remove the useLocation()
hook from /ui/src/routes/devices.$id.tsx
to prevent unnecessary re-renders when nested routes are rendered.
Problem
The useLocation()
hook was being used in two places in the main device component:
- In the
onModalClose
callback - checking if the current path is not "/other-session" - In the
ConnectionStatusElement
useMemo - checking if the current path includes "other-session"
When nested routes rendered, this caused the entire component to re-render due to location changes.
Solution Implemented
1. Removed useLocation() Import and Usage
- Removed
useLocation
from the React Router imports - Removed
const location = useLocation();
from the component
2. Replaced ConnectionStatusElement Logic
Before:
- Used a
useMemo
that depended onlocation.pathname
- This caused re-renders whenever the location changed
After:
- Created a
createConnectionStatusElement
helper function that acceptspathname
as a parameter - Use
window.location.pathname
to get the current path without subscribing to React Router's location changes - This eliminates the dependency on the React Router location state
3. Replaced onModalClose Logic
Before:
const onModalClose = useCallback(() => {
if (location.pathname !== "/other-session") navigateTo("/");
}, [navigateTo, location.pathname]);
After:
const onModalClose = useCallback(() => {
// Get the current pathname without useLocation
const currentPathname = window.location.pathname;
if (currentPathname !== "/other-session") navigateTo("/");
}, [navigateTo]);
Benefits
- Prevents Unnecessary Re-renders: The component no longer re-renders when nested routes change location
- Maintains Same Functionality: All existing behavior is preserved
- Performance Improvement: By removing the React Router location dependency, the component only re-renders when its own state or props change
- Clean Implementation: Uses native
window.location.pathname
instead of React Router's location state for simple pathname checks
Verification
- TypeScript compilation passes without errors
- Build completes successfully
- All functionality is preserved while eliminating the re-render issue
Files Modified
/ui/src/routes/devices.$id.tsx
- Main component refactored to remove useLocation dependency
The refactoring successfully achieves the goal of preventing unnecessary re-renders while maintaining all existing functionality.