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

| Prop Name | Description | |:----------------------:|:---------------------------------------------------------------------------------------------------------:| | renderCondition | The flag that decides if the children should be rendered | | delay (Optional) | Debouncing delay before mounting the children after the renderCondition flag is set to true(milliseconds) | | minDuration (Optional) | Minimum amount of time the children will stay mounted(milliseconds) | | onRender (Optional) | A callback function that will be called when the children is mounted | | onHide (Optional) | A callback function that will be called when the children is unmounted |