// ✅ Worth memoizing — O(n log n) sort + filter over potentially thousands of items
const processedData = useMemo(
  () =>
    rawData
      .filter((item) => item.active)
      .sort((a, b) => b.score - a.score)
      .slice(0, pageSize),
  [rawData, pageSize]
)

// ❌ NOT worth memoizing — primitive operations are cheaper than memo overhead
const displayName = useMemo(
  () => `${user.firstName} ${user.lastName}`,
  [user.firstName, user.lastName]
)
// String concatenation costs ~0.001ms; memo overhead costs ~0.03ms. Net loss.

// ✅ Worth memoizing — the result is an object, passed to a React.memo child
const chartConfig = useMemo(
  () => ({ type: 'bar', color: theme.primary, data: chartData }),
  [theme.primary, chartData]
)

// ✅ Correct use — the callback is passed to a memoized child
const handleSubmit = useCallback(
  (formData: FormData) => {
    submitForm(formData, userId)
  },
  [userId]  // function identity changes only when userId changes
)

return <MemoizedForm onSubmit={handleSubmit} />

// ❌ useCallback without React.memo on the child — pointless
const handleClick = useCallback(() => doSomething(), [])
return <NormalButton onClick={handleClick} />
// NormalButton re-renders on every parent render regardless — the stable callback
// reference is completely irrelevant without React.memo on the child.

// ❌ Full store subscription — re-renders on ANY store change
function BadCounter() {
  const store = useStore()  // subscribes to everything
  return <span>{store.count}</span>
}

// ✅ Granular selector — re-renders ONLY when count changes
function GoodCounter() {
  const count = useStore((state) => state.count)
  return <span>{count}</span>
}

const useAppStore = create<AppStore>()((set) => ({
  count: 0,
  theme: 'dark',
  sidebarOpen: false,
  incrementCount: () => set((s) => ({ count: s.count + 1 })),
  toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
}))

// These three components are completely decoupled in their render cycles:
const CountDisplay = () => <span>{useAppStore((s) => s.count)}</span>
const ThemeIcon = () => <Icon name={useAppStore((s) => s.theme)} />
const Sidebar = () => {
  const open = useAppStore((s) => s.sidebarOpen)
  return <aside className={open ? 'open' : 'closed'} />
}
// Toggling the sidebar does NOT re-render CountDisplay or ThemeIcon.

// ❌ One large context — every consumer re-renders when anything changes
const AppContext = createContext({ user, theme, cart, notifications })

// ✅ Split by rate of change
const UserContext = createContext(user)          // changes on login/logout only
const ThemeContext = createContext(theme)        // changes on theme toggle only
const CartContext = createContext(cart)          // changes on add/remove item
const NotifContext = createContext(notifications) // changes frequently (websocket)

// ❌ Business logic embedded in the component — hard to test, hard to reuse
function ProductPage({ productId }: { productId: string }) {
  const [product, setProduct] = useState<Product | null>(null)
  const [quantity, setQuantity] = useState(1)
  const [isWishlisted, setIsWishlisted] = useState(false)

  useEffect(() => { fetchProduct(productId).then(setProduct) }, [productId])

  const canAddToCart = product !== null && product.stock > 0 && quantity <= product.stock
  const handleAddToCart = () => addToCart(productId, quantity)
  const handleWishlistToggle = () => setIsWishlisted((w) => !w)

  // ... 80 more lines of logic mixed with JSX
}

// ✅ Logic extracted into a custom hook — component is a pure render function
function useProductActions(productId: string) {
  const { data: product } = useQuery({ queryKey: ['products', productId], queryFn: () => fetchProduct(productId) })
  const [quantity, setQuantity] = useState(1)
  const [isWishlisted, setIsWishlisted] = useState(false)

  const canAddToCart = Boolean(product && product.stock > 0 && quantity <= product.stock)
  const handleAddToCart = useCallback(() => addToCart(productId, quantity), [productId, quantity])
  const handleWishlistToggle = useCallback(() => setIsWishlisted((w) => !w), [])

  return { product, quantity, setQuantity, isWishlisted, canAddToCart, handleAddToCart, handleWishlistToggle }
}

// The component only renders — no business logic
function ProductPage({ productId }: { productId: string }) {
  const actions = useProductActions(productId)
  if (!actions.product) return <Spinner />
  return <ProductView {...actions} />
}

import { lazy, Suspense } from 'react'

// The bundle for RichEditor is NOT loaded on initial page load
const RichEditor = lazy(() => import('./RichEditor'))
const ChartDashboard = lazy(() => import('./ChartDashboard'))

function ArticleEditor({ mode }: { mode: 'edit' | 'view' }) {
  return (
    <Suspense fallback={<Skeleton height={400} />}>
      {mode === 'edit' ? <RichEditor /> : <ArticleView />}
    </Suspense>
  )
}

// ✅ Design system Button — pure function, stable API, memoized
const Button = React.memo(function Button({
  onClick,
  disabled = false,
  variant = 'primary',
  children,
}: ButtonProps) {
  return (
    <button
      className={buttonVariants({ variant })}
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  )
})