120 lines
4.1 KiB
Markdown
120 lines
4.1 KiB
Markdown
# Performance Fixes Applied - January 11, 2026
|
|
|
|
## Issues Identified
|
|
|
|
### 1. Infinite Loop in CartContext (CRITICAL)
|
|
|
|
**Problem**: The frontend was making hundreds of `/api/cart` requests per second, causing severe performance degradation.
|
|
|
|
**Root Cause**: In `frontend/src/context/CartContext.js`, the `useEffect` hook had `fetchCart` in its dependency array, but `fetchCart` was recreated on every render, causing an infinite loop.
|
|
|
|
**Solution**:
|
|
|
|
- Wrapped `fetchCart` function with `useCallback` hook to memoize it with proper dependencies
|
|
- This ensures the function is only recreated when `isAuthenticated` or `token` changes
|
|
|
|
### 2. Missing Product Images in Cart Query
|
|
|
|
**Problem**: The backend cart endpoint wasn't preloading product images, causing N+1 query issues.
|
|
|
|
**Solution**:
|
|
|
|
- Updated `/api/cart` endpoint in `backend/server.py` to use `selectinload(CartItem.product).selectinload(Product.images)`
|
|
- This loads all product images in a single query instead of making separate queries for each product
|
|
|
|
### 3. Deprecated FastAPI Event Handlers
|
|
|
|
**Problem**: Backend was using deprecated `@app.on_event("startup")` and `@app.on_event("shutdown")` decorators, causing deprecation warnings.
|
|
|
|
**Solution**:
|
|
|
|
- Migrated to modern lifespan context manager pattern
|
|
- Created `@asynccontextmanager` function that handles startup and shutdown
|
|
- Passed lifespan to FastAPI app initialization
|
|
|
|
## Files Modified
|
|
|
|
### Frontend
|
|
|
|
- **`frontend/src/context/CartContext.js`**
|
|
- Added `useCallback` import
|
|
- Wrapped `fetchCart` with `useCallback` hook
|
|
- Simplified `useEffect` dependencies
|
|
|
|
### Backend
|
|
|
|
- **`backend/server.py`**
|
|
- Added `asynccontextmanager` import
|
|
- Created `lifespan` function for app lifecycle management
|
|
- Updated cart query to preload product images
|
|
- Removed deprecated `@app.on_event` decorators
|
|
- Moved logging configuration before app creation
|
|
|
|
## Performance Improvements
|
|
|
|
### Before Fixes
|
|
|
|
- **Cart Requests**: 100+ requests per second (infinite loop)
|
|
- **Backend Logs**: Flooded with cart requests
|
|
- **Page Load Time**: Extremely slow, site unresponsive
|
|
- **Database Queries**: N+1 issues with product images
|
|
|
|
### After Fixes
|
|
|
|
- **Cart Requests**: 1-2 requests on page load/navigation (expected behavior)
|
|
- **Backend Logs**: Clean, only showing necessary requests
|
|
- **Page Load Time**: Fast and responsive
|
|
- **Database Queries**: Optimized with eager loading
|
|
|
|
## Testing Performed
|
|
|
|
1. ✅ Frontend build completed successfully
|
|
2. ✅ Backend server starts without deprecation warnings
|
|
3. ✅ Cart requests reduced from hundreds to 1-2 per page load
|
|
4. ✅ Both servers running and communicating properly
|
|
5. ✅ No infinite loops detected in monitoring
|
|
|
|
## Additional Optimizations Applied
|
|
|
|
- Product images are now preloaded in all product queries using `selectinload(Product.images)`
|
|
- Cart endpoint now loads product images in a single query
|
|
- FastAPI app uses modern lifespan events for better async handling
|
|
|
|
## Verification Steps
|
|
|
|
To verify the fixes are working:
|
|
|
|
1. **Check Backend Logs**:
|
|
|
|
```bash
|
|
tail -f /proc/$(pgrep -f "python server.py")/fd/1
|
|
```
|
|
|
|
Should see only occasional cart requests, not continuous spam
|
|
|
|
2. **Monitor Cart Requests**:
|
|
|
|
```bash
|
|
watch -n 1 'tail -50 /proc/$(pgrep -f "python server.py")/fd/1 | grep "/api/cart" | wc -l'
|
|
```
|
|
|
|
Count should remain low (0-2), not increasing rapidly
|
|
|
|
3. **Frontend Console**:
|
|
- Open browser DevTools → Network tab
|
|
- Filter by "cart"
|
|
- Should see only 1-2 requests when navigating pages
|
|
|
|
## Recommended Next Steps
|
|
|
|
1. **Production Build**: Test with production build for maximum performance
|
|
2. **Caching**: Consider adding Redis caching for frequently accessed data
|
|
3. **Database Indexing**: Verify all foreign keys and frequently queried columns have indexes
|
|
4. **Load Testing**: Perform load testing to ensure system handles concurrent users
|
|
|
|
## References
|
|
|
|
- [React useCallback Hook](https://react.dev/reference/react/useCallback)
|
|
- [FastAPI Lifespan Events](https://fastapi.tiangolo.com/advanced/events/)
|
|
- [SQLAlchemy Eager Loading](https://docs.sqlalchemy.org/en/20/orm/queryguide/relationships.html)
|