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
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"
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.
replace "reach" with "rich" on the second paragraph. Nice article 😊
Nice one!
I love articles that present implementations with clear examples and options like you have.
Nice post, thanks!
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 :)
Another nice article! I'd never heard of the fetch-hook before, pretty cool :)
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
Great explanation.
Thank you!
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.
Thanks, this post was needed.
This post is exactly what I needed for my application. Thank you!
Fantastic post.
how to fetch fixed number of data from jsonplaceholder, like I want to only fitch 10 element for my page.
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