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 :)
Top comments (6)
honestly this is the sorta thing i wish i had when i started out, makes me wonder though - you think most real learning happens through trial and error or just from soaking up docs and vids?
Hey! Thank you! I would say, soaking up docs and vids first and then implementing the same in your real time projects. You cannot just succeed through trial and error or just blindly following a youtube tutorial. A balance of both is needed.
Helpful!!
An awesome piece
So nicely explained, and broken down complex concepts into simpler form.
Amazing work done.
Please kindly keep doing this, honestly helps a lot🙏
You go girll🔥
This is extremely impressive, especially for a beginner breakdown. I’ve enjoyed all of the research you’ve put into this – it adds up