debounced-render v1.1.4

Easy to use wrapper react component to debounce the render of its children

Can be used in situtations like instant flickering of a loader if the loading process finishes very quickly

Examples:

import { DebouncedRender } from "debounced-render";

function MyComponent({ loading }) {
  return (
    // If the loading flag switches back to false before 200ms the <Loader /> component won't be rendered at all
    <DebouncedRender delay={200} renderCondition={loading}>
      <Loader />
    </DebouncedRender>
  );
}

import { DebouncedRender } from "debounced-render";

function MyComponent({ loading }) {
  return (
    // <Loader /> component will be rendered for at least 500ms after it is mounted.
    // Even if the loading flag switches to false immediately after child component is mounted
    <DebouncedRender 
        renderCondition={loading} 
        minDuration={500}>
      <Loader />
    </DebouncedRender>
  );
}

For smoother experience delay and minDuration should be used together

import { DebouncedRender } from "debounced-render";

function MyComponent({ loading }) {
  return (
    <DebouncedRender 
        renderCondition={loading} 
        // delay and minDuration can be used at the same time
        delay={500}
        minDuration={200}>
      <Loader />
    </DebouncedRender>
  );
}

Props