use-safe-callback

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.

Usage no npm install needed!

<script type="module">
  import useSafeCallback from 'https://cdn.skypack.dev/use-safe-callback';
</script>

README

useSafeCallback CI Publish

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.

Usage

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.

Author

Based on a similar Hook by Tanner Linsley.

License

The MIT License.