Circular app context dependency with React Context - reactjs

Question

I have two hooks, useA and useB, which perform expensive operations (let's assume network API calls) and these values need to be saved into a global application state (AppContext) using React's Context API. Furthermore, the behaviour of the second hook, useB, depends on the result of the first hook, useA.
These hooks are invoked once the application is started and the context provider is created. I call the hooks in the context provider component, and I consume the same context inside the second hook. This creates a problem which results into stale information; the useContext(AppContext) inside useB does not provide correct results for useA. Because the result of useA is needed outside of the context of the useB hook, I cannot move its invocation under the useB hook. Otherwise, this would result into two calls to useA, once inside the context provider and once inside useB.
How could this issue be solved?
const useA = () => {
const api = useApi()
const [state, setState] = useState(null)
useEffect(() => {
api.someFn().then((result) => {
setState(result)
})
}, [api])
return state
}
const useB = () => {
const api = useApi()
const { a } = useContext(AppContext)
const [state, setState] = useState(null)
useEffect(() => {
api.someOtherFn(a.someVariable).then((result) => {
setState(result)
})
}, [api, a])
return state
}
const AppContext = createContext({ a: null, b: null })
const AppContextProvider = (children) => {
const a = useA()
const b = useB()
const context = { a, b }
return <AppContext.Provider value={context}>{children}</AppContext.Provider>
}
const App = () => {
return (
<AppContextProvider>
<Router>
...
</Router>
</AppContextProvider>
)
}

Answer 1

Maybe the following will be useful:
const useA = () => {
const api = useApi()
const [state, setState] = useState(null)
useEffect(() => {
api.someFn().then((result) => {
setState(result)
})
}, [api])
return state
}
const useB = (a) => {
const api = useApi()
const [state, setState] = useState(null)
useEffect(() => {
if (a && a.someVariable) {
api.someOtherFn(a.someVariable).then((result) => {
setState(result)
})
}
}, [api, a])
return state
}
const AppContext = createContext({ a: null, b: null })
const AppContextProvider = (children) => {
const a = useA()
const b = useB(a)
// It is not recommended to pack several values into some object and share it via context
// Cause consumers will be retriggered on each call to AppContextProvider
const context = { a, b }
return <AppContext.Provider value={context}>{children}</AppContext.Provider>
}
const App = () => {
return (
<AppContextProvider>
<Router>
...
</Router>
</AppContextProvider>
)
}
Please read about multiple contexts https://reactjs.org/docs/context.html#consuming-multiple-contexts