Safe useReducer dispatch

July 25, 2022

To make sure that useReducer dispatch runs only if component is mounted we can obtain it through useSafeDispatch hook

function useSafeDispatch(dispatch) {
    const mountedRef = useRef(false)
    
    useLayoutEffect(() => {
        mountedRef.current = true

        return () => {
            mountedRef.current = false
        }
    })

    return useCallback(
        (...args) => {
            if (mountedRef.current) {
                dispatch(...args)
            }
        },
        [dispatch],
    )
}