1 RN Thing a Day – Day 12: useEffect vs useFocusEffect

useEffect

React to data changes only

useEffect(() => {
  // logic
}, [dep])

✅ Runs when:

• The component mounts
• The dependency (dep) changes

❌ Does NOT run when:

• The screen is revisited (focused again)
• Navigation happens without changing the dependency

useFocusEffect

useFocusEffect(
  useCallback(() => {
    // logic
  }, [dep])
)

✅ Runs when:

• The screen becomes focused (opened or revisited)
• The dependency changes while the screen is focused

Even if dep did NOT change → it still runs on screen focus

🚨 Common Pitfall

Using useFocusEffect without resetting state or params:

if (isError) {
  // will trigger EVERY time screen is focused
}

👉 This can cause repeated side effects or bugs

✅ Best Practice

When using navigation params:

useFocusEffect(
  useCallback(() => {
    if (!isError) return

    handleSideEffect()

    // reset param to avoid repeated triggers
    NavigationFunctions.setParams({ isError: false })
  }, [isError])
)