@byteclaw/use-static-callback
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    @Byteclaw/use-static-callback

    Variations of React useCallback hook that can be used with declared functions.

    Installation

    npm install @byteclaw/use-static-callback
    yarn add @byteclaw/use-static-callback

    Usage

    useStaticCallback hook

    Just declare a function and use useStaticCallback to make a callback from it. The callback will be called with arguments specified as an array in second argument. The actual the callback is memoized until the callback or arguments change.

    import { useStaticCallback } from '@byteclaw/use-static-callback';
    import React from 'react';
    
    function onClickHandler() {
      console.log('onClick');
    }
    
    function Component() {
      const onClick = useStaticCallback(onClickHandler);
    
      return <button onClick={onClick} />;
    }
    
    function onClickHandlerWithArgs(a, b) {
      console.log(a, b); // prints true, false
    }
    
    function ComponentWithArgsInCallback() {
      const onClick = useStaticCallback(onClickHandlerWithArgs, [true, false]);
    
      return <button onClick={onClick} />;
    }

    useStaticCallbackCreator hook

    Just declare a function that returns a callback and use useStaticCallbackCreator hook to make a callback from it. The hook will pass arguments provided in an array (second argument) to a callback creator and returns a callback returned by the creator. The actual callback is memoized until the callback creator or arguments change.

    import { useStaticCallbackCreator } from '@byteclaw/use-static-callback';
    import React from 'react';
    
    function onClickHandlerCreator() {
      return e => console.log('onClick', e);
    }
    
    function Component() {
      const onClick = useStaticCallbackCreator(onClickHandlerCreator);
    
      return <button onClick={onClick} />;
    }
    
    function onClickHandlerWithArgsCreator(a, b) {
      return e => console.log(a, b, e); // prints true, false
    }
    
    function ComponentWithArgsInCallback() {
      const onClick = useStaticCallbackCreator(onClickHandlerWithArgsCreator, [
        true,
        false,
      ]);
    
      return <button onClick={onClick} />;
    }

    Install

    npm i @byteclaw/use-static-callback

    DownloadsWeekly Downloads

    281

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    23.1 kB

    Total Files

    13

    Last publish

    Collaborators

    • jurajhrib
    • michalkvasnicak