Just spent way too many hours trying to understand useEffect, useFocusEffect, and useCallback. Finally made sense of it — wrote a beginner-friendly post so you don’t have to suffer like I did 😅 Would love some feedback from fellow devs! 💻 #ReactJS #React

Vaishnavi Nagendra — Sat, 21 Jun 2025 18:36:51 +0000

Vaishnavi Nagendra

Jun 21 '25

A Beginner’s Take on useEffect vs useFocusEffect – And Why useCallback Matters

#programming #beginners #reactnative #javascript

Comments 6

3 min read

A Beginner’s Take on useEffect vs useFocusEffect – And Why useCallback Matters

Vaishnavi Nagendra — Sat, 21 Jun 2025 18:31:23 +0000

As a junior React developer, if there was one of the many things that troubled me in React JS, it was hooks! Although a few of them were quite easy to understand, the rest kind of kept me 'hooked' for quite some time until I kinda 'mastered' them—watching YouTube tutorials, annoying my OG GPT with a million questions… I’ve done it all. So here's my beginner's guide to two of the most important or you can say not so beginner-friendly hooks.

📝 Note: useFocusEffect is from React Navigation, not React core, and is used in React Native.

Before we dive into these concepts, we need to understand one thing, the structure of both the hooks remains the same

🎯 A common structure

useHookName(() => { 
    doSomething();
},[[ifThisChanges]]};

It comprises a JavaScript method asking it to perform some action (doSomething()); based on the dependancy array (ifThisChanges). Now, what if the dependancy array is empty? The action will be triggered once on mount, that is the first time a component is rendered on a screen.

1. useEffect()🔥

Let's start with the internet definition of it 'useEffect is a React Hook that lets you synchronize a component with an external system'.
Didn't get sh**? Same! Basically, useEffect only runs in two situations:

1. When the component is mounted 🎗️

useEffect(() => {
  console.log("omg!");
}, []);

Mounted meaning when the component is rendered for the first time ever—that’s when this 'omg!' will be logged. With nothing specified in the dependency array, the action is triggered only once on mount.

But what if we decide to pass no dependency array at all? 💀
Since we’re using React, the component gets rendered—oh lord—a million times!
A tiny change in the useState? Re-renders.
Parent component re-renders and passes new props to a child? THE CHILD ALSO!!! re-renders.

Yeah, given that we deal with a lot of re-renders... No thanks. Not recommended.

2. On mount + when something in the dependancy array changes 📆

useEffect(() => {
  getProfileDetails();
}, [userId]);

As seen in the first scenario, once the component is mounted onto the screen the action gets triggered, but what if i explicitly specify when the action needs to be triggered? That's when this dependancy array comes into the picture, you only getProfileDetails() when the userId is changed/updated, if not, it just sits there (chilling) 😎occupying some space in my code.

2. useFocusEffect with useCallback 🔎

Alright, Let's just say useFocusEffect is that one, attention-seeking younger sibling of useEffect, Obviously, it does everything that useEffect does 😒 (typical). but with a twist—an important difference is that every time the screen comes into focus the action/function specified in the hook runs. It’s tied to screen focus, not just rendering. So, u leave the screen --> navigate back to it <-- the action is performed.

Now, it is only valid to use this hook paired up with useCallback().

❎ Without the useCallback:

useFocusEffect(() => {
  // this will re-run every time the screen re-renders
});

"this will re-run every time the screen re-renders". Well, that doesn't sound good, right? Exactly why a useCallback hook is required! It returns a memoized version—or a remembered version—of the function that only changes when dependencies change.

Every time the screen gains focus or the parent component re-renders, the function gets re-created, which may cause unnecessary executions or side-effects. Who would want that now?! That would negate the whole point of using useFocusEffect.

✅ With the useCallback(recommended):

useFocusEffect(
  useCallback(() => {
    fetchDataOrDoSomething(); // runs every time the screen comes into focus
  }, [dependency])
);

🥇Runs every time the screen gains focus (like navigating to that screen).

🥈Memoizing(Caching) the function using useCallback prevents unnecessary re-runs when the screen is already focused and the parent component just re-renders.

In conclusion, it prevents the usual behaviour of react where if the child component to which the props are passed also re-renders when the parent component re-renders.

👀 PS: Memoizing(not a fan of this term) so ~~memoizing~~ caching,
saving, remembering 👍🏻.

Breakdown: useEffect vs useFocusEffect

Final Thoughts

This was my understanding of the two most (can-be-confusing) hooks of react, I did not jump into the more advance parts of it—although that’s very important too (like the cleanup function). Will try writing another post just diving deeper into a single hook!

If you're still figuring it out or have a different way of remembering these hooks, drop a comment! I’d love to hear how you made sense of them — we’re all just learning out loud here anyway. 🙌

Hope it helps some fellow rookies just getting started with React!
Happy learning :)

DEV Community: Vaishnavi Nagendra

Just spent way too many hours trying to understand useEffect, useFocusEffect, and useCallback. Finally made sense of it — wrote a beginner-friendly post so you don’t have to suffer like I did 😅 Would love some feedback from fellow devs! 💻 #ReactJS #React

A Beginner’s Take on useEffect vs useFocusEffect – And Why useCallback Matters

A Beginner’s Take on useEffect vs useFocusEffect – And Why useCallback Matters

1. useEffect()🔥

2. useFocusEffect with useCallback 🔎

Breakdown: useEffect vs useFocusEffect

Final Thoughts