Wrap a function to ensure you never call it if a component is unmounted, useful to avoid cases where an async code could finish after a component has unmounted and it tries to update a state.
Install it
$ yarn add use-safe-callback
Import it
import useSafeCallback from "use-safe-callback"
Wrap your unsafe callback
const [state, unsafeDispatch] = React.useReducer(reducer, initialState);
const safeDispatch = useSafeCallback(unsafeDispatch);
Use it as your unsafe callback
safeDispatch({ type: "MY_ACTION" })
Your unsafe callback will not run if the component is unmounted, preventing you to trying to update the state.
Based on a similar Hook by Tanner Linsley.
The MIT License.