This content originally appeared on DEV Community and was authored by Yogesh Bamanier
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
This content originally appeared on DEV Community and was authored by Yogesh Bamanier
Yogesh Bamanier | Sciencx (2025-11-25T18:19:30+00:00) 🚀 React Performance Tip: Why useState(() => …) Beats useState({…}). Retrieved from https://www.scien.cx/2025/11/25/%f0%9f%9a%80-react-performance-tip-why-usestate-beats-usestate/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.