Batch component for performant frequent updates (flush on count or interval)
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
src
.gitignore
Readme.md
package.json
yarn.lock

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 />
  }
}