mirror of https://github.com/jetkvm/kvm.git
64 lines
2.5 KiB
Markdown
64 lines
2.5 KiB
Markdown
# 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:
|
|
|
|
1. **In the `onModalClose` callback** - checking if the current path is not "/other-session"
|
|
2. **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 on `location.pathname`
|
|
- This caused re-renders whenever the location changed
|
|
|
|
**After:**
|
|
- Created a `createConnectionStatusElement` helper function that accepts `pathname` 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:**
|
|
```javascript
|
|
const onModalClose = useCallback(() => {
|
|
if (location.pathname !== "/other-session") navigateTo("/");
|
|
}, [navigateTo, location.pathname]);
|
|
```
|
|
|
|
**After:**
|
|
```javascript
|
|
const onModalClose = useCallback(() => {
|
|
// Get the current pathname without useLocation
|
|
const currentPathname = window.location.pathname;
|
|
if (currentPathname !== "/other-session") navigateTo("/");
|
|
}, [navigateTo]);
|
|
```
|
|
|
|
## Benefits
|
|
|
|
1. **Prevents Unnecessary Re-renders**: The component no longer re-renders when nested routes change location
|
|
2. **Maintains Same Functionality**: All existing behavior is preserved
|
|
3. **Performance Improvement**: By removing the React Router location dependency, the component only re-renders when its own state or props change
|
|
4. **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. |