Reacting Nodes

ReactingNodes.js

// https://onecompiler.com/javascript/3xyh52rrn

class ReactingNodes {
  #nodes = {};
  
  node(component) {
    return [this.#nodes[component], component in this.#nodes, this.update(component)];
  }

  update(component) {
    return value => {
      if (value === this.#nodes[component]) return;
      console.log(`old: ${this.#nodes[component]} - new: ${value}`);
      this.#nodes[component] = value;
      component();
    };
  }
  
  useState(component, defaultValue) {
    const [value, exists, update] = this.node(component);
  
    return [exists ? value : defaultValue, update];
  }
}

const nodes = new ReactingNodes();

function useState(defaultValue) {
  return nodes.useState(this, defaultValue);
}

function Component() {
  const [time, setTime] = useState.call(Component, Date.now());
  
  console.log(time);
  
  setTimeout(() => {
    setTime(Math.random() < .75 ? time : Date.now());
  }, 1000);
}

function App() {
  return (
    Component()
  );
}

App();