📊 Performance
0 FPS
✅ Optimized Demos
Notice the improved performance with memoization, debouncing, and React 18 features
💡 Tip: Open your browser console (F12) to see render logs. Look for ✅ indicators showing efficient renders and optimized performance!
1. Memoized Calculations (useMemo)
✅ With useMemo
Expensive calculation runs only once and is cached
Expensive Value: 499,999,500,000
Count: 0
👆 Click the button — calculation runs only once! Check console.
2. Debounced Search (useCallback)
✅ With Debounce (500ms)
Search count: 0 (only fires after you stop typing!)
Searching for: "..."
💡 Type "react" = only 1 API call!
3. Split Context Providers
✅ Split Contexts + Memo
Each component only re-renders when its specific context changes
💡 Click either button — only the relevant component re-renders!
4. Concurrent Features (useTransition)
✅ With useDeferredValue
Type quickly — input updates instantly, expensive list update is deferred
Input: ""Deferred: ""Renders: 1 | Computes: 1
Found 20,000 items
Product 1 - Premium quality item with detailed description
Product 2 - Premium quality item with detailed description
Product 3 - Premium quality item with detailed description
Product 4 - Premium quality item with detailed description
Product 5 - Premium quality item with detailed description
Product 6 - Premium quality item with detailed description
Product 7 - Premium quality item with detailed description
Product 8 - Premium quality item with detailed description
Product 9 - Premium quality item with detailed description
Product 10 - Premium quality item with detailed description
Product 11 - Premium quality item with detailed description
Product 12 - Premium quality item with detailed description
Product 13 - Premium quality item with detailed description
Product 14 - Premium quality item with detailed description
Product 15 - Premium quality item with detailed description
Product 16 - Premium quality item with detailed description
Product 17 - Premium quality item with detailed description
Product 18 - Premium quality item with detailed description
Product 19 - Premium quality item with detailed description
Product 20 - Premium quality item with detailed description
Product 21 - Premium quality item with detailed description
Product 22 - Premium quality item with detailed description
Product 23 - Premium quality item with detailed description
Product 24 - Premium quality item with detailed description
Product 25 - Premium quality item with detailed description
Product 26 - Premium quality item with detailed description
Product 27 - Premium quality item with detailed description
Product 28 - Premium quality item with detailed description
Product 29 - Premium quality item with detailed description
Product 30 - Premium quality item with detailed description
💡 Compare "Computes" count with before — useDeferredValue skips intermediate renders!
5. Stable Keys + React.memo
✅ Proper Keys (Stable IDs)
Using key={item.id} preserves state and prevents remounts
👆 Type in any input, then add an item. Input values stay with their items!
1xFirst item
1xSecond item
1xThird item
Benefits of stable keys:
- ✅ Input values stay with their items
- ✅ Components don't remount on reorder
- ✅ State is preserved correctly
6. Optimized Images (next/image)
✅ Optimized Images (next/image)
Using Next.js <Image> — blur placeholder, lazy loading, responsive
Optimizations:
- ✅ Automatic WebP/AVIF
- ✅ Blur placeholder (no CLS)
- ✅ Responsive sizing
- ✅ Lazy loading (first 2 priority)
7. Web Workers (Off Main Thread)
✅ With Web Worker (Background Thread)
Click "Calculate" and keep clicking the counter — UI stays responsive!
Runs: 0
💡 Computation runs in separate thread — main thread stays free for UI!
8. Virtualized Lists (10k+ items)
✅ With Virtualization
Only rendering visible items — smooth scrolling with 10,000 items!
Total: 10,000Rendered: 9
Item 1
This is a detailed description for item number 1. It contains important information.
$83.03
Item 2
This is a detailed description for item number 2. It contains important information.
$88.55
Item 3
This is a detailed description for item number 3. It contains important information.
$46.50
Item 4
This is a detailed description for item number 4. It contains important information.
$93.84
Item 5
This is a detailed description for item number 5. It contains important information.
$51.95
Item 6
This is a detailed description for item number 6. It contains important information.
$63.20
Item 7
This is a detailed description for item number 7. It contains important information.
$41.99
Item 8
This is a detailed description for item number 8. It contains important information.
$60.48
Item 9
This is a detailed description for item number 9. It contains important information.
$46.89
💡 Only ~14 items rendered — smooth & efficient!
9. React Profiler (Measurement)
✅ With React.memo (Profiler shows optimization)
Component only re-renders when its props actually change!
↑ This won't re-render the list — memo prevents it!
📊 Profiler Metrics
Total Renders: 0Last Render: 0.00ms
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
💡 With memo, unrelated state changes don't cause re-renders!