JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1862716
  • Score
    100M100P100Q197052F
  • License MIT

React hook which returns the latest callback without changing the reference

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-latest-callback) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    use-latest-callback

    React hook which returns the latest callback without changing the reference.

    This is useful for scenarios such as event listeners where you may not want to resubscribe when the callback changes.

    Installation

    Open a Terminal in the project root and run:

    npm install use-latest-callback

    Usage

    The useLatestCallback hook accepts a function as its argument and returns a function that preserves its reference across renders.

    const useLatestCallback = require('use-latest-callback');
    
    // ...
    
    function MyComponent() {
      const callback = useLatestCallback((value) => {
        console.log('Changed', value);
      });
    
      React.useEffect(() => {
        someEvent.addListener(callback);
    
        return () => someEvent.removeListener(callback);
      }, [callback]);
    
      return <>{/* whatever */}</>;
    }

    It's important to note that the callback is not intended to be called during the render phase. Only call the callback in response to an event.