Are You Developing Your React App the Wrong Way?!

Hello everyone 👋,

Before diving in the blog, let me talk to you for a second, I'm back after a very long break, feeling much more confident!! I have learned a lot in this long break, and I hope when I will share all my lessons here you guys will love it, and you guys will support me on this journey 🙌.

So... You Might Be Developing Your React App the Wrong Way

This post is about one of the most common mistake we (yes, me too) make when building react app - "UNNECESSARY RE-RENDERS"

We all know that react components re-render when the state or props change, that's expected, but sometimes our components re-render even when they don't need to, and that can slow down the entire app, yeah it won't be that much visible in a small project, but as we all are learning and building to be a better developer it is very important for us that whatever projects we are building that shouldn't slow down.

What's the solution then??

So listen, the solution is fairly simple, react provides us hooks, and there are more hooks than you think, and some of the hooks you might not even use, but as you know if you want to be a better developer, you need to know the advanced hooks as well, because useState alone won't make you a better developer.

HAHA, Just kidding, you all are going to be a better developer (some day ofcourse), so let's get back to the topic, yeah so as I was saying that there are more hooks you need to know about, and today the hook which we are going to learn about is "useCallback".

What is useCallback??

Let's make it simple, Imagine you’re building a feature where a function runs a heavy task, and most of the time it gives back the same result. Now, if that function is used in a critical part of your component tree, React will recreate and re-run it every single time the component re-renders. Even when the result hasn’t changed. That’s a waste of performance.

That’s exactly why we use useCallback. It tells React: “Hey, only recreate this function if its inputs (dependencies) change.” Otherwise, just reuse the old one.

Code Example:

import { useCallback } from "react"

const expensiveFn = useCallback(() => {
  // heavy computation
}, [dependency]);

This ensures the function is memoized — React won’t create a new version unless dependency changes.

Why and When to use it??

Honestly, it depends, you can skip using it, it's totally your choice, but it's industry standard, and also it should be your standard, if your app behaves just like everyone else’s, what sets you apart?

Now the answer for this question will be if you are building a big application there you might want to use it so that you can increase the performance of your app.

Common Mistakes:

First of all, now don't just go and wrap all your functions with useCallback, if you will do it, it can lead to unnecessary complexity and memory overhead, and of course it won't make you look cool

And second mistake can be, adding wrong dependencies or missing dependencies inside the callback, it can lead to bugs that will be hard to trace.

Summary:

✅ useCallback helps memoize functions to prevent unnecessary re-creations.

✅ Use it when passing functions to memoized children (like with React.memo).

✅ Always include accurate dependencies in the array.

🚫 Don’t use it everywhere — only when there's a real performance concern.

Final Thoughts:

I didn’t write this blog to make anyone feel bad for not using useCallback, or you are not a better developer, you're learning about it now, that's awesome! You’re growing as a developer, and that’s what matters most.

So that's all for now, I will meet you soon in another blog post.

If you enjoyed this, drop a comment or share it with a fellow dev. Got feedback or a different approach? I’d love to hear it — we’re all learning together 🚀