Skip to content

A function to prevent unnecessary render calls ( almost like React.memo )

Notifications You must be signed in to change notification settings

sztadii/react-memo-debounce

Repository files navigation

react-memo-debounce

Description:

A function to prevent unnecessary render calls.
Almost like React.memo, but by default we will deeply compare values with debounce effect.
So we will avoid many unnecessary render calls.
It can be useful when each render operation is doing some expensive calculation.

How to install

npm install react-memo-debounce

Examples

Here we will wait 1000ms and compare props values by our isDeepEqual function

Import React from 'react'
import memoDebounce from 'react-memo-debounce'

function SimpleComponent(props) {
  const { title, description } = props
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  )
}

export default memoDebounce(SimpleComponent, { delay: 1_000 })

Here we will wait 500ms and compare props by own function

Import React from 'react'
import memoDebounce from 'react-memo-debounce'

function SimpleComponent(props) {
  const { title, description } = props
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  )
}

const isEqual = (prevProps, nextProps) => prevProps.title === nextProps.title
export default memoDebounce(SimpleComponent, { delay: 500, isEqualFunction: isEqual })

About

A function to prevent unnecessary render calls ( almost like React.memo )

Resources

Stars

Watchers

Forks

Packages

No packages published