Mohamad Tarbin
d28ecb509e
Performance optimization 09 24 ( #6 )
...
* perf: optimize MyChores component performance and fix timer errors
## Fixed Issues
- ✅ Timer error: `Timer '🏁 Main useEffect processing' does not exist`
- ✅ Reduced 1049ms and 613ms message handler violations
- ✅ Fixed 1+ second blank screen before chores display
- ✅ Eliminated multiple redundant `getFilteredChores` calculations
## Performance Optimizations
### 1. Fixed Timer Execution Issue
**Problem**: React strict mode was causing timer mismatch between `console.time` and `console.timeEnd`
**Solution**: Restructured async useEffect to ensure proper timer lifecycle
```javascript
// Before: Timer in async IIFE caused double-execution issues
;(async () => {
console.time('🏁 Main useEffect processing')
// ...
console.timeEnd('🏁 Main useEffect processing')
})()
// After: Proper async function structure
const processEffectAsync = async () => {
// ... async operations
console.timeEnd('🏁 Main useEffect processing')
}
processEffectAsync()
```
### 2. Optimized useState Lazy Initialization
**Problem**: `JSON.parse()` called on every render for state initialization
```javascript
// Before: Expensive operation on each render
const [openChoreSections, setOpenChoreSections] = useState(
JSON.parse(localStorage.getItem('openChoreSections')) || {},
)
// After: Lazy initialization with error handling
const [openChoreSections, setOpenChoreSections] = useState(() => {
try {
return JSON.parse(localStorage.getItem('openChoreSections')) || {}
} catch {
return {}
}
})
```
### 3. Reduced useEffect Dependencies
**Problem**: useEffect running too frequently due to object reference dependencies
```javascript
// Before: Full objects cause frequent re-runs
}, [choresData, membersData, userProfile, impersonatedUser, ...]
// After: Only specific properties that matter
}, [choresData?.res, membersData?.res, userProfile?.id, impersonatedUser?.userId, ...]
```
### 4. Added Memoization for Section Updates
**Problem**: `choreSections` updated even when data hadn't actually changed
```javascript
// Before: Always updating sections
setChoreSections(processedSections)
// After: Only update if data actually changed
setChoreSections(prevSections => {
if (JSON.stringify(prevSections) === JSON.stringify(processedSections)) {
return prevSections
}
return processedSections
})
```
### 5. Optimized localStorage Access
**Problem**: Multiple `localStorage.getItem()` calls and repeated parsing
```javascript
// Before: Multiple localStorage calls
if (localStorage.getItem('openChoreSections') === null) {
// ...localStorage operations
}
// After: Single cached read
const storedSections = localStorage.getItem('openChoreSections')
if (storedSections === null) {
// ...operations
}
```
### 6. Added useMemo/useCallback for Heavy Computations
- `processedChores` - Memoized chore sorting and filtering
- `processedSections` - Memoized section grouping
- `getFilteredChores` - Memoized filtered chore calculations
- `handleChoreUpdated`, `handleChoreDeleted`, `updateChores` - useCallback for stable references
## Performance Results
**Before**: 1+ second loading delay, timer errors, frequent violations
**After**:
- `processedChores calculation: ~0.002ms` (was much slower)
- `processedSections calculation: ~0.001ms` (was much slower)
- `getFilteredChores: ~0.022ms` (down from multiple slow calls)
- `Main useEffect processing: ~0.298ms` (reasonable time)
- `Auto-update sections: ~0.007ms` (very fast)
🚀 Generated with [Claude Code](https://claude.ai/code )
Co-Authored-By: Claude <noreply@anthropic.com >
* chore: update package.json to remove deprecated @vitejs/plugin-react dependency and add wrangler.toml for build configuration
* Revert vite.config.js to it's original state
---------
Co-authored-by: Claude <noreply@anthropic.com >
2025-09-26 02:21:07 -04:00
Mo Tarbin
f27bbd318f
Refactor chore management to use React Query hooks for timer and chore actions
...
- Replaced direct API calls with React Query hooks in ChoreView, ChoreCard, CompactChoreCard, and TimerDetails components for better state management and error handling.
- Updated ArchivedTasks to utilize useUnArchiveChore hook for restoring archived chores.
- Enhanced NotificationSetting to include device registration logic and improved user feedback for push notifications.
- Refactored TimerEditModal and TimerDetails to streamline timer session updates and deletions using hooks.
- Improved ChoreActionMenu to handle archiving and unarchiving chores with hooks.
- Adjusted various components to use getSafeBottomStyles for consistent bottom padding.
- Cleaned up unused imports and optimized loading states across components.
2025-09-21 12:46:03 -04:00
