React & React Native Bug Patterns

Stale Closure in useEffect/useCallback

Symptoms:

• Old values used in callbacks
• State updates "don't work"
• Event handlers have stale data

Cause: Closure captures old value, deps array missing variable

VCs:

• VC: Callback uses variable V not in deps array
• VC: V changes but callback still has old value
• VC: Missing V in deps array of useEffect/useCallback/useMemo

---

useEffect Infinite Loop

Symptoms:

• Component re-renders constantly
• "Maximum update depth exceeded"
• Memory/CPU spike

Cause: Effect updates state that's in its own deps

VCs:

• VC: useEffect sets state S
• VC: S is in the deps array
• VC: No condition prevents re-triggering

---

Async setState on Unmounted Component

Symptoms:

• "Can't perform React state update on unmounted component"

Cause: Async operation completes after unmount, calls setState

VCs:

• VC: Async operation started in useEffect
• VC: No cleanup/abort on unmount
• VC: setState called in async callback

---

React Native: Navigation & Screen Focus

Symptoms:

• Data stale when returning to screen
• Effect doesn't run on focus
• Screen shows old state

Cause: Screen stays mounted, useEffect only runs on mount

VCs:

• VC: Screen uses useEffect for data fetch
• VC: No useFocusEffect from @react-navigation/native
• VC: User navigates away and back

---

Null During Initial Render

Symptoms:

• "Cannot read property X of null/undefined"
• Works after re-render

Cause: Async data not loaded on first render

VCs:

• VC: State initialized as null/undefined
• VC: Render accesses property without null check
• VC: Data loaded asynchronously

---

Missing Key in Lists

Symptoms:

• List items have wrong data after update
• Input values "jump" between items
• React warning about keys

VCs:

• VC: Array mapped without key prop
• VC: Key is array index (not stable ID)
• VC: Items can be reordered/filtered/added