JavaScript · Advanced level

Advanced level · Module 3: Application Architecture without a Framework · Lesson 2 of 4

State Management and Rendering

Keep application state in one store, update it immutably and re-render views when it changes.

In this lesson you will

  • Build a small store with subscribe and update
  • Update state immutably and render efficiently

Key concepts

storesubscribe / notifyimmutable updateselective rendering

The lesson

A store holds the application state and lets views subscribe to changes: store.update(fn) produces a new state and notifies subscribers, which re-render. Every change goes through the store, so it is easy to log and debug.

Update immutably: return new objects and arrays instead of changing existing ones — { ...state, visits: [...state.visits, visit] }. Comparing old and new references then tells you quickly what changed.

Re-rendering everything is simple but can be slow for large lists. Render only the parts whose data changed, or update individual rows — the core idea that frameworks automate.

Step by step

  1. Write a createStore function with getState, update and subscribe.
  2. Move the app's state into the store.
  3. Make the views subscribe and re-render.
  4. Log every state change during development.

Practice activity

Move the visit tracker's state into a store and connect all views to it.

Expected result: All views update through the store and a log shows every state change.

Check your understanding

  1. Why update state immutably?

    Show answer

    Changes are explicit and easy to detect by comparing references.

  2. What does subscribe do in a store?

    Show answer

    Registers a function to be called whenever the state changes.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.