useFunctionState

React's useState hook has special behavior if it is passed a function as initial or updated state. This can be convenient, but makes life hard if you actually just want to store a function in the state.

This hook allows you to easily store a function as React state. It is implemented via a simple useReducer call and has proper TypeScript definitions.

Example

import useFunctionState from 'use-function-state';
 
const initialFn = () => {};
const Comp = () => {
  const [fn, setFn] = useFunctionState(initialFn);
 
  return (
    <>
      {typeof fn /* 'function' (useState would have made this undefined) */}
      {setFn.length /* 1 (the newFn parameter of the setter) */}
    </>
  );
};

See example.test.tsx for a more realistic usage example.