Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

use-flush

wonism18MIT1.0.2TypeScript support: included

React hooks for flushing frequently changing state. It can optimize application via reducing re-rendering caused of changing state.

react, hooks, flush, flushing, debounce, throttle, performance, frequent, effect

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

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

changelog

Changelog

1.0.0 - 2019. 05. 09

  • release use-flush

1.0.1 - 2019. 05. 09

  • add explanation in README.md

1.0.1 - 2019. 05. 12

  • add test codes
  • add lint rules