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>
78 lines
2.0 KiB
JavaScript
78 lines
2.0 KiB
JavaScript
import react from '@vitejs/plugin-react-swc'
|
|
import { defineConfig } from 'vite'
|
|
import { VitePWA } from 'vite-plugin-pwa'
|
|
// https://vitejs.dev/config/
|
|
export default defineConfig({
|
|
plugins: [
|
|
react(),
|
|
VitePWA({
|
|
registerType: 'prompt',
|
|
includeAssets: [
|
|
'favicon.ico',
|
|
'robots.txt',
|
|
'apple-touch-icon.png',
|
|
'safari-pinned-tab.svg',
|
|
'mstile-150x150.png',
|
|
],
|
|
injectManifest: {
|
|
globPatterns: ['**/*.{js,css,html,png,svg}'],
|
|
globIgnores: ['index.html'],
|
|
},
|
|
manifest: {
|
|
name: 'Donetick: Simplify Tasks & Chores, Together.',
|
|
short_name: 'Donetick',
|
|
icons: [
|
|
{
|
|
src: '/android-chrome-192x192.png',
|
|
sizes: '192x192',
|
|
type: 'image/png',
|
|
},
|
|
{
|
|
src: '/android-chrome-512x512.png',
|
|
sizes: '512x512',
|
|
type: 'image/png',
|
|
},
|
|
{
|
|
src: 'pwa-64x64.png',
|
|
sizes: '64x64',
|
|
type: 'image/png',
|
|
},
|
|
{
|
|
src: 'pwa-192x192.png',
|
|
sizes: '192x192',
|
|
type: 'image/png',
|
|
},
|
|
{
|
|
src: 'pwa-512x512.png',
|
|
sizes: '512x512',
|
|
type: 'image/png',
|
|
},
|
|
{
|
|
src: 'maskable-icon-512x512.png',
|
|
sizes: '512x512',
|
|
type: 'image/png',
|
|
purpose: 'maskable',
|
|
},
|
|
],
|
|
theme_color: '#ffffff',
|
|
background_color: '#ffffff',
|
|
display: 'standalone',
|
|
},
|
|
workbox: {
|
|
skipWaiting: true, // Force the waiting service worker to become the active service worker
|
|
clientsClaim: true, // Take control of uncontrolled clients as soon as the service worker becomes active
|
|
maximumFileSizeToCacheInBytes: 6000000, // 6MB
|
|
},
|
|
}),
|
|
],
|
|
|
|
resolve: {
|
|
alias: [
|
|
{
|
|
find: '@',
|
|
replacement: '/src',
|
|
},
|
|
],
|
|
},
|
|
})
|