Как реализовать возможность перезагрузки данных в компоненте на хуках?

Question

[Ilya Pavlov]

Есть хук для получения данных:

const useData = ({id, setData}) => {
    let canceled = false;

    const fetchData = useMemo(() => () => {
        new Promise(res => setTimeout(res, 2000))
            .then(() => {
                if(canceled) return;
                console.info('Data fetched!');
                setData(['1', '2', '3'])
            })
    }, [id, setData]);

    const cancel = useMemo(
        () => () => canceled = true,
        [id, setData]
    );

    return [fetchData, cancel];
};

А также есть компонент, который его использует:

const DataComponent= () => {
    const [id, setId] = useState(10);
    const [data, setData] = useState([]);
    const [fetch, cancel] = useData({id, setData});

    useEffect(() => {
        fetch();
        return cancel;
    }, [fetch, cancel]);

    const reload = useCallback(() => {
        cancel();
        // ... ???
    }, [fetch, cancel]);

    return (
        <div>
            <Button onClick={reload}>Reload</Button>
            {data.length !== 0 && data.map((item, i) => <p key={i}>{item}</p>)}
            {data.length === 0 && <p>No data</p>}
        </div>
    )
};

Нужно добавить возможность перезагрузить данные кнопкой Reload в любой момент. Соответственно, если я в reload() просто вызову сначала cancel(), а затем fetch(), то этот fetch уже будет отменен. Как можно на хуках такое сделать?