Why So Many Re-renders, React? 🤔

We’ve all been there — your React app is running smoothly, you’re feeling good, and then... BAM! Suddenly, everything slows down and you’re thinking, “What’s going on here?” 🧐 Unnecessary re-renders, my friend! They’re like those unexpected guests at a party: no one invited them, but here they are, eating your snacks and slowing everything down.

Let’s break down why React loves to re-render (a little too much sometimes) and what’s really going on under the hood.

1. State Changes: The Serial Re-render Offender

Whenever you update state in React, it’s like hitting refresh on your whole component. React’s like, “Oh, you changed something? Let me just re-render EVERYTHING.” Even if it’s a tiny update, React is all in. It’s like the over-enthusiastic friend who keeps tidying up the room while you’re still hanging out.

Example:

const [count, setCount] = useState(0);

const increment = () => setCount(count + 1);

Every time you hit setCount, React’s like, “Let’s re-render the whole component, just in case!” Sure, it means your state’s always up-to-date, but all this re-rendering can lead to performance hits if your app is doing some heavy lifting. It's like overreacting to a small spill by cleaning the entire house. 🧹

2. Props Change: React’s Like, “New Props, Who Dis?”

React is super reactive (no pun intended) to prop changes. The moment a prop changes, React goes, “Wait, is that a new prop? Better re-render the child component, just to be safe.” Even if the child doesn’t care about the new prop, React re-renders it like it’s the end of the world.

Example:

<ChildComponent data={someArray} />

Whenever someArray changes (even if it’s just adding one item), React’s like, “Time to re-render the whole ChildComponent!” It’s basically that one overprotective friend who jumps at every minor inconvenience: “Oh, new data? Let’s redo everything!” 🙃

3. Parent Component Re-renders: The Domino Effect

This is the ultimate React drama. If the parent component re-renders, React drags all the kids along for the ride, even if they had nothing to do with the change. It’s like inviting yourself to a party and bringing a bunch of friends who didn’t even want to come. 😅

Example:

function ParentComponent() {
  const [parentState, setParentState] = useState(0);

  return (
    <>
      <ChildComponent />
      <AnotherChildComponent />
    </>
  );
}

Every time the parent re-renders, both ChildComponent and AnotherChildComponent are like, “Wait, what did we do? Why are we here?” This can be fine for small apps, but in a larger, more complex app, this over-enthusiasm can really slow things down.

4. Inline Functions & Objects: The Sneaky Culprits

Inline functions and objects might look innocent, but they're secretly wreaking havoc. Every time React re-renders, it creates new instances of these functions and objects, even if they’re technically doing the same thing. React looks at them and goes, “New reference? Must be different. Better re-render!”

Example:

<ChildComponent onClick={() => doSomething()} />

Each time the parent re-renders, React sees the new inline function as a completely new prop for ChildComponent. It’s like you just gave React a shiny new toy, and it has no idea that the toy is actually the same one it had before. So it re-renders. React’s just trying its best, okay? 😅

5. React’s Motto: Better Safe Than Sorry

React’s philosophy is pretty much “better safe than sorry.” It would rather re-render too much than risk missing something important. It’s like that overly cautious friend who triple-checks everything before heading out the door. This keeps the UI in sync with the state, but can lead to React doing way more than it needs to.

Conclusion

So, why all the re-renders? It’s because React just wants everything to stay updated and correct. But sometimes, it can be a little too cautious, leading to unnecessary performance issues. Don’t worry, though! We’ve got plenty of tricks up our sleeves to tame React’s re-rendering habits — like React.memo, useCallback, and other optimization tools.

Stay tuned for the next part, where we dive into the hacks to calm React down and stop the re-renders from crashing your app's party. 🎉

Happy Coding :))