Nocturnal Pumpkin Maelstrom

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

    1.0.5 • Public • Published

    useRerenderInterval

    Sometimes, however bad or antipattern-y it feels. You jsut have to rerender a component on an interval. This hook makes it easy to do it efficiently.

    Installation

    npm install --save use-rerender-interval

    or for yarn masterrace ...

    yarn add use-rerender-interval

    API

    Parameters

    Parameter Name Type Default Value Required Description
    interval number 1000 no The interval (in milliseconds) at which the calling component should re-render.
    predicate boolean | Function no Optional. Pass true to enable interval, pass false to clear interval. Pass function that returns a boolean as a function of count (or any other external variable)

    Return Type

    The hook returns a number called count. This is the number of times, the component has been re-rendered due to this hook.

    Examples

    Re-render Every Second; Forever.

    import useRenderInterval from 'use-render-interval';
    
    export default function Forever() {
        const count = useRenderInterval();
        return <p>This will re-render every second, forever. [{count}]</p>;
    }

    POV: You Hate Default Vales

    I get it, default values are less readable.

    export default function Forever() {
        const count = useRenderInterval(1000);
        return <p>{count}</p>;
    }

    Re-render Every Second, For 30 Seconds

    export default function JustTenTimes() {
        const limit = useRef(Date.now() + 30*1000);
    
        // Note: We didn't use a predicate function, because re-rendering
        //       runs the entire component function.
        const count = useRenderInterval(1000, Date.now() <= limit.current);
        return <p>{count}</p>;
    }

    Re-render Every 2 Seconds, 10 Times

    function JustTenTimes() {
        // Note: it says less than 10, because the 10th time the interval logic is
        //       executed, the interval counter is still 9. (Ala for loops)
        const count = useRenderInterval(2000, count => count < 10);
        return <p>{count}</p>;
    }

    Install

    npm i use-rerender-interval

    DownloadsWeekly Downloads

    2

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    7.73 kB

    Total Files

    7

    Last publish

    Collaborators

    • omranjamal