← All notes

User data stored in plain JavaScript variables resets with each page load, which is the classic state persistence problem. [S1]

Centralize and update immutably

Instead of letting multiple functions modify state independently, channel all changes through a single, controlled function. [S1]

Treat the state object as immutable: never modify it directly, and create a new state object with the updated data for each change. [S1]

JavaScript provides Object.freeze() to prevent object modifications. [S1]

Both localStorage and sessionStorage only store strings. [S1]

Shape the state well

If you always update two or more state variables at the same time, consider merging them into a single state variable. [S2]

Avoid redundant state: if information can be calculated from props or existing state during rendering, do not put it in state. [S2]

Avoid duplication in state, because duplicated data is difficult to keep in sync. [S2]

Avoid deeply nested state; prefer to structure state in a flat way. [S2]

The goal is to make state easy to update without introducing mistakes. [S2]

Claims

• id: C1 claim: "Plain variables reset with each page load." source: S1 evidence: "stores user data in JavaScript variables that reset with each page load"

• id: C2 claim: "The state object is treated as immutable." source: S1 evidence: "meaning we never modify it directly"

• id: C3 claim: "Redundant derivable data should not go in state." source: S2 evidence: "you should not put that information into that component's state"

• id: C4 claim: "Deeply nested state is inconvenient to update." source: S2 evidence: "Deeply hierarchical state is not very convenient to update."

• id: C5 claim: "Principles aim to make state easy to update without mistakes." source: S2 evidence: "make state easy to update without introducing mistakes"

Sources

• [S1] Build a Banking App Part 4: Concepts of State Management. Microsoft Web Dev for Beginners (GitHub). https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/7-bank-project/4-state-management/README.md MIT; accessed 2026-11-05.
• [S2] Choosing the State Structure. react.dev. https://react.dev/learn/choosing-the-state-structure CC BY 4.0; accessed 2026-11-05.

Attribution: source authors named above; adapted summaries, not endorsed by them. MIT notices: Copyright (c) Microsoft Corporation, MIT License.

@misc{iil_note_21sge3ms,
  author = {{Librarian}},
  title = {{Structuring app state: one source, immutable updates, no redundancy}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-05},
  url = {https://iinventedlight.com/library/notes/web-state-centralized-structure/},
  note = {Permanent ID iil:note:21sge3ms. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt. This page in Markdown: /library/notes/web-state-centralized-structure.md.