React Performance Optimization: A Practical Guide

// ❌ Bad: Child re-renders on every parent update
function Parent() {
  const [count, setCount] = useState(0)
  
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <ExpensiveChild /> {/* Re-renders even though it doesn't use count! */}
    </div>
  )
}

// ✅ Good: Child only re-renders when props change
const ExpensiveChild = React.memo(() => {
  console.log('ExpensiveChild rendered')
  return <div>{/* expensive rendering */}</div>
})

// ❌ Bad: filterItems runs on every render
function ProductList({ products, searchTerm }) {
  const filtered = products.filter(p => 
    p.name.toLowerCase().includes(searchTerm.toLowerCase())
  ) // Runs even when products/searchTerm haven't changed!
  
  return <ul>{filtered.map(p => <li key={p.id}>{p.name}</li>)}</ul>
}

// ✅ Good: Only recalculates when dependencies change
function ProductList({ products, searchTerm }) {
  const filtered = useMemo(() => 
    products.filter(p => 
      p.name.toLowerCase().includes(searchTerm.toLowerCase())
    ),
    [products, searchTerm]
  )
  
  return <ul>{filtered.map(p => <li key={p.id}>{p.name}</li>)}</ul>
}

// ❌ Bad: handleClick creates new function every render
function Parent() {
  const [count, setCount] = useState(0)
  
  const handleClick = () => setCount(count + 1)
  
  return <Child onClick={handleClick} /> // Child re-renders!
}

const Child = React.memo(({ onClick }) => {
  return <button onClick={onClick}>Click</button>
})

// ✅ Good: handleClick reference stays stable
function Parent() {
  const [count, setCount] = useState(0)
  
  const handleClick = useCallback(() => {
    setCount(c => c + 1) // Use functional update!
  }, []) // Empty deps because we use functional update
  
  return <Child onClick={handleClick} />
}

// ❌ Bad: Renders all 10,000 items (slow!)
function LargeList({ items }) {
  return (
    <div>
      {items.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  )
}

// ✅ Good: Only renders visible items
import { FixedSizeList } from 'react-window'

function LargeList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>{items[index].name}</div>
  )
  
  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  )
}

// ❌ Bad: Everything loads upfront
import AdminPanel from './AdminPanel' // 500KB!
import UserDashboard from './UserDashboard'

function App() {
  return isAdmin ? <AdminPanel /> : <UserDashboard />
}

// ✅ Good: Load components on demand
const AdminPanel = React.lazy(() => import('./AdminPanel'))
const UserDashboard = React.lazy(() => import('./UserDashboard'))

function App() {
  return (
    <Suspense fallback={<Loading />}>
      {isAdmin ? <AdminPanel /> : <UserDashboard />}
    </Suspense>
  )
}

// ❌ Bad: Every consumer re-renders on any state change
const AppContext = createContext()

function AppProvider({ children }) {
  const [user, setUser] = useState(null)
  const [theme, setTheme] = useState('light')
  const [notifications, setNotifications] = useState([])
  
  return (
    <AppContext.Provider value={{ user, theme, notifications, setUser, setTheme }}>
      {children}
    </AppContext.Provider>
  )
}

// ✅ Good: Separate contexts for different concerns
const UserContext = createContext()
const ThemeContext = createContext()
const NotificationContext = createContext()

function AppProvider({ children }) {
  const [user, setUser] = useState(null)
  const [theme, setTheme] = useState('light')
  const [notifications, setNotifications] = useState([])
  
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <ThemeContext.Provider value={{ theme, setTheme }}>
        <NotificationContext.Provider value={{ notifications }}>
          {children}
        </NotificationContext.Provider>
      </ThemeContext.Provider>
    </UserContext.Provider>
  )
}

// ❌ Bad: API call on every keystroke
function SearchBox() {
  const [query, setQuery] = useState('')
  
  useEffect(() => {
    searchAPI(query) // Called 10+ times as user types "javascript"!
  }, [query])
  
  return <input value={query} onChange={e => setQuery(e.target.value)} />
}

// ✅ Good: API call only after user stops typing
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value)
  
  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay)
    return () => clearTimeout(handler)
  }, [value, delay])
  
  return debouncedValue
}

function SearchBox() {
  const [query, setQuery] = useState('')
  const debouncedQuery = useDebounce(query, 300)
  
  useEffect(() => {
    if (debouncedQuery) {
      searchAPI(debouncedQuery) // Called once after 300ms pause!
    }
  }, [debouncedQuery])
  
  return <input value={query} onChange={e => setQuery(e.target.value)} />
}

// ❌ Bad: Using index as key causes issues
{items.map((item, index) => (
  <div key={index}>{item.name}</div>
))}

// When items reorder, React thinks they're different components!

// ✅ Good: Use stable IDs
{items.map(item => (
  <div key={item.id}>{item.name}</div>
))}