Exploring Custom Hooks in React: An Introduction to the 'useFetchWithAuth' Hook
Hello, I’m Tushar a full stack web developer with a passion for creating beautiful and functional web applications. I have experience in a variety of technologies, from front-end frameworks like React to back-end languages like Node.js. I love solving complex problems and turning them into elegant solutions, and I believe that good code is about making the next developer’s life easier. I’m excited to share my thoughts, experiences, and knowledge with the community, and I hope you will find my blog informative and helpful.
Custom hooks are a way to extract and reuse logic in React components. They allow developers to write logic that can be shared across multiple components and make it easier to maintain and scale applications. In this blog, we will take a closer look at custom hooks and how they can be used in React.
The code provided is a custom hook named useFetchWithAuth. This hook is responsible for making HTTP requests with authentication headers and returning the response data along with the loading status. The hook uses the useState hook to manage the state of the response data and the loading status.
The request function is the main logic of the hook. It makes a request to the specified URL using the axios library, and sets the loading status to true before the request and to false after the request is completed. If the request is successful, the response data is set and a success message is displayed using the toast library. If the request fails, an error message is displayed using the toast library.
In the request function axios accepts headers using authHeaders function which returns Authorization header with Bearer and token from localstorage
Now when you got the logic behind the useFetchWithAuth hook its time for implimenting it
The code provided is an implementation of the useFetchWithAuth custom hook. The hook is called by destructuring its returned values into the request, isLoading, and data variables.
The useEffect hook is then used to make a GET request to the "/tasks?limit=6&sortBy=createdAt_desc" URL. The useEffect hook is triggered every time the TaskChange value changes. This allows the component to re-render and make a new request whenever the TaskChange value changes in my case you can set the dependency array accordingly.
The request function from the useFetchWithAuth hook is then called inside the useEffect hook to make the GET request. The request function accepts four parameters: the URL of the request, the type of request (in this case, "get"), the data to be sent with the request, and a success message to be displayed if the request is successful.
Finally, the return statement inside the useEffect hook is used to clean up the subscription. This ensures that the useEffect hook is not triggered after the component has been unmounted, which can prevent memory leaks and improve the overall performance of the application.
Here is the code example for making a POST request using the useFetchWithAuth hook:
A submitHandler function is then defined, which makes a POST request to the "/tasks" URL when triggered. The request function from the useFetchWithAuth hook is called with the URL, request type, data to be sent, and a success message as parameters.
After the request is made, the description value is reset and the TaskChange value is toggled to trigger a re-render of the component.
Conclusion :
In conclusion, custom hooks are a powerful way to extract and reuse logic in React components, and the useFetchWithAuth hook provides an example of how this can be achieved. By using custom hooks, developers can reduce code duplication, improve code readability, and make their applications easier to maintain and scale.
I hope this article has given you a better understanding of custom hooks in React and how the useFetchWithAuth hook can be used to make API calls. If you have any questions or comments, feel free to reach out to me via findtushar.me
Also, if you would like to see more of my work or follow my projects, you can find me on GitHub at github.com/Tushar-Chavan14. I am constantly working on new projects and experimenting with new technologies, so stay tuned for more exciting content.