react-rerender-optimization

React Re-render Optimization

Patterns for reducing unnecessary re-renders to minimize wasted computation and improve UI responsiveness.

1. Calculate Derived State During Rendering

Impact: MEDIUM - Avoids redundant renders and state drift

If a value can be computed from current props/state, derive it during render instead of storing in state.

Incorrect: redundant state and effect

function Form() {
  const [firstName, setFirstName] = useState('First')
  const [lastName, setLastName] = useState('Last')
  const [fullName, setFullName] = useState('')

  useEffect(() => {
    setFullName(firstName + ' ' + lastName)
  }, [firstName, lastName])

  return <span>{fullName}</span>
}

Correct: derive during render

function Form() {
  const [firstName, setFirstName] = useState('First')
  const [lastName, setLastName] = useState('Last')
  const fullName = firstName + ' ' + lastName

  return <span>{fullName}</span>
}

Reference: You Might Not Need an Effect

---

2. Defer State Reads to Usage Point

Impact: MEDIUM - Avoids unnecessary subscriptions

Don't subscribe to dynamic state if you only read it inside callbacks.

Incorrect: subscribes to all searchParams changes

function ShareButton({ chatId }: { chatId: string }) {
  const searchParams = useSearchParams()

  const handleShare = () => {
    const ref = searchParams.get('ref')
    shareChat(chatId, { ref })
  }

  return <button onClick={handleShare}>Share</button>
}

Correct: reads on demand, no subscription

function ShareButton({ chatId }: { chatId: string }) {
  const handleShare = () => {
    const params = new URLSearchParams(window.location.search)
    const ref = params.get('ref')
    shareChat(chatId, { ref })
  }

  return <button onClick={handleShare}>Share</button>
}

---

3. Avoid useMemo for Simple Expressions

Impact: LOW-MEDIUM - Wasted computation on every render