https://github.com/wonism/use-flush
React hooks for flushing frequent effect. It can optimize application via reducing re-rendering caused of effect
https://github.com/wonism/use-flush
hooks performance react reactjs
Last synced: about 2 months ago
JSON representation
React hooks for flushing frequent effect. It can optimize application via reducing re-rendering caused of effect
- Host: GitHub
- URL: https://github.com/wonism/use-flush
- Owner: wonism
- License: mit
- Created: 2019-05-08T16:03:54.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-12T14:58:10.000Z (almost 6 years ago)
- Last Synced: 2025-02-14T21:48:02.774Z (2 months ago)
- Topics: hooks, performance, react, reactjs
- Language: TypeScript
- Size: 88.9 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Use Flush
> React hooks for flushing frequently changing state.
> It can optimize application via reducing re-rendering caused of changing state.
> (It has zero-dependencies!)
[](https://badge.fury.io/js/use-flush)
[](https://travis-ci.org/wonism/use-flush)
## Explanation
Let's assume that the state will be changed very frequently like below.
- `+` means every **n seconds**.
- `*` means state is **changed**.
```
+--------+--------+--------+--------
* * * ** *** * * *
```
The **flushed state** will be changed in every **n seconds** like below.
```
+--------+--------+--------+--------
*(3) *(6) *(2)
```
## Installation
```
$ npm i -S use-flush
```
## Usage
If you click 5 times in 2 seconds, `flushedCount` will be `[0, 1, 2, 3, 4]`.
```js
import React, { useState } from 'react';
import { render } from 'react-dom';
import useFlush from 'use-flush';
const appRoot = document.getElementById('app');
const App = () => {
const [count, setCount] = useState(0);
const flushedCount = useFlush(count, 2000);
return (
<>
FLUSHED COUNT : {flushedCount.join(', ')}
{ setCount(count + 1); }}>
CLICK!
>
);
};
render(
,
appRoot
);
```