BauDerive.md

Bau Derive

The bau.derive function creates a new state that derives its value from one or more states, when these states are updated, the derived state's value is updated. bau.derive can also used to handle side effects.

const myState = bau.state("");
const derivation = () => {
  // This function is executed when myState is mutated, ex: myState.val = "My next text"
  return myState.val.length < 2;
};

const myDerivedState = bau.derive(derivation);

console.log(myDerivedState.val); // false
myState.val = "my text";
console.log(myDerivedState.val); // true

For Vue developers, bau.derive is equivalent to computed

The derivation function and the derived state myDerivedState have some restrictions:

1. Do not mutate myDerivedState: (This is directly restricted in TypeScript)

myDerivedState.val = false; // DON'T DO

2. Do not mutate myState in the derivation function, that will trigger an infinite loop

Use cases

Enable/Disable a button

The button is enabled or disabled based on some condition of the input state, in this case, the button is disabled when the input length is less than 2.

const TestDerived = () => {
  const inputState = bau.state("");
  const buttonDisabledState = bau.derive(() => {
    return inputState.val.length < 2;
  });

  return section(
    "Test Derived",
    input({
      placeholder: "Enter username",
      value: inputState,
      oninput: ({ target }) => (inputState.val = target.value),
    }),
    button(
      {
        disabled: buttonDisabledState,
        onclick: () => {
          /* do stuff*/
        },
      },
      "Login"
    )
  );
};

Derive value or array from an array

In the todoapp example, we need to derive the number of completed tasks from the todos array, we also derive a array of todos in the showing state.

const nowShowingState = bau.state("all");
const todosState = bau.state([]);

// Return a number of the completed todos
const completedCountState = bau.derive(
  () => todosState.val.filter(({ completed }) => completed).length
);

// Return a filtered array of todos
const todosShowingState = bau.derive(() =>
  todosState.val.filter(showTodos(nowShowingState.val))
);

Side effects

bau.derive can also be used to produce side effects when some states are mutated. In this case, ignore the bau.derive return value.

const inputState = bau.state("");
bau.derive(() => {
  console.log("inputState: ", inputState.val);
});

For React developers, bau.derive is similar to useEffect. However, there is no need to provide the dependencies, bau.derive collects the dependencies automatically when the derivation function is called for the first time.