Assuming that you successfully grab the You are all for my custom API and you copy and paste it within
the URL.
Jess and you export it as a default.
Now it can proceed on our data fetching functionality and I would want to start very simply by jogging
our memory previously prior to react.
How did we perform data fetching.
Well we needed to have a class based component correct.
And then we needed to use component.
Did mount lifecycle method.
However we have a functional component.
So how are we going to do that because we cannot use component demand.
And the answer is using use affect and use effect hook runs by default.
After every render and it allows us to perform side effects like let's say in our case data fetching
that we can also set something up like listening for a window event as a first parameter it gets a callback
function so that callback function is going to run by default.
After every render but this callback function also needs to return a cleanup function.
Now what I say needs to you don't have to always set it up but you cannot set this combat function as
a synchronous function because we know that if we set up let's say this callback function as a synchronous
function asynchronous functions by default return a promise.
So you cannot set this up as a synchronous function because you must keep the option of returning a
function.
Now why you would want to use the cleanup function.
Well let's say you're going to subscribe to some kind of service you're going to subscribe to I don't
know whether they use their has logged in or not.
Well if you are on a product page everything is fine once you navigate away then we're just on mounting
the component but description is still gonna say so that's the reason why I would want to use a cleanup
function where each and every time we can mount a component or component amount then we also let's say
cancel our subscription that way.
Essentially we're just avoiding memory leaks and the second argument in our case which is going to be
very very important is gonna be array of values or dependencies because even though by default use effect
is going to run after every render while there's cases where we don't want.
And that's the reason why.
Second argument is gonna be very very important and then we're going to import the library we're gonna
use for our HDTV requests and like already previously mentioned we could definitely use punch but just
for the sake of simplicity we're going to use x years so we can roll with X years from ACT CEOs library
and then we're going to set up our use effect.
Again you can import it directly from react but I'm just gonna type react that and then use effect.
So let me type react that use fact.
And then of course we need to pass in our callback function so we pass in our callback function.
So this is the function that is going to run by default after every render.
And like I said we optionally can return a cleaning function if we're setting up some kind of description.
So the way we're gonna write that we're going to say return.
And then whatever we would want to run as our callback function.
So this is gonna be the cleanup function where we run the first function by default after every render.
But if we would want to clean it up then we're gonna have another function that we're returning from
our callback function and then within this function we're going to perform our cleanup actions.
And then if we would want to set up our data fetching and of course I'm going to write.
OK.
So within the function within my callback function I would want to set up a ax heroes.
And since who would want to get a get request or perform a get request we're gonna type in get and then
we need to pass in the URL.
So right after the axioms let's also import the URL from and then we're looking for to utilize then
within the tools we're looking for the new RL And then we would need to passing you are all within the
axioms.
So let's say you are well but we need to set it up as in fact a variable.
So the way it's going to work is we're gonna have template strings then we're going to have our you
are all variable first.
So you say you are variable and then we're gonna have a product.
So forward slash product.
This is gonna return a promise.
So that's the reason why we can change that then.
And then since I would just want to console log at first because we haven't talked about properly about
the second argument that we can have then we're just going to say whatever name.
So in my case I'm gonna name this store product so store product and then I would just want to console
log it.
So I'm gonna go with console log and we're gonna console log store products like sell and let's see
if everything is correct within our console.
We should get back our data.