This blog post is about the ways of getting data from API in React.
Before you read this post, you should be familiar with React library and Appli...
For further actions, you may consider blocking this person and/or reporting abuse
Here is a playlist of videos about React that I made for my students - https://www.youtube.com/watch?v=vTFVg6I2wNI&list=PLyuRouwmQCjm1N4jlJ7b3WWjDA8MjfDbg
Hope it helps you learn faster.
I started posting a new YouTube playlist last week about React in 2021 that includes all the newer features of React.
Great article!
If any reader is interested in a more in-depth video guide that covers each of these data-fetching strategies, you can check out my post here: reedbarger.com/fetch-data-in-react
Great post! I discovered other library very interesting, it's SWR by Vercel :)
Is the try catch useful for an async api call? If the promise rejects, the catch will not be triggered.
There is actually situations where using axios, “try/catch” & async/await can cause unwanted behaviour.
At least for me it did.
E.g. when using interceptors a failed request might not end up in catch.
Nevermind, just read it does actually throw :D
What’s a bit missing In this post is:
In the topic index you mention graphQL (6.) but you only mention it as a side note together with react-query-library.
“ways of fetching data” is a bit confusing to me. Axios and fetch-api are library’s for sending requests. Everything else is ways to structure/time sending requests. A bit confusing in my perspective.
How to cancel the request once the component is unmounted?
Why would you need to cancel it? It performed just one time
Imagine you are setting state on a successful response. If the component is unmounted before the response is back, you will get an error, something like "Unable to set state on unmounted component"
In this case you can introduce a variable to track if the component is unmounted or not. If you use functional component, you can write something like this:
useEffect(() => {
let isMounted = true; // track whether component is mounted
}, []); // only on "didMount"
replace "reach" with "rich" on the second paragraph. Nice article 😊
Thanks, this post was needed.
I never thought about making a custom hook for API calls oO I feel kinda stupid now haha
Thanks for that realization!
You are welcome :)
If you need to quickly create a custom REST API for testing the fetch process, I would recommend you to have a look at the restapify library.
I love articles that present implementations with clear examples and options like you have.
Another nice article! I'd never heard of the fetch-hook before, pretty cool :)
Nice one!
This post is exactly what I needed for my application. Thank you!
Nice post, thanks!
Great explanation.
Thank you!
I have read this blog and enjoyed it a lot but I have a question,
Which way is the best way for fetching data from backend?
I use Axios for this
There is really no better way :) use what is suitable for your needs. If you ask me, I use Axios just to avoid that extra line of code to transform data to JSON object, but it requires additional import ....most people prefer fetch() because it is already built-in method
how to fetch fixed number of data from jsonplaceholder, like I want to only fitch 10 element for my page.
Fantastic post.
First learn to why we are using React.Js and learn how create component in React.Js like a Class and functional component in react