🎊 React Performance Hooks

About

Debounce and throttle your functions, state and effects to gain performance boost!

Key Features

🔮 Simple usage

🚀 Fast and light

✨ Debounce and Throttle

🎊 Lifecycle debounce and throttle

📡 State debounce and throttle

Installation

npm install --save @better-hooks/performance

or

yarn add @better-hooks/performance

---

Examples

useDeepEffect

This hook deeply compares the dependencies optimizing rerendering effects

import React from "react";
import { useDebounce } from "@better-hooks/performance";

const MyComponent: React.FC = () => {
  const {debounce, reset, active} = useDeepEffect(() => {
    // do something
  }, [{a: 123}]) // <--- we will check if the deps are equal between rerenders

  return (
    // ...
  )
}

---

useDebounce

This hook allows debouncing of the given function. Function will be called after some amount of time from the last execution. We can adjust debounce time with additional props.

import React from "react";
import { useDebounce } from "@better-hooks/performance";

const MyComponent: React.FC = () => {
  const {debounce, reset, active} = useDebounce({ delay: 600 })

  // Standard usage
  const onTyping = () => {
    debounce(() => {
      // debounced logic
    })
  }

  // Dynamic delay value
  const onTypingDynamic = (value: string, customDelay: number) => {
    debounce(() => {
      // debounced logic
    }, { delay: customDelay })
  }

  return (
    // ...
  )
}

---

useDebounceState

This hook allows debouncing of state. Value will be saved after some amount of time from the last execution of set function. We can adjust debounce time with additional props.

import React from "react";
import { useWindowEvent } from "@better-hooks/window";
import { useDebounceState } from "@better-hooks/performance";

const MyComponent: React.FC = () => {
  const [value, setValue] = useDebounceState("20px")

  useWindowEvent("scroll", (e) => {
    setValue(e.scrollY + "px");
  })

  return (
    // ...
  )
}

---

useDebounceEffect

This hook allows debouncing of lifecycle effect.

import React from "react";
import { useDebounceEffect } from "@better-hooks/performance";

const MyComponent: React.FC = (props) => {

  useDebounceEffect(() => {
    // Do something
  }, { delay: 200 }, [props])

  return (
    // ...
  )
}

---

useThrottle

This hook allows debouncing of the given function.

import React from "react";
import { useThrottle } from "@better-hooks/performance";

const MyComponent: React.FC = ({ delay }) => {
  const {throttle, reset, active} = useThrottle(delay)

  // Standard usage
  const onScroll = () => {
    throttle(() => {
      // throttle logic
    })
  }

  // Dynamic delay value
  const onScrollDynamic = (value: string, customDelay: number) => {
    throttle(() => {
      // throttle logic
    }, customDelay)
  }

  return (
    // ...
  )
}

---

useThrottleState

This hook allows throttling of state. We can adjust execution interval time and execution timeout time with additional props.

import React from "react";
import { useWindowEvent } from "@better-hooks/window";
import { useThrottleState } from "@better-hooks/performance";

const MyComponent: React.FC = () => {
  const [value, setValue] =  useThrottleState("20px")

  useWindowEvent("scroll", (e) => {
    setValue(e.scrollY + "px");
  })

  return (
    // ...
  )
}

import React from "react";
import { useWindowEvent } from "@better-hooks/window";
import { useThrottleState } from "@better-hooks/performance";

const MyComponent: React.FC = () => {
  const [value, setValue] =  useThrottleState("20px", {
    interval: 200, // We will save values at least once per 200ms
    timeout: 400 // Last set state action will get triggered after 400ms, we can also disable it
  })

  useWindowEvent("scroll", (e) => {
    setValue(e.scrollY + "px");
  })

  return (
    // ...
  )
}

---

useThrottleEffect

This hook allows debouncing of lifecycle effect.

import React from "react";
import { useThrottleEffect } from "@better-hooks/performance";

const MyComponent: React.FC = (props) => {

   useThrottleEffect(() => {
    // Do something
  }, { interval: 200, timeout: false }, [props])

  return (
    // ...
  )
}