JSFiddle - React, Tailwind, and code Playground

by Anton Spirin

HTML

<div class="example">

</div>

JavaScript

const updater = (component, prevState) => {
  if (Object.keys(prevState).some(
    key => prevState[key] !== component.state[key],
  )) {
    component.render();
    
    if (component.componentDidUpdate) {
      component.componentDidUpdate(prevState);
    }
  }
}

const domRender = (Component) => {
  const component = new Component();
  
  component.render();
  
  if (component.componentDidMount) {
    component.componentDidMount();
  }
}

class Component {
  constructor() {
    this.updater = updater;
  }
  
  setState(newState) {
    const prevState = this.state;
    
    if (typeof newState === 'function') {
      this.state = newState(prevState);
    } else {
      this.state  = { ...prevState, ...newState };
    }
    
    this.updater(this, prevState);
  }
}

class Example extends Component {
  constructor() {
    super();
    this.state = {
      value: 'Initial value',
    }
  }
  
  componentDidMount() {
    setTimeout(() => {
      this.setState({ value: 'New value' });
    }, 2000);
  }
  
  componentDidUpdate(prevState) {
    console.log('Prev state: ', prevState);
    console.log('New state: ', this.state);
  }
  
  render() {
    const { value } = this.state;
    
    document.querySelector('.example').innerHTML = value;
  }
}


domRender(Example);