🚨 React Re-render Methods: Reference Matters!

#webdev #react #beginners #programming

In React, a component re-renders only when the state reference changes.
Some array methods DO NOT create a new reference, so React won’t re-render 🚫

❌ Methods that DO NOT change reference (Mutating methods)

These modify the same array/object in memory:

push
pop
shift
unshift
sort
reverse
splice
fill
copyWithin

⚠️ Using these directly on React state may NOT trigger a re-render

// ❌ Wrong
state.items.push(1);
setItems(state.items); // same reference

✅ Methods that CREATE a new reference (Safe for React)

These return a new array, so React detects the change:

map
filter
concat
slice
flat
flatMap
toSorted
toReversed
toSpliced

// ✅ Correct
setItems(prev => [...prev, 1]);

🧠 Key Rule to Remember

React compares references, not values.
Same reference = ❌ no render
New reference = ✅ re-render

🔥 One-line takeaway

“Mutating methods keep the same reference, so React won’t re-render. Always return a new reference when updating state.”

Understanding Mutable vs. Immutable Data in React and Their Impact on Rendering