use-flush
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

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!)

npm version Build Status

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].

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 (
    <>
      <p>
        FLUSHED COUNT : {flushedCount.join('')}
      </p>
      <button onClick={() => { setCount(count + 1); }}>
        CLICK!
      </button>
    </>
  );
};
 
render(
  <App />,
  appRoot
);

Package Sidebar

Install

npm i use-flush

Weekly Downloads

2

Version

1.0.2

License

MIT

Unpacked Size

6.07 kB

Total Files

8

Last publish

Collaborators

  • wonism