useFetch and Custom React Hooks
Take a look at some of the advantages of useFetch
First Things First
Released with React 16.8, React Hooks changed the way we see components. They made using React class components unnecessary. Reducing the importance of class-based components came with a tradeoff, however. If you're creating class-based components, you can’t add lifecycle events — so what's the point of using React in the first place?
Here’s where React Hooks come to the rescue. Hooks puts your functions on steroids. You can stop relying on classes and move on to functions (if you prefer classes over functions it’s a different story). Hooks will revolutionize how the React code is written. Sooner or later, you’ll have to dive into them.
Custom Hooks?
There might be instances where you have been using the same logic for your class components (stateful) many times. Formerly, we could handle this situation by relying on render props and higher-order components. But we can do it in a much simpler and cleaner way with custom Hooks. These are normal JavaScript functions that can use other hooks inside them and contain a common stateful logic that can be reused within multiple components. These functions are prefixed with the word “use”.
Just to reiterate, Hooks are just functions, so one good approach to avoid repeating code, and applying the DRY pattern (if you don’t know what DRY is I would recommend you to read my article about clean code), is to create custom Hooks and import all the components that are necessary to reuse it.
Do Your Homework
If you caring more about productivity than learning, look at the npm packages and see whether there’s already a custom Hook that matches your needs. However, my recommendation is that even if there’s a custom Hook out there for you, you should develop the skills to create your own.
Rules of Hooks
According to the Official React website, there are some rules that we need to follow to use React Hooks:
- Only call Hooks from React function components. Don’t call hooks from regular JavaScript functions. (There is just one other valid place to call Hooks — inside your own custom Hooks. We’ll learn about that in a moment.)
- Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
The useFetch Hook Purpose
There are many ways to make HTTP REQUEST in the front end, the most common is Axios and fetch. The purpose of this custom Hook is to encapsulate your request and avoid code repetition inside your project:
This code above is the custom Hook, but how do we can use it in reality? It's quite simple:
What's the Advantage of useFetch?
With Hooks, you can access your data layer from the view (your functional component), creating a more reliable structure separating those concepts. This is more important when you need to handle multiple requests inside your functional component. When you need only fetch data once, without pagination or parameters or query parameter updates inside the URL, then useFetch tends to be not so useful.
