React Performance Hooks

Debounce and throttle your functions to gain performance boost!

• Better Typed

Features

• :rocket: Simple, fast and light
• :factory: Debounce and Throttle
• 🪗 Lifecycle events handling

Install

npm install --save @better-typed/react-performance-hooks

or

yarn add @better-typed/react-performance-hooks

useDebounce

This hook allows debouncing of the given function.

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

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

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

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

  return (
    // ...
  )
}

useThrottle

This hook allows debouncing of the given function.

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

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 (
    // ...
  )
}