{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreihodrx57rvyj5j7tij44isztcyjx2u5gghncfmabgfk5hzvdmlss4",
    "uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3mowozibo2rx2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreiar6jcllxlfjwpkq5bhgzc2kksntsiu3wzsxrgcuyh6suunfrigk4"
    },
    "mimeType": "image/webp",
    "size": 49444
  },
  "path": "/khushal_jangid_aecb6739f4/mutating-state-immutating-state-1ik1",
  "publishedAt": "2026-06-23T05:19:51.000Z",
  "site": "https://dev.to",
  "tags": [
    "beginners",
    "javascript",
    "react",
    "webdev"
  ],
  "textContent": "Your confusion is coming from mixing JavaScript objects + mutation + React-style immutability concepts. Let’s clear it step by step.\n\n🧠 1. First fix your code (syntax)\n\nYou wrote:\n\nlet state ={\ncount:0;\n}\n\nCorrect:\n\nlet state = {\ncount: 0\n};\n🔥 2. What is happening in your code (MUTATION)\nCode:\nlet state = {\ncount: 0\n};\n\nstate.count = 1;\n\nconsole.log(state);\n👉 Meaning:\n\nYou directly changed the object.\n\nThis is called mutation.\n\nMemory idea:\n\nstate → { count: 0 }\n\nAfter mutation:\n\nstate → { count: 1 }\n\nSo object is SAME, only value inside changed.\n\n🧠 3. Your function (mutation again)\nfunction increment() {\nstate.count = state.count + 1;\n}\nWhat happens:\nBefore:\nstate = { count: 1 }\nAfter calling increment():\nstate = { count: 2 }\n\nAgain:\n👉 SAME object, just modified inside\n\nThis is called:\n\n🔴 Mutation (changing original state)\n\n❓ Why console shows undefined sometimes?\n\nIf you do:\n\nconsole.log(increment());\n\nFunction returns nothing → so output is:\n\nundefined\n\nBecause you did not return anything.\n\n🚀 4. IMMUTABLE version (VERY IMPORTANT CONCEPT)\n\nYou wrote:\n\n{ count: state.count + 1 }\n\nThis is NOT mutation.\n\nThis creates a NEW object.\n\n🧠 Mutation vs Immutability\n🔴 Mutation (old object modified)\nstate.count = state.count + 1;\nsame object\nmemory same\nrisky in React/Redux\n🟢 Immutability (new object created)\nstate = { count: state.count + 1 };\n\nNow:\n\nBefore:\n\nstate → { count: 1 }\n\nAfter:\n\nstate → { count: 2 } (NEW object)\n\n👉 Old object is NOT changed\n\n🎯 5. Why immutability is important (React mindset)\n\nReact depends on:\n\n“Did object reference change?”\n\nSo:\n\nMutation ❌\nstate.count++;\n\nReact may NOT detect change properly\n\nImmutability ✅\nsetState({ count: state.count + 1 });\n\nReact sees:\n\nnew object\nre-render happens\n🧠 Simple analogy\nMutation:\n\nYou repaint same house 🏠\n\nImmutability:\n\nYou build new house 🏡\n\n🔥 6. Final clean understanding\nConcept Meaning\nMutation change same object\nImmutability create new object\nstate.count++ mutation\n{count: state.count+1} new object\n⚡ One-line memory trick\n\nMutation = “same object, change inside”\nImmutability = “new object, old unchanged”\n\nIf you want, I can explain this with\nReact useState example + interview trick + real DOM re-render story (very important for interviews).\n\nexplain this for writing blog\n\nHere’s a clean blog-style explanation you can directly use or adapt.\n\n🧠 Mutation vs Immutability in JavaScript (Simple Explanation)\n\nWhen working with JavaScript objects, especially in frameworks like React, you will often hear two important terms:\n\nMutation and Immutability\n\nThese concepts decide how data changes in your application and how efficiently your UI updates.\n\nLet’s understand them in a very simple way.\n\n📦 1. What is an Object in JavaScript?\n\nIn JavaScript, objects are stored in memory like this:\n\nlet state = {\ncount: 0\n};\n\nHere, state is not the actual data. It is a reference pointing to the object in memory.\n\n🔴 2. Mutation (Changing the Same Object)\n\nMutation means modifying the original object directly.\n\nExample:\nlet state = {\ncount: 0\n};\n\nstate.count = 1;\n\nconsole.log(state);\nWhat is happening?\nWe are changing the value inside the same object\nNo new object is created\nMemory reference stays the same\nVisualization:\n\nBefore:\n\nstate → { count: 0 }\n\nAfter mutation:\n\nstate → { count: 1 }\n\n👉 Same object, just updated inside\n\n⚠️ Problem with mutation\n\nMutation can create issues in frameworks like React because:\n\nThe reference does NOT change\nReact may not detect updates properly\nUI updates can become unpredictable\n🟢 3. Immutability (Creating a New Object)\n\nImmutability means not changing the original object, but creating a new one with updated values.\n\nExample:\nlet state = {\ncount: 0\n};\n\nstate = {\ncount: state.count + 1\n};\n\nconsole.log(state);\nWhat is happening?\nA new object is created\nOld object remains unchanged\nReference changes\nVisualization:\n\nBefore:\n\nstate → { count: 0 }\n\nAfter immutability:\n\nold state → { count: 0 }\nnew state → { count: 1 }\n\n👉 Completely new object is created\n\n⚖️ 4. Mutation vs Immutability (Key Difference)\nFeature Mutation Immutability\nObject change Same object New object\nMemory Same reference New reference\nSafety Risky in large apps Safe and predictable\nReact behavior May not re-render Always triggers update\n🚀 5. Why React Prefers Immutability\n\nReact depends on detecting changes using reference comparison:\n\nIf object reference changes → React re-renders UI\n\nSo this works well:\n\nsetState({ count: state.count + 1 });\n\nBut this can fail:\n\nstate.count++;\n\nBecause React may not detect the change properly.\n\n🧠 6. Simple Real-Life Analogy\nMutation:\n\nYou edit the same notebook page ✏️\nEverything changes in place.\n\nImmutability:\n\nYou write a new page 📄\nOld page stays unchanged.\n\n🎯 7. Final Summary\nMutation = change the same object\nImmutability = create a new object\nReact prefers immutability for predictable updates\nGood developers avoid mutation in state handling\n🔥 One-line takeaway\n\n“Mutation changes data in place, immutability creates a new version of data without touching the original.”",
  "title": "Mutating state | Immutating state"
}