Here is a useSafeState hook that ignores state changes after a component has been unmounted.

useSafeState.tsx

import {
    DependencyList,
    Dispatch,
    MutableRefObject,
    SetStateAction,
    useCallback,
    useEffect,
    useRef,
    useState
} from 'react';

/**
 * Returns a ref that indicates if the component has unmounted.
 */
export const useUnmounted = (): MutableRefObject<boolean> => {
    const ref = useRef<boolean>(false);
    useEffect(() => () => (ref.current = true), []);
    return ref;
};

/**
 * Returns a callback that only executes if the component is mounted.
 */
export const useSafeCallback = <T extends (...args: any[]) => any>(
    callback: T,
    deps: DependencyList
) => {
    const unmounted = useUnmounted();
    return useCallback(
        (...args) => {
            if (!unmounted.current && callback) {
                callback(...args);
            }
        },
        [callback, ...deps]
    );
};

/**
 * Returns a state hook that can safely be used after component is unmounted.
 */
export const useSafeState = <S,>(
    initialState: S | (() => S)
): [S, Dispatch<SetStateAction<S>>] => {
    const [value, setValue] = useState(initialState);
    const safeValue = useSafeCallback(setValue, []);
    return [value, safeValue];
};