State Equality Behavior

This example demonstrates how DOM++ handles repeated state updates using the same value.

Unlike frameworks that perform implicit equality checks, DOM++ reruns reactive setters whenever state mutation occurs.

Important:

DOM++ currently does not perform automatic equality comparison before rerunning reactive setters.

If setState() is called, reactive setters rerun — even if the next value matches the previous value.

This keeps runtime behavior:

deterministic
mutation-first
explicit

// =====================================
// ELEMENT
// =====================================
const counter =
  document
    .createElement("div")
    .setState({
      count: 0,
      rerenders: 0
    })
    .setChildren(({
      state,
      setState
    }) => {
      // =================================
      // TRACK RERENDERS
      // =================================
      state.rerenders++;

      return [
        // =============================
        // COUNT
        // =============================
        document
          .createElement("div")
          .setAttributes({
            class: "count"
          })
          .setText(
            `${state.count}`
          ),

        // =============================
        // RERENDERS
        // =============================
        document
          .createElement("div")
          .setAttributes({
            class: "rerenders"
          })
          .setText(
            `Reactive reruns: ${state.rerenders}`
          ),

        // =============================
        // BUTTONS
        // =============================
        document
          .createElement("div")
          .setAttributes({
            class: "row"
          })
          .setChildren(
            // ===========================
            // INCREMENT
            // ===========================
            document
              .createElement("button")
              .setText(
                "Increment"
              )
              .setEvents({
                click() {
                  setState({
                    count:
                      state.count + 1
                  });
                }
              }),

            // ===========================
            // SAME VALUE
            // ===========================
            document
              .createElement("button")
              .setText(
                "Set Same Value"
              )
              .setEvents({
                click() {
                  setState({
                    count:
                      state.count
                  });
                }
              }),

            // ===========================
            // RESET
            // ===========================
            document
              .createElement("button")
              .setText(
                "Reset"
              )
              .setEvents({
                click() {
                  setState({
                    count: 0
                  });
                }
              })
          )
      ];
    });

// =====================================
// APP
// =====================================
app.setChildren(
  counter
);

Try pressing "Set Same Value" repeatedly.

Notice that rerender count continues increasing even though the value itself does not change.