React hook for AbortController with reset

abort-controller.js

function useAbortController(runEffect=false, runLayoutEffect=false) {
    const acRef = useRef()
    const getAbortController = useCallback(() => {
        if (!acRef.current) {
            acRef.current = new AbortController()
        }
        return acRef.current
    }, []);

    if (runEffect) {
        useEffect(() => {
            return () => {
                acRef.current && acRef.current.abort()
            }
        }, [])
    }
    if (runLayoutEffect) {
        useLayoutEffect(() => {
            return () => {
                acRef.current && acRef.current.abort()
            }
        }, [])
    }

    const resetAbortController = useCallback(() => {
        acRef.current = new AbortController()
    }, [])

    return [getAbortController, resetAbortController]
}

Example: onCancel aborts the submit process and creates new controller for one more submit.

const [ getAC, resetAC ] = useAbortController(true);

const onSubmit = useCallback(data => {
    dispatch(textRoomCreate({ data, signal: getAC().signal }))
}, []);

const onCancel = useCallback(() => {
    getAC().abort();
    resetAC();
}, []);

Why wrap hooks in a condition?

Depends on your higher components logic, you may remove the conditions, leave "useEffect" and remove "useLayoutEffect".

@sagarpanchal You are right. My gist is a simple example with not changeable params of useAbortController.