AI News Hub Logo

AI News Hub

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

DEV Community
Ola Abaza

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]) )