Glossary

Information

Information is a set of knowledge about an object.

Data

Data is encoded information.

State

State is data stored in the system.

Usually state represents data with a long lifespan.

For example, if data is used only for intermediate calculations (like variable i in a loop), this is not considered state.

State is a "long-lived" variable, such as state, which changes in response to user actions, function calls and other events.

// State
let state = 1;

function multiple() {
  // Intermediate data
  let tempState = state;
  for (let i = state; i < state * 2; i++) {
    tempState += 1;
  }
  state = tempState;
}

Examples of states: State manager, useState, DOM, Cookie, Database, localStorage. Code is also a state.

Duplication is when there are two or more states in the system that contain different data, but when decoded give the same information.

Example of state duplication:

const user = {
  id: 1,
  age: 14,
};

const adult_users = {
  1: false,
};

In this example, the variables user and adult_users represent state duplication. Although they contain different data, both variables provide information about whether the user is an adult. The user variable stores age, while adult_users stores a boolean value indicating adulthood. Both states can be used to determine the same fact, leading to information duplication.

Cache

Cache is state duplication to save computing power.

Cache example:

const [users, setUsers] = useState();

useEffect(() => {
  fetch("http://localhost:3000/users")
    .then((r) => r.json())
    .then(setUsers);
}, []);

function getUserById(id) {
  return users.find((user) => user.id === id);
}

In the example above, useState is used to store users and useEffect for one-time data loading from the server. Data is cached in users. The getUserById function searches for a user in this cache, avoiding repeated requests to the server.