# 50+ React Pro Tips You Must Know For Better Coding
## **1\. React Secret: The "Lazy Loading" Pattern for Instant Load Times**
Your bundle is 2MB and users wait 8 seconds for first paint!
Code splitting with React.lazy() can cut that to 200KB and 1 second. This is non-negotiable for production apps.
**The Problem:**
You're shipping EVERYTHING in one bundle. Users download code for routes they never visit.
```javascript
โ Everything in single Bundle:
// App.js - imports EVERYTHING upfront
import Dashboard from './pages/Dashboard'; // 300 KB
import Analytics from './pages/Analytics'; // 450 KB
import Reports from './pages/Reports'; // 380 KB
import Settings from './pages/Settings'; // 250 KB
import AdminPanel from './pages/AdminPanel'; // 520 KB
import UserManagement from './pages/UserManagement'; // 400 KB
function App() {
return (
} />
} />
} />
} />
} />
} />
);
}
// ๐จ Problem: User visits "/" โ Downloads 2.3 MB!
// ๐ฑ But only needs Dashboard (300 KB)!
// Wasted: 2 MB downloaded
// User waits: 8 seconds on 3G
```
```javascript
โ Code Splitting with React.lazy():
import { lazy, Suspense } from 'react';
// โจ Only import what you need, when you need it!
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Analytics = lazy(() => import('./pages/Analytics'));
const Reports = lazy(() => import('./pages/Reports'));
const Settings = lazy(() => import('./pages/Settings'));
const AdminPanel = lazy(() => import('./pages/AdminPanel'));
const UserManagement = lazy(() => import('./pages/UserManagement'));
function App() {
return (
}>
} />
} />
} />
} />
} />
} />
);
}
// โจ User visits "/" โ Downloads 300 KB only!
// Other routes load on-demand
// Initial load: 1 second on 3G! ๐
```
```javascript
๐ฅ Real Bundle Analysis:
โจBefore Code Splitting:
npm run build
# Output:
File sizes after gzip:
2.31 MB build/static/js/main.chunk.js ๐ฑ
# Lighthouse Score:
First Contentful Paint: 8.2s
Time to Interactive: 12.4s
Performance Score: 34/100 ๐ด
โจAfter Code Splitting:
npm run build
# Output:
File sizes after gzip:
187 KB build/static/js/main.chunk.js โจ
310 KB build/static/js/1.chunk.js (Dashboard)
445 KB build/static/js/2.chunk.js (Analytics)
375 KB build/static/js/3.chunk.js (Reports)
# Lighthouse Score:
First Contentful Paint: 1.2s โก
Time to Interactive: 2.1s
Performance Score: 94/100 ๐ข
12x faster initial load!
```
```javascript
๐ช Component-Level Code Splitting:
// Don't just split routes - split heavy components!
import { lazy, Suspense } from 'react';
// โจ Lazy load heavy chart library only when needed
const Chart = lazy(() => import('./components/HeavyChart'));
const DataTable = lazy(() => import('./components/DataTable'));
const PdfViewer = lazy(() => import('./components/PdfViewer'));
function Dashboard() {
const [showChart, setShowChart] = useState(false);
return (
Dashboard
{showChart && (
}>
)}
);
}
// Chart only loads when user clicks button! ๐
// Saves 450 KB on initial load
```
```javascript
๐ฏ Modal/Dialog Lazy Loading:
// โ BAD - Modal code loaded even if never opened
import EditUserModal from './EditUserModal';
function UserList() {
const [isModalOpen, setIsModalOpen] = useState(false);
return (
{isModalOpen && setIsModalOpen(false)} />}
);
}
// โ GOOD - Modal loads only when opened
const EditUserModal = lazy(() => import('./EditUserModal'));
function UserList() {
const [isModalOpen, setIsModalOpen] = useState(false);
return (
);
}
// Bug:
// 1. User clicks "Sort by Price (asc)"
// 2. handleSort() called
// 3. sortedProducts.sort() mutates array in place
// 4. setSortedProducts(sortedProducts) - same reference
// 5. ๐ React doesn't re-render sortedProducts!
// 6. setSortOrder('desc') triggers re-render
// 7. โ Button text updates: "(desc)"
// 8. ๐ But product list DOESN'T re-sort!
// 9. User sees: Button says "desc" but list is still "asc" order
// 10. Clicks again
// 11. ๐ Still no visual change to list!
// 12. UI state inconsistent! ๐
```
```javascript
// โ Fix: Create new sorted array
const handleSort = () => {
const newOrder = sortOrder === 'asc' ? 'desc' : 'asc';
const sorted = [...sortedProducts].sort((a, b) => { // โจ Copy first!
return newOrder === 'asc'
? a.price - b.price
: b.price - a.price;
});
setSortedProducts(sorted); // โจ New array!
setSortOrder(newOrder);
};
```
```javascript
๐ช Mutation Methods to AVOID:
// โ Array mutations (modify original)
array.push(item) // Use: [...array, item]
array.pop() // Use: array.slice(0, -1)
array.shift() // Use: array.slice(1)
array.unshift(item) // Use: [item, ...array]
array.splice(i, 1) // Use: array.filter((_, index) => index !== i)
array.sort() // Use: [...array].sort()
array.reverse() // Use: [...array].reverse()
array[i] = value // Use: array.map((item, index) => index === i ? value : item)
// โ Object mutations (modify original)
object.property = value // Use: { ...object, property: value }
delete object.property // Use: const { property, ...rest } = object; return rest;
Object.assign(object, {}) // Use: { ...object, ...newProps }
// โ Immutable alternatives
// Arrays:
[...array, newItem] // Add to end
[newItem, ...array] // Add to start
array.filter(item => item.id !== id) // Remove
array.map(item => item.id === id ? newItem : item) // Update
[...array].sort() // Sort
array.slice(0, index).concat(array.slice(index + 1)) // Remove at index
// Objects:
{ ...object, key: newValue } // Update property
{ ...object, nested: { ...object.nested, key: value } } // Deep update
const { removeThis, ...keep } = object; keep; // Remove property
```
```javascript
๐ Mutation Detection:
// React's state comparison:
// Primitives (compared by value):
const [count, setCount] = useState(0);
setCount(0); // 0 === 0 โ No re-render โ
setCount(1); // 0 !== 1 โ Re-render โ
// Objects/Arrays (compared by reference):
const [obj, setObj] = useState({ a: 1 });
// โ Mutation (same reference):
obj.a = 2;
setObj(obj); // obj === obj โ No re-render ๐
// โ New object (different reference):
setObj({ ...obj, a: 2 }); // oldObj !== newObj โ Re-render โ
// Why mutation fails:
const array1 = [1, 2, 3];
array1.push(4); // Mutates array1
array1 === array1 // Still TRUE! Same reference!
const array2 = [1, 2, 3];
const array3 = [...array2, 4]; // New array
array2 === array3 // FALSE! Different references!
// React uses Object.is() for comparison:
Object.is(oldState, newState)
// If TRUE โ Skip re-render
// If FALSE โ Trigger re-render
```
```javascript
โจ Immutable Update Patterns:
// Pattern 1: Array - Add item
setArray([...array, newItem]);
setArray(prev => [...prev, newItem]);
// Pattern 2: Array - Remove item
setArray(array.filter(item => item.id !== id));
setArray(prev => prev.filter(item => item.id !== id));
// Pattern 3: Array - Update item
setArray(array.map(item =>
item.id === id ? { ...item, name: 'New' } : item
));
// Pattern 4: Array - Replace at index
setArray(array.map((item, i) =>
i === index ? newItem : item
));
// Pattern 5: Object - Update property
setObject({ ...object, key: value });
setObject(prev => ({ ...prev, key: value }));
// Pattern 6: Object - Update nested
setObject({
...object,
nested: {
...object.nested,
deepKey: value
}
});
// Pattern 7: Object - Remove property
const { removeKey, ...rest } = object;
setObject(rest);
// Pattern 8: Object - Merge
setObject({ ...object, ...updates });
// Pattern 9: Array of objects - Update one
setArray(array.map(obj =>
obj.id === id ? { ...obj, done: !obj.done } : obj
));
// Pattern 10: Complex nested update (use immer)
import { produce } from 'immer';
setData(produce(draft => {
draft.users[0].profile.settings.theme = 'dark';
// โจ Immer handles immutability!
}));
```
---
## **7\. React Accessibility Trap: The "div onClick" Keyboard Trap**
Your clickable divs are INVISIBLE to keyboard users! 15% of users can't use your app because you used onClick on div instead of button.
This is a lawsuit waiting to happen. This pattern destroys production performance.
**The Problem:**
Divs aren't keyboard accessible. Screen readers skip them. Tab key ignores them. You just blocked millions of users!
```javascript
โ The Accessibility Disaster:
function ProductCard({ product, onAddToCart }) {
return (
{product.name}
${product.price}
{/* ๐จ ACCESSIBILITY NIGHTMARE! */}
onAddToCart(product.id)}
>
Add to Cart
);
}
// What happens for keyboard users:
// 1. User presses Tab key
// 2. โ Focus skips the "button" (it's a div!)
// 3. User can't reach "Add to Cart"
// 4. User can't buy product
// 5. You lost a customer! ๐
// What happens for screen reader users:
// 1. Screen reader reads page
// 2. โ Announces "Add to Cart" as text, not a button
// 3. User doesn't know it's clickable
// 4. No way to activate it with voice commands
// 5. User leaves frustrated! ๐ก
// What happens legally:
// 1. User files ADA complaint
// 2. Company faces lawsuit
// 3. Settlement: $50,000-$500,000
// 4. Mandatory accessibility audit: $30,000
// 5. Remediation work: $100,000+
// Total cost: $180,000+ for using