State Is the Application's Current Memory

A snapshot of now

State is the information the application currently needs to behave and render correctly.

Think of state as the application's notebook. The page can change, but the notebook records what is true now: which data arrived, what the user typed and which option is selected.

const state = {
  items: [],
  search: '',
  topic: 'all',
  availableOnly: false,
  selectedId: null
};

Each property answers a current question:

Why does items start empty?

At startup, external data has not arrived. [] truthfully means, "the application currently holds no loaded items." It also gives the property a predictable collection shape, so array operations become possible after loading.

The empty array is not a mistake and it does not mean that the external file is empty. It means: "At this exact moment, the application has received zero items."

Use a delivery example:

Before the delivery: the shelf is empty
After the delivery:  the shelf contains the received books

The shelf is state.items. The delivery will later be fetchResources().

Do not confuse these situations:

An empty items array alone cannot describe all three situations. We will add a status later.

State changes over time

START
state.items = []
      |
      v
data becomes available
      |
      v
state.items = [{...}, {...}, {...}]

For now, imitate the later data load with an assignment:

state.items = resources;
render(state.items);

const does not freeze the object

const state prevents assigning a different object to the variable:

state = {}; // TypeError

It does not make every property immutable:

state.search = 'http'; // allowed
state.items = resources; // allowed

The reference stored by state remains the same while its properties change.

Three different places

Source data       State                    DOM
data.json         current app memory       visible presentation

Editing DOM text does not change state.items. Changing state.items does not update the DOM until rendering runs. Keeping these facts separate prevents many frontend bugs.

Predict the state

Start with the state above. Assign resources to state.items, set state.search to state, and set state.selectedId to 2. Write the complete state object on paper before running anything.

Check one fact at a time. Did the list change? Did the search change? Did selecting id 2 remove any item? A state update should change only the properties the action concerns.

What to remember

State describes what the application knows and what the user currently intends. items starts empty because loading has not completed. The DOM is a presentation of state, not the state itself.