React nested Hooks with state - reactjs

Question

An extension of a question I was just answered but:
if you want to nest hooks that call state, is there a sane way of doing it, of should you just not do it?
For example:
const {useEffect, useState, useRef} = React;
const someSubHook = (setArtifactsStore) => {
const [match, setMatch] = useState("Hello");
const subhook = () => {
console.log("do some stuff with state");
setMatch("subhook")
};
return {match, sunhook};
};
const useRefreshArtifacts = (setArtifactsStore) => {
const [match, setMatch] = useState("Hello");
const refresh = () => {
console.log("do some stuff with state");
setMatch("refresh")
let h = someSubHook("sub");
h.subook()
};
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"));
https://jsfiddle.net/wu5ej3Lm/
Calling this throws an Invalid hook call. Hooks can only be called inside of the body of a function component.
Basically the codebase I have has a hook that performs some logic, and then has another hook that does some http post requests, both of which use state. I've inherited this so I'm finding my way through it, but I'm not sure if sticking all this as hooks is really best practice if there is a dependency on the state management.

Answer 1

Try to modify code in this way:
const {useEffect, useState, useRef} = React;
const someSubHook = (setArtifactsStore) => {
const [match, setMatch] = useState("Hello");
const subhook = () => {
console.log("do some stuff with state from subhook");
setMatch("subhook")
};
return {match, subhook};
};
const useRefreshArtifacts = (setArtifactsStore) => {
const [match, setMatch] = useState("Hello");
const {match_subhook, subhook} = someSubHook("sub");
const refresh = () => {
console.log("do some stuff with state from refresh");
setMatch("refresh")
subhook()
};
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"));
I have:
move let h = someSubHook("sub"); outside refresh function in this way const {match_subhook, subhook} = someSubHook("sub");
called subhook() in refresh function.
Here your fiddle modified.