Wondering what’s next for npm?Check out our public roadmap! »

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

    Install

    npm i use-flush

    DownloadsWeekly Downloads

    0

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    6.07 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar