How to execute a function that contains a react hook inside - reactjs

Question

I'm building an app with react and nodeJS. I want to make an API call and use a react hook inside this function to get a token from Auth0 to authenticate with the API.
async function CallApi(userId) {
const { getTokenSilently } = useAuth0();
const token = await getTokenSilently();
try {
const response = await fetch(process.env.API_URL + "users", {
headers: {
Authorization: `Bearer ${token}`,
user_id: userId
}
});
var result = JSON.stringify(await response.json());
} catch (error) {
console.error(error);
}
return result;
};
export default CallApi;
Now I want to call this function in another file:
async componentDidMount() {
this.setState({ readError: null });
try {
var profile = await CallApi("own");
this.setState({
username: profile.username,
email: profile.email
})
} catch (error) {
this.setState({ readError: error.message });
}
}
Now if I want open this site I getting the error Unhandled Rejection (Error): Invalid hook call. Hooks can only be called inside of the body of a function component.
What I am doing wrong and how can I achieve to get a token from this hook?

Answer 1

Because use are using a hook call useAuth0==> you need to call it in a body of functional component or a customer hook which is have pre-fix use ==> you CallApi is not a hook ==> you got the error.
Create useCallApi hook.
function useCallApi(userId) {
const [result, setResult] = c()
const { getTokenSilently } = useAuth0();
const [loading, setLoading] = useState(false)
const [error, setError] = useState(null)
const fetchResult = useCallback( async(userId) =>{
const token = await getTokenSilently();
try {
setLoading(true)
const response = await fetch(process.env.API_URL + "users", {
headers: {
Authorization: `Bearer ${token}`,
user_id: userId
}
});
setLoading(false)
var result = JSON.stringify(await response.json());
setResult(result)
} catch (error) {
setLoading(false)
setError(error)
console.error(error);
}
},[userId])
useEffect(() =>{
if(userId){
fetchResult()
}
},[userId])
return {userInfor: result, loading, error,fetchResult};
};
export default useCallApi;
Now I want to call this function in another file, but you need to
convert your existing component to functional component and use
useCallApi hook.
IF you pass a string when you declare useCallAPi like this useCallAPi("own"), it will call the api dicrectly.
You can also const {result, fetchResult} = useCallAPi("own") and call fetchResult("own") anywhere you want to fetch result
//other import
import {useCallAPi} from "path_to/useCallApi.js"
// you need to convert your class compoenent to this compoenent
function AFunctionalComponent(userId) {
const [readError, setReadError] = useState(null)
// result include username and email walready
const {result} = useCallAPi("own")
return(
// your ui render herer
)
};
Updated: If you want to set local state base on result in the functional component you can try this
//other import
import {useCallAPi} from "path_to/useCallApi.js"
// you need to convert your class compoenent to this compoenent
function AFunctionalComponent(userId) {
const [readError, setReadError] = useState(null)
const [useInfo, setUserInfo] = useState(null)
// result include username and email walready
const {result} = useCallAPi("own")
useEffect(() =>{
if(result){
setUserInfo({
username: result. username,
email: result.email
})
}
},[result])
return(
// your ui render herer
)
};

Answer 2

Took me forever to figure this out, but finally resulted going back to go ol' callbacks. Only thing that worked for me (because I HAD to call the hook from non-react context, all other's threw the know React Hook Call (outside functional component) error.
Btw, this setup makes any hook accessible from ANY (instantiated) context, even vanilla-js, like it my example!
Non-React or React Context:
class WhateverClass {
private xyzHook: (XyzHookContextI) | undefined
public setHookAccessor (xyzHook: XyzHookContextI): void {
this.xyzHook = xyzHook
}
executeHook (): void {
const hookResult = this.xyzHook?.specificHookFunction()
...
}
}
export const Whatever = new WhateverClass() // singleton
Your hook (or your wrapper for an external Hook)
export interface XyzHookContextI {
specificHookFunction: () => Promise<string>
}
const XyzHookContext = createContext<XyzHookContextI>(undefined as any)
export function useXyzHook (): XyzHookContextI {
return useContext(XyzHookContextI)
}
export function XyzHook (props: PropsWithChildren<{}>): JSX.Element | null {
async function specificHookFunction (): Promise<void> {
...
}
const context: XyzHookContextI = {
specificHookFunction
}
// and here comes the magic in wiring that hook up with the non function component context via callback
Whatever.setHookAccessor(context)
return (
< XyzHookContext.Provider value={context}>
{props.children}
</XyzHookContext.Provider>
)
}
Voila, now you can use ANY react code (via hook) from any other context (class components, vanilla-js, …)!
(…hope I didn't make to many name change mistakes :P)

Answer 3

https://reactjs.org/warnings/invalid-hook-call-warning.html
To avoid confusion, it’s not supported to call Hooks in other cases:
🔴 Do not call Hooks in class components.
🔴 Do not call in event handlers.
🔴 Do not call Hooks inside functions passed to useMemo, useReducer, or useEffect.