Batch component for performant frequent updates (flush on count or interval)
JavaScript
Switch branches/tags
Nothing to show
Clone or download
tj Merge pull request #2 from Luchanso/master
Add prop-types validation
Latest commit ee5baf1 May 21, 2017
Permalink
Failed to load latest commit information.
lib rebuild Batch May 21, 2017
src add prop-types validation May 21, 2017
.gitignore Initial commit May 21, 2017
Readme.md Remove godoc badge May 21, 2017
package.json add prop-types package May 21, 2017
yarn.lock add prop-types package May 21, 2017

Readme.md

React Batch

Batches and flushes renders based on the number of items available. Useful for large lists of frequently updated items which would otherwise cause performance problems with React's sync rendering.

Installation

$ yarn add tj/react-batch

Properties

  • count: the number of items available for rendering (required)
  • flushCount: render after a given number of items (required)
  • flushInterval: render after a given interval is exceeded (required)
  • render: render callback (required)
  • debug: enable debug logging

Example

class BatchExample extends Component {
  constructor() {
    super()
    this.list = this.list.bind(this)
    this.state = { items: [] }
    this.renders = 0
  }

  async componentDidMount() {
    while (1) {
      const prev = this.state.items
      const items = [`Hello World #${prev.length}`, ...prev]
      this.setState({ items })
      await sleep(Math.random() * 30)
    }
  }

  list() {
    const { items } = this.state

    return <div>
      <p>Count: {items.length}</p>
      <p>Renders: {this.renders++}</p>
      <ul>
        {items.map((v, i) => <li key={i}>{v}</li>)}
      </ul>
    </div>
  }

  render() {
    return <Batch
      flushCount={10}
      flushInterval={150}
      count={this.state.items.length}
      render={this.list}
      debug />
  }
}