A React hook for storing a function as state
MIT License
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.
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.