Your React app is slow. Here's why. ⚡
1. Creating Objects in Render
❌ <Component style={{margin: 10}} />
✅ Create styles outside render or use CSS classes
Every render = new object = React thinks props changed = unnecessary re-render
2. Anonymous Functions as Props
❌ <Button onClick={() => doSomething()} />
✅ <Button onClick={handleClick} />
New function every render = component thinks it needs to update
3. Not Using React.memo for Expensive Components
❌ Heavy components re-render when parent state changes
✅ export default React.memo(ExpensiveComponent)
4. useEffect Without Dependencies
❌ useEffect(() => { fetchData() }) (runs every render)
✅ useEffect(() => { fetchData() }, [id]) (runs only when id changes)
5. Rendering Huge Lists Without Virtualization
❌ Rendering 1000+ DOM nodes at once
✅ Use react-window or react-virtualized
Quick Wins:
• Use useMemo for expensive calculations
• Use useCallback for event handlers
• Move static data outside components
• Use React DevTools Profiler to find bottlenecks
Pro Tip: Don't optimize prematurely. Profile first, optimize second. Most performance issues come from unnecessary re-renders, not slow JavaScript.
Your users (and your phone's battery) will thank you.
What's your worst React performance mistake? 🐌