🚫 Anda tidak terhubung ke internet
CodeXtory
TechnologyOptimizationFrontendReact.jsJavascript

Avoid Over Re-Render in React: A Developer Story About Why Your App Feels Slow

M. Fadil Martias
3 min read•Dec 19
Avoid Over Re-Render in React: A Developer Story About Why Your App Feels Slow

Avoid Over Re-Render in React: The Moment I Realized Something Was Wrong

Everything was fine.

The UI worked.
No errors.
No warnings.

But the app felt… slow.

Buttons lagged. Typing felt heavy. And Chrome DevTools showed something scary:

👉 Components re-rendering like crazy.

That’s when I started digging into over re-render in React — and trust me, almost every React developer hits this wall at some point.

What Is Over Re-Render in React (In Human Terms)?

A re-render happens when React updates the UI.

That’s normal.

The problem starts when:

  • Components re-render too often

  • Components re-render for no reason

  • Child components re-render even when props didn’t really change

Over time, this kills performance.

The Most Common Causes of Over Re-Render in React

Let’s talk about the mistakes we actually make.

1. State Changes Trigger Everything

In React, state change = re-render.

Even this innocent code:

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

👉 Re-renders the component
👉 Re-renders all its children

That’s fine… until the component tree gets big.

2. Passing New Objects or Functions Every Render

This one hurts a lot of beginners (and pros).

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

Every render:

  • New function is created

  • React thinks props changed

  • Child re-renders 😬

Same problem with objects:

 
<Child config={{ theme: "dark" }} />

New object every render → re-render.

3. Missing memoization (React.memo, useMemo, useCallback)

React doesn’t magically know your component is “the same”.

If you don’t tell it, it assumes:

“Props changed? Okay, re-render.”

4. useEffect That Triggers State Again

Classic infinite pain:

 
useEffect(() => { setData(processData(data)); }, [data]);

Boom 💥
Re-render → effect → state update → re-render loop.

How to Avoid Over Re-Render in React (The Practical Way)

Now the good stuff.

1. Use React.memo for Child Components

 
const Child = React.memo(function Child({ value }) { console.log("Child render"); return <div>{value}</div>; });

Now React will:

  • Skip re-render if props didn’t change

  • Save performance

2. useCallback for Functions

Instead of this ❌:

 
<Child onClick={() => increment()} />

Do this ✅:

 
const increment = useCallback(() => { setCount(c => c + 1); }, []); <Child onClick={increment} />

Now the function reference stays stable.

3. useMemo for Expensive Calculations

 
const totalPrice = useMemo(() => { return items.reduce((sum, item) => sum + item.price, 0); }, [items]);

Without useMemo, this runs on every render.

4. Split Components (Seriously)

Big components = more re-renders.

Instead of one giant component:

  • Split UI

  • Lift state only when needed

Smaller components = better control.

5. Don’t Over-Optimize Too Early

Important reminder:

👉 Re-render is not evil. Over re-render is.

Don’t wrap everything with useMemo just because you can. Measure first.

How I Debug Over Re-Render in Real Projects

My usual checklist:

  • React DevTools → Highlight updates

  • Console log render calls

  • Check props reference (objects/functions)

  • Memoize only what matters

FAQs

Is re-render always bad?
No. It’s how React works.

Should I always use React.memo?
No. Use it when re-renders are expensive.

Does useCallback improve performance?
Only if passed to memoized components.

Is over re-render common?
Very. Almost every React app has it.

Can Redux cause re-render?
Yes, if selectors aren’t optimized.

Best way to learn this?
Build apps and profile them.

Final Thoughts

Learning how to avoid over re-render in React is a turning point.

Once you understand:

  • Why it happens

  • What actually causes it

  • How to control it

Your apps feel smoother.
Your code feels cleaner.
And you start thinking like a senior dev.

Related Stories