0% found this document useful (0 votes)
61 views8 pagesDifferent Ways To Fetch Data in React
Fetch
Uploaded by
sergioj88Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
0% found this document useful (0 votes)
61 views8 pagesDifferent Ways To Fetch Data in React
Fetch
Uploaded by
sergioj88Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
/ 8
A © https://jsmastery.pro
Different Ways
to Fetch Data
in React JS
{35} JavaScript Mast jsmastery.pro 01
Fetch method
The fetch() method in JS is used to request to
the server and load the information in the
webpages. The request can be of any APIs
that return the data of the format JSON or
XML. This method returns a promise.
function App() {
esd Om met
fetch(' y
neat SSUES. json())
.then(json = console. log(json))
Ee Dr
return (
Dyes eu TaENERe OMe ice te)
di
} jsmastery.pro 02
Async- Await
It is the preferred way of fetching the data
from an API as it enables us to remove our
.then() callbacks and return asynchronously
resolved data. In the async block, we can use
Await function to wait for the promise.
function App() {
useEffect(() > {
(CO a Oem s
ss avd
const result = await axios.get('h
Teale xi Reena)
3 catch (error) {
console.error(error)
E
no
2)
return
Different ways to fetch Data
5 jsmastery.pro 03
Axios library
With Axios, we can easily send asynchronous
HTTP requests to REST APIs & perform create,
read, update and delete operations. Axios
can be imported in plain JavaScript or with
any library accordingly.
function App() {
useEffect(()
axios.get("
renc@rencren) = console.log(response.data));
SP
aoa @
Deeg alae kel ee /jsmastery.pro
Custom Hook
It is basically a React component whose
name will start with “use” like useFetch. It can
use one or more React hooks inside them.
Cons
rae et BCS Gee)
Cae a ] = useStateCnult)
Tea PS ‘] = useStateCnull)
ieee ant
eee Gaul p)
nes een as
cone
Cours Pa criarest reser)
Cours Parte te
setApiData(data)
setIsLoading(false)
Pato @ at
Eats ca sea bagel a)
SCR te)
ft
Bi
fetchData()
ae cba)
pati A q i
5 jsmastery.pro 05
Usage in the component
Import the useFetch hook and pass the URL of
the API endpoint from where you want to
fetch data.
Now just like any React hook we can directly
use our custom hook to fetch the data.
Teac te esa
const App = () > {
Clas CR RR eases EOL ee ee col
rn
Sate
PeeCCEUr) EGE
PER Crm Mesa isaac)
Bessa ena ee
PUES OS) Reset rea ere t rt Der jsmastery.pro 06
React Query library
With this we can achieve a lot more than just
fetching data. It provides support for caching
and refetching, which impacts the overall
user experience by preventing irregularities
and ensuring our app feels faster.
import axios from
import { useQuery } from 'rea
function App() £
const { isLoading, error, data
useQuery On ares 1a
console. log(data)
Sucka ea Rea eae CN mel ee te
5 Link in Bio
jsmastery.pro
NM
is eee he NET (q( ==
UY tela e-i4 e) fe (or)
Build an Al Powered Movie Build an NFT Marketplace and
Application and Master React Dive Into the World of Web 3.0
JSM Pro
Masterclass
Experience
Become a Master Developer With
the Project Experience to Prove It
