React useCallback: 같은 제출 함수가 느린 자식을 다시 그리게 할 때

import { memo, useState } from 'react'
 
const ShippingForm = memo(function ShippingForm({ onSubmit }) {
  console.count('ShippingForm Render: 임시 진단')
 
  let checksum = 0
  for (let index = 0; index < 30000000; index += 1) {
    checksum += index % 7
  }
 
  const [address, setAddress] = useState('')
 
  function handleSubmit(event) {
    event.preventDefault()
    onSubmit({ address })
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        value={address}
        onChange={event => setAddress(event.target.value)}
        aria-label="배송 주소"
      />
      <button type="submit">주문</button>
      <output>진단값: {checksum}</output>
    </form>
  )
})
 
function postOrder(productId, referrer, orderDetails) {
  console.log('주문 전송', { productId, referrer, orderDetails })
}
 
function ProductPage({ productId, referrer }) {
  const [isDark, setIsDark] = useState(false)
  const [lastOrder, setLastOrder] = useState('없음')
 
  function handleSubmit(orderDetails) {
    postOrder(productId, referrer, orderDetails)
    setLastOrder(`${productId} / ${orderDetails.address}`)
  }
 
  return (
    <section data-theme={isDark ? 'dark' : 'light'}>
      <p>현재 상품: {productId}</p>
      <p>현재 테마: {isDark ? '어두움' : '밝음'}</p>
      <p>마지막 전송: {lastOrder}</p>
      <button type="button" onClick={() => setIsDark(value => !value)}>
        테마 변경
      </button>
      <ShippingForm onSubmit={handleSubmit} />
    </section>
  )
}
 
export default function App() {
  const [productId, setProductId] = useState('coffee')
 
  return (
    <main>
      <select value={productId} onChange={event => setProductId(event.target.value)}>
        <option value="coffee">커피</option>
        <option value="tea">차</option>
      </select>
      <ProductPage productId={productId} referrer="home" />
    </main>
  )
}

import { useCallback, useState } from 'react'
 
function ProductPage({ productId, referrer }) {
  const [isDark, setIsDark] = useState(false)
  const [lastOrder, setLastOrder] = useState('없음')
 
  const handleSubmit = useCallback(orderDetails => {
    postOrder(productId, referrer, orderDetails)
    setLastOrder(`${productId} / ${orderDetails.address}`)
  }, [productId, referrer])
 
  return (
    <section data-theme={isDark ? 'dark' : 'light'}>
      <p>현재 상품: {productId}</p>
      <p>현재 테마: {isDark ? '어두움' : '밝음'}</p>
      <p>마지막 전송: {lastOrder}</p>
      <button type="button" onClick={() => setIsDark(value => !value)}>
        테마 변경
      </button>
      <ShippingForm onSubmit={handleSubmit} />
    </section>
  )
}
 
export default function App() {
  const [productId, setProductId] = useState('coffee')
 
  return (
    <main>
      <select value={productId} onChange={event => setProductId(event.target.value)}>
        <option value="coffee">커피</option>
        <option value="tea">차</option>
      </select>
      <ProductPage productId={productId} referrer="home" />
    </main>
  )
}

문제       테마만 바꿔도 느린 ShippingForm이 다시 Render됨
잘못된 판단 memo가 있으면 함수 prop 내용이 같아도 자식 Render를 건너뜀
관찰       handleSubmit !== previousHandleSubmit, ShippingForm Render 비용 반복
원인       부모 Render마다 새 함수 참조가 onSubmit prop으로 전달됨
행동       productId와 referrer 의존성으로 handleSubmit 참조 재사용
검증       테마 변경은 자식 생략, 주소·상품 변경은 필요한 Render와 제출 유지