@zoli-fischer/auto-statedeprecated

Auto compare next and previous state for changes, to reduce render on setState for same values

Usage no npm install needed!

<script type="module">
  import zoliFischerAutoState from 'https://cdn.skypack.dev/@zoli-fischer/auto-state';
</script>

README

@zoli-fischer/auto-state

Auto compare next and previous state for changes, to reduce render on setState for same values

NPM JavaScript Style Guide

React triggers the Render function after every setState. This utility helps to only trigger the render when a state value is actualy changed.

Install

npm install --save @zoli-fischer/auto-state

Usage

import React from 'react'

import AutoState from '@zoli-fischer/auto-state'

class Example extends AutoState {

  constructor(props) {
    super(props);
    this.state = {
      time: new Date().toTimeString(),
    }
  }

  render () {
    return (
      <div>
        <button onClick="() => { this.setState({ time: new Date().toTimeString() }) }">Sync</button>
        <div>{this.state.time}</div>
      </div>
    )
  }
}

Demo

https://zoli-fischer.github.io/auto-state/

License

MIT © zoli-fischer