https://github.com/tj/react-batch
Batch component for performant frequent updates (flush on count or interval)
https://github.com/tj/react-batch
react react-component
Last synced: 5 months ago
JSON representation
Batch component for performant frequent updates (flush on count or interval)
- Host: GitHub
- URL: https://github.com/tj/react-batch
- Owner: tj
- Created: 2017-05-21T01:18:34.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-28T10:55:13.000Z (almost 8 years ago)
- Last Synced: 2024-12-09T21:36:23.111Z (about 1 year ago)
- Topics: react, react-component
- Language: JavaScript
- Homepage:
- Size: 53.7 KB
- Stars: 250
- Watchers: 6
- Forks: 11
- Open Issues: 2
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# 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
```js
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
Count: {items.length}
Renders: {this.renders++}
{items.map((v, i) => - {v}
)}
}
render() {
return
}
}
```
---
