react-memo-debounce
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.2 • Public • Published

    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 })
    

    Install

    npm i react-memo-debounce

    DownloadsWeekly Downloads

    56

    Version

    1.2.2

    License

    ISC

    Unpacked Size

    11.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • sztadii