useTypeScriptHappyCallback

Exports Size

Gzip Size

Brotli Size

Source Code

Docs

@types/react uses a more general type (Function) to avoid breaking changes (opens in a new tab) for useCallback. useTypeScriptHappyCallback declared a more specific types, allows TypeScript to infer the types of callback's arguments and return value.

Usage

import { useTypeScriptHappyCallback } from 'foxact/use-typescript-happy-callback';
 
<input
  onChange={useTypeScriptHappyCallback(
    (event) => {
  // ^? React.ChangeEvent<HTMLInputElement>
      console.log(event.target.value); // Here the type of `event` is inferred
    },
    []
  )}
/>

Note that eslint-plugin-react-hooks (opens in a new tab) requires extra configuration in order to check dependency array for third-party hooks:

.eslintrc.json

{
  "rules": {
    "react-hooks/exhaustive-deps": [
      "warn",
      {
        "additionalHooks": "useTypeScriptHappyCallback"
      }
    ]
  }
}

But if you do not want to configure it, foxact/use-typescript-happy-callback also provides another named export useCallback as an alias of useTypeScriptHappyCallback:

- import { useCallback } from 'react';
+ import { useCallback } from 'foxact/use-typescript-happy-callback';

useStableHandler useUncontrolled