// ❌ This causes EVERY child to re-render on ANY state change
function App() {
  const [searchQuery, setSearchQuery] = useState('')
  const [selectedTab, setSelectedTab] = useState('all')
  
  return (
    <div>
      <SearchBar value={searchQuery} onChange={setSearchQuery} />
      <TabBar selected={selectedTab} onChange={setSelectedTab} />
      
      {/* These re-render when searchQuery changes even though they
          don't use it — because their parent re-rendered */}
      <ExpensiveChart />
      <ExpensiveTable />
      <ExpensiveMap />
    </div>
  )
}

// ✅ State colocation — move state to where it's used
function App() {
  const [selectedTab, setSelectedTab] = useState('all')
  
  return (
    <div>
      <SearchSection /> {/* Search state lives HERE now */}
      <TabBar selected={selectedTab} onChange={setSelectedTab} />
      <ExpensiveChart />
      <ExpensiveTable />
      <ExpensiveMap />
    </div>
  )
}
 
function SearchSection() {
  const [searchQuery, setSearchQuery] = useState('') // Isolated!
  return <SearchBar value={searchQuery} onChange={setSearchQuery} />
}

// ❌ Useless memo — object prop created every render
const UserCard = React.memo(({ user, onClick }: Props) => {
  return <div onClick={onClick}>{user.name}</div>
})
 
function UserList({ users }) {
  return users.map(user => (
    <UserCard
      key={user.id}
      user={user}
      onClick={() => handleClick(user.id)} // NEW function every render!
    />
  ))
}
 
// ✅ Effective memo — stable references
function UserList({ users }) {
  const handleClick = useCallback((userId: string) => {
    // handle click
  }, [])
 
  return users.map(user => (
    <UserCard
      key={user.id}
      user={user}
      onClick={handleClick}
      userId={user.id}
    />
  ))
}
 
const UserCard = React.memo(({ user, onClick, userId }: Props) => {
  return <div onClick={() => onClick(userId)}>{user.name}</div>
})

// Wrap components to measure
import { Profiler } from 'react'
 
function onRenderCallback(
  id: string,
  phase: 'mount' | 'update',
  actualDuration: number,
  baseDuration: number,
  startTime: number,
  commitTime: number
) {
  // Log to analytics
  if (actualDuration > 16) { // Slower than 60fps
    console.warn(`Slow render: ${id} took ${actualDuration.toFixed(2)}ms`)
    
    analytics.track('slow_render', {
      component: id,
      phase,
      duration: actualDuration,
      timestamp: commitTime,
    })
  }
}
 
<Profiler id="Dashboard" onRender={onRenderCallback}>
  <Dashboard />
</Profiler>

function useRenderCount(componentName: string) {
  const renderCount = useRef(0)
  
  useEffect(() => {
    renderCount.current++
    if (process.env.NODE_ENV === 'development') {
      console.log(`${componentName} rendered ${renderCount.current} times`)
    }
  })
}
 
// Usage
function MyComponent() {
  useRenderCount('MyComponent')
  // ...
}