class Observer {
  constructor(value) {
    this.subscribers = new Set();
    this.value = value;
    this.setValue = this.setValue.bind(this);
    this.observe = this.observe.bind(this);
  }

  setValue(newValue) {
    let self = this;
    self.value = newValue;

    for (const fn of self.subscribers) {
      this.observe(fn);
    }
  }

  observe(fn) {
    let self = this;
    self.subscribers.add(fn);
    return fn({ value: self.value, setValue: self.setValue });
  }
}

const { observe, setValue } = new Observer(0);

const Counter = () =>
  observe(({ value }) => {
    return (
      <div>
        <p>{value}</p>
        <button onClick={() => setValue(value + 1)}>Click me</button>
      </div>
    );
  });

const Counter2 = () =>
  observe(({ value: count, setValue: setCount }) => {
    return (
      <div>
        <p>{count}</p>
        <button onClick={() => setCount(count + 1)}>Click me</button>
      </div>
    );
  });

const App = () => {
  return (
    <>
      <Counter />
      <Counter2 />
    </>
  );
};

I have 2 observe function calls . I’ve made Observer in which in setValue call , I wan’t it to trigger observe on Counter and Counter2. How it it possible to do ? It calls this.observe on setValue call , but for sure it doesn’t change value on Counter component, and rerender not happens.