🚀 React Performance Tip: Why useState(() => ...) Beats useState({...})

Most developers write:

const [ref] = useState({ current: initialValue });

...but don't realize this silently creates performance overhead ---
especially in components that re-render often.

Hidden Performance Problem

When you do:

useState({ current: initialValue });

JavaScript still recreates that object on every single render, even
though React only uses the initial value on the first render.

This causes:

• unnecessary object allocations\
• extra CPU work during render\
• increased garbage-collection pressure\
• wasted memory churn\
• unnecessary strain in fast or frequently updating UI sections

Visualizing the Flow

Your code:

useState({ current: initialValue });

Render cycle:

Render 1: - JS creates { current: initialValue } - React uses it
as the initial state

Render 2: - JS creates { current: initialValue } again - React
ignores it

Render 3: - JS creates { current: initialValue } again - React
ignores it

...

Render 30: - JS creates { current: initialValue } again - React
ignores it

The Fix: Lazy Initialization

const [ref] = useState(() => ({ current: initialValue }));

Why this is better?

• React calls the initializer only once
• No repeated object creation
• No extra GC churn
• No hidden allocations in later renders
• Matches useRef() behavior

Performance Advantages

• Reduced render cost\
• Lower GC pressure\
• Optimized initialization\
• Less memory churn\
• More predictable rerenders

Author

Yogesh Bamanier\
Sr Frontend Engineer | React Performance Enthusiast

LinkedIn: https://www.linkedin.com/in/yogesh-007