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