d28ecb509e
* 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>
3 lines
68 B
TOML
3 lines
68 B
TOML
[build]
|
|
command = "npm run build-cf"
|
|
pages_build_output_dir = "dist" |