React Hook access in an onclick function - reactjs

Question

I need to refresh a component using a button and a HTTP fetch request, so I've a hook that calls the function but I need to fire it from an onClick handler in a button:
const {useEffect, useState, useRef} = React;
const useRefreshArtifacts = (setArtifactsStore) => {
const refresh = () => {
console.log("do some stuff with state");
const [match, setMatch] = useState({});
};
return {refresh};
};
function ArtifactApp(props) {
const {refresh} = useRefreshArtifacts("");
return (<div><button onClick={refresh}>Hello</button></div>);
}
const AppContainer = () => {
return (<div><ArtifactApp /></div>);
}
ReactDOM.render(<AppContainer />, document.getElementById("root"));
https://jsfiddle.net/jre2cwbf/
Which gives the usual Invalid hook call. Hooks can only be called inside of the body of a function component but I can't figure out how to externalise the hook call, I've tried a useCallback but not got any close.
Any help appreciated.

Answer 1

Modify your code in this way:
const {useEffect, useState, useRef} = React;
const useRefreshArtifacts = (setArtifactsStore) => {
const [match, setMatch] = useState("Hello");
const refresh = () => {
console.log("do some stuff with state");
setMatch("refresh")
};
return {match, refresh};
};
function ArtifactApp(props) {
const {match, refresh} = useRefreshArtifacts("");
return (<div><button onClick={refresh}>{match}</button></div>);
}
const AppContainer = () => {
return (<div><ArtifactApp /></div>);
}
ReactDOM.render(<AppContainer />, document.getElementById("root"));
As you can see I have:
move useState outside refresh function;
set match on refresh function;
returned match from custom hook (useRefreshArtifacts) to use it on component.
Here your fiddle modified.