useAxios() is a React hook that simplifies async fetching and state management. Source code and live example
Want to suggest an improvement? I'm a...
For further actions, you may consider blocking this person and/or reporting abuse
I fail to understand the "why". In what scenario is this approach easier than using axios directly, or better, an axios instance?
Mainly it is syntactical sugar around common needs, such as hooks for
isLoading,isError, and the built-in request cancellation.I see. More syntactical consistency rather than sugar then it that case?
But still, mentioned problems wouldn't exist if API calls happened on the store level. In your components, you would still use hooks depending on the capabilities of your state management. If you combine that with a layer for an axios instance that handles headers & authorisation, then you remove the need for a custom config each time. It's a way cleaner and more maintainable code base then.
Don't get me wrong,there is nothing wrong with your approach, but at the end you produce a lot of lines of code whenever you make something as standard as an API call (which easily happens hundreds of times in a medium sized application)
I dig it. Do you have an example repo that implements that pattern from which I could learn?
Unfortunately I have nothing I can share, no. But it shouldn't be hard:
We utilize axios interceptors to check if a used is authenticated and attach the JWT token accordingly. With hookState , recoil or redux (whatever you use), you can then assign the transactions accordingly.
I've done similar. But I don't see any reason for useReducer. useState us sufficient and less clottery, makes it more readable when you don't have to deal with actions.
I agree that a baseline implementation is more readable if implemented with
useState. The idea here is that the reducer is ready and waiting if a user requires more complex local state management.Sure but most often this will not be required 😊 it's a form of premature optimisation imo. Although it's not an expensive one.
I think you should delete any prop from useEffect dependencies array, that's causing the loops. Also it can be a good idea to export a refresh function, letting the ui decide when to call axios again.
Can you point me to an example of a refresh function? This concept is new to me. Thanks for the advice!
It's just an internal function that you can write inside your hook. It calls the axios function (again), and you have to return it without the '()', with the rest of the state values. So, from the ui you call it whenever you want to refresh.
//hook
const useExample = () => {
//state props
const refresh = () => {
// call axios impl
}
return {data, refresh}
}
//component
const [data, refresh] = useExample ()
button onClick={refresh}
I wrote this with my phone, sorry if it has a bug.
Thank you! I'm following your pattern. Gonna meditate on it a while then refactor it in. Cheers!
does the infinite render loop happen because the config object is created new in every rerender of the parent, which leads to running useEffect again?
Moving the
axiosConfigdeclaration out of theAppcomponent did indeed stop the re-render loop! Great tip!Thanks, pal but I think I would rather just stick with the useEffect hook and
fetch✊ more power to you!
This looks interesting. Your comment at the end indicates that this hook is incomplete or not ready for wider implementation. Is that the case?
I'd use with caution until I can figure out the infinite render loop issue. This is intended more for learning by way of proof-of-concept than for use in prod.
I believe there's already an axios hook on npm. Great dive though.
Found it here: preview.npmjs.com/package/use-axios
though it looks like it just wraps another hook, useAsync: github.com/ArnoSaine/use-axios/blo...
Unfortunately I can't find the source code for the core useAsync hook :-/ Lastly, looks like the
use-axiospackage contains no tests. Neither do I, yet :-) Buyer beware.