How to use hooks within function in React Js

Question

I have a file where I keep all my functions that make api calls, then I import these functions inside components to use where needed. The issue I'm facing is that when api call is made and it returns 'unauthorized user'(because token has expired) I need to redirect users to the login page.

// apiCalls.js file

 export async function getData(){
 let response = await fetch(url)
 let res = response.json()
 // here I need to add redirect to /login if res.status.code is 401 for example

}

I tried to create a custom hook (with useNavigate) to use inside the function, but app throws error saying that hooks can't be used inside function. I can check status of the request inside the component(after I import function from apiCalls.js) but it doesn't seem like a correct way of approaching this as I'll have to add check inside every component that may use this function. Any advise is greatly appreciated

EDITED: to add context, I need to redirect user from a function( not functional component), function is exported from apiCalls.js file.

You should be looking at the react-router-dom rather than hooks. — Khant
– Khant, Commented Feb 2, 2023 at 5:32

Ben Wong · Accepted Answer · 2023-02-02 06:05:13Z

There's a great way to use hooks inside of a function - make the function a hook! The caveat is that this function will also need to follow the rules of hooks; a big one being the one you've just discovered: you should only be calling it inside a component or other hooks. If you're getting an error because of eslint, you generally also have to (and should) prefix this function with use (like useGetData).

export function useGetData(){
  const navigation = useNavigation();

  const getData = async (url) => {
    let response = await fetch(url)
    let res = response.json()
    if (/* isInvalidStatus */) {
       // navigate to '/login'
    }
    // return your data
  }

  return { getData }
}

export function MyComponent() {
  const { getData } = useGetData();

  // call getData() from useEffect or a click handler

  // return jsx;
}

Brief explanation in case it helps:.
First we'll rename the function to follow convention, but we'll also have to remove the async keyword (which we address later). We'll add the useNavigation hook.

export function useGetData() {
  // or whatever navigator your router provides
  const navigation = useNavigation();
}

The hook itself can't be async, but we can expose a function in the hook's return object:

const getData = async (url) => {
  // would probably use const instead of let
  const response = await fetch(url);
  if (response.status === 401 || response.status === 403) {
    navigate('/login');
    return;
  }
  return response.json();
}

return { getData }

And now in the component you can grab getData from useGetData and use it however you want; the auth guard logic will be handled for us in the hook, no matter which component we use it in.

Sultan Aslam · Accepted Answer · 2023-02-02 05:38:50Z

0

Hooks are JavaScript functions, but you need to follow two rules when using them.

Don’t call Hooks inside loops, conditions, or nested functions.
Don’t call Hooks from regular JavaScript functions.

So if you want to use hook inside a function, change that function into hook

answered Feb 2, 2023 at 5:38

Sultan Aslam

6,2882 gold badges42 silver badges49 bronze badges

Collectives™ on Stack Overflow

How to use hooks within function in React Js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related