React State Update Issue

# ⚠️ React State Update Issue (Async Problem)

## 📌 Problem

When updating state in React using `setState`, the value does **not update immediately**.

Example:

setScale(scale + 0.4)
console.log(scale) // ❌ Still old value

This can cause bugs when trying to use the updated value directly after calling `setState`.

---

## 🧠 Why This Happens

React state updates are **asynchronous**.

React batches multiple updates together for performance reasons, meaning:
- State is scheduled to update
- It does NOT change instantly
- The component re-renders later with the new value

---

## ❌ Common Mistake

Using the current state directly:

setScale(scale + 0.4)

This may use a **stale (old) value**, especially if multiple updates happen quickly.

---

## ✅ Correct Solution

Use the functional update form:

setScale(prev => prev + 0.4)

### ✔ Why this works:
- `prev` always contains the latest state value
- Safe for multiple updates
- Prevents stale state bugs

---

## 🔥 Advanced Usage

If you need to use the updated value immediately:

setScale(prev => {
  const newValue = prev + 0.4

  // Use newValue here safely
  console.log(newValue)

  return newValue
})

---

## ⚠️ Important Note

This is especially important in cases like:
- Zoom systems
- Counters
- Animations
- Rapid state updates

---

## 🧪 Example Bug Scenario

setScale(scale + 1)
setScale(scale + 1)

Expected: +2  
Actual: +1 ❌

---

## ✅ Fixed Version

setScale(prev => prev + 1)
setScale(prev => prev + 1)

Result: +2 ✅

---

## 🧠 Summary

- React state updates are async
- Never rely on the current state directly when updating
- Always use `prev => ...` when state depends on previous value

---

## 🚀 Best Practice

Always prefer:

setState(prev => newValue)

instead of:

setState(value)