Why Is It So Complicated to Execute a Callback After useState in Functional Components?

Shamesh Rasal — Fri, 31 Jan 2025 05:34:39 +0000

In class components, we had a second argument in setState to execute a callback after the state update was applied:

this.setState({ count: this.state.count + 1 }, () => {
console.log(this.state.count); // Logs the updated state ✅
});

However, in functional components, things get trickier. Since useState updates asynchronously, there's no built-in way to execute code after the state has updated without using useEffect.

🔥 The Problem: Immediate Execution Reads Stale State

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

const increment = () => {
setCount(count + 1);
console.log(count); // Logs the old state ❌ (because updates are async)
};

Here, count logs the old value instead of the updated one.

🛠 Current Workarounds (Without useEffect)
1️⃣ Using useState Functional Updates + setTimeout

const increment = () => {
setCount(prevCount => prevCount + 1);
setTimeout(() => {
console.log(count); // Still logs old value ❌
}, 0);
};

Even setTimeout(..., 0) doesn’t guarantee fresh state immediately.

2️⃣ Using a "Trigger" State + useEffect (Most Reliable)

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

const increment = () => {
setCount(prev => prev + 1);
setUpdated(true);
};

useEffect(() => {
if (updated) {
console.log(count); // Logs the updated value ✅
setUpdated(false);
}
}, [updated]);
This works, but should we really need an extra state just to execute a callback? 🤯

🚀 Feature Request: Bring Back Callback Support in Functional setState
Since React batches and defers updates, it should provide an easier way to run a callback after state is updated without relying on useEffect or hacks.

Imagine something like:
setState(newValue, () => {
console.log("State updated! ✅");
});

This would make functional components more intuitive and match the simplicity of class components.

❓ Question for the React Team & Community
Is there a better way to handle post-update callbacks in functional components without useEffect?
Should React provide a built-in way to execute a function after state updates, similar to class components?
Looking forward to your thoughts! Let's make React even better. 💙 🚀

DEV Community: Shamesh Rasal

Why Is It So Complicated to Execute a Callback After useState in Functional Components?