I was curious to know if making an API request outside of the lifecycle/useEffect is a valid way to make the call?
https://stackblitz.com/edit/react-useeffect-button has two functional components, the parent component makes an API call and passes the data to the child component, initially specified the limit of data to be fetched from the endpoint as 2 and the parent component has a LoadMore function that is passed as a prop along with the data to the child component.
Using the react-slick slider to display the images in the child component and the Load button onClick will call the function LoadMore inside the parent component and then it makes an API call and appends the new data from API to the old Data. The load button will append one Image to the existing images.
is this a good way to make API requests or should it be done only in the lifecycle methods?
is this a good way to make API requests outside useEffect/lifecycle.?
It depends on your requirements.
should it be done only in the lifecycle methods?
It depends on your requirements.
There's nothing wrong making API request outside useEffect. But it should be done in some other function or it will cause the request to go on every re-render.
And if the response if being saved in a state variable.
Then it will go into the infinite loop.
When do we make the request in useEffect and when by some other function?
Requests that fetch data or send some info at the time of initialization of the component is supposed to be made in componentDidMount/useEffect
And requests that are supposed to be sent on some action (like in your case, onClick) so they are hit according to that event.
There's neither good or bad, it's all about your requirements.
If you are making an API call to get data from initial render then using a lifecycle hook is a good approach. In your scenario, you want to make an API request when hitting a button. In that case it can be a simple function without any lifecycle hook method.
The only key part here is that you are maintaining the state and rendering the view from the state.
This depends on your needs.
if you think whenever your params change,API call will be triggered.
in this case, you should set the API call inside the useEffect.
If you want your API call triggered on page load(ComponentDidMount). In this case, you should set API call inside the useEffect
Otherwise no need to set api call inside useEffect.
In your case no need to set API call inside useEffect. because you hit the API call when the user clicks the button. So no need to use useEffect.
Related
I know how this.$forceUpdate() work and not trying to just re-render the component.
In Nuxt apps, page components have asyncData() as their lifecycle methods, executed before created(). I'm using it to fetch some initial data and SSR them.
The reason I want to reload the component is to fetch the data again after modifying the corresponding data inside the component, using AJAX. I've tried this.$forceUpdate() just in case but didn't work. this.$router.replace(this.$route.path) also didn't work. I'm trying to not use location.reload() since I have a toast message should be shown after the modification.
Is there any way to do this? Or should I move my fetching part to fetch() and call this.$fetch()?
this.$nuxt.reload() was the thing. Not sure if it exists in Vue itself.
I'm rendering a react component that sends a request on render (as well as when state changes), but also receives user input.
I'm adding an event listener to accept user input, however, it seems like the events are being blocked by the request being sent. Here's a code snippet of what I'm doing. In the body of the component, I return a simple <Loading/> indicator when the request is happening.
To summarize what happens, when the component mounts, I'm unable to capture user input until the request finishes. Further, on subsequent changes to user input, the input is blocked by the request.
Any thoughts here? Or advice on how to debug?
#Jaromanda X was correct in the thread above. In the render of my function component, when parsing the returned data (something like data.map()), I was making expensive cpu-bound calls. Pagination or caching the data will do the trick.
In functional components, you can think function body as the render() method of old class components. So, when you try to send api request in there, it blocks the rendering of the element. You should make api call in an useEffect() function. So, it will work after component mounted without blocking it.
I have a question about making api calls with react. They say to make them in the componentDidMount lifecycle method, but if the component is already mounted, do I have to re-render it again somehow? What if I am making a get request and the component displays some data that it gets? Thanks!
when you set state after making the request the component will rerender
This is actually why useEffect() in react hooks is both componentDidMount and componentDidUpdate; a lot of people will correctly implement componentDidMount, but they'll forget to implement componentDidUpdate and you end up with components that you need to remount in order for them to function correctly when they should be responding to the changes in props via componentDidUpdate.
You only need to use componentDidMount for (automatic) initial API calls made on page load, you can still make any API calls via a user interaction like a button click etc.
When your call completes within componentDidMount, set the state to store your result. This will trigger the component to rerender. If your component relies on information from an api call, consider using a loader and clearing it once the call is complete.
I have a React component that renders items on a page. The items are retrieved from the network.
These items should be retrieved and rendered when the component is loaded.
There will be a mechanism to update the items after the component has loaded too.
My first thought is to position the network request inside the componentDidMount function.
Would doing this break any of the best practises associated with redux and unidirectional data flow/immutability?
Instead, should I send an action to the store and rely on redux middleware to perform the network request (which will then eventually change the store and cause a re-render of the component)?
If your data is local, do it inside the componentWillMount,if your data is global then do it by calling an action.
So basically making async call in componentDidMount and componentWillMount is same. Most probably, async call in componentWillMount wont return before componentDidMount is fired. But it will return before than if you make the same call in componentDidMount.
Making async call in componentDidMount makes it clear that component will first render without data and then re-render when data arrives which is implicit in componentWillMount.
This question already has answers here:
Where to place logic for loading initial server data in React app?
(2 answers)
Closed 5 years ago.
How do I do AJAX requests in React? React itself doesn’t have any allegiance to any particular way of fetching data. Which hook in react is best to fetch the data [constructor, componentdidmount] or have a custom hook [static method].
The place you should be calling you AJAX requests depends on your functionality,
If you need you AJAX call when the component is mounted or at repeated interval, you should call it within a componentDidMount function. An example could be fetching data a regular intervals from your server to update on screen.
If you want to send an AJAX request on an event, you should have it in your custom function. An example could be posting the input values to your backend api
In order to make AJAX calls, you can make use of axios, fetch npm packages
There is not any particular place of fetching AJAX request in React. It depends on your functionality mostly. Until now I've made AJAX calls inside of 'ComponentWillMount' method to make ready data asap.
Also, sometimes I've needed to fetch data from server after a component did mounted. So in that case, I had to use this workaround: React - setState() on unmounted component
The most important topic is here not blocking the rendering interface and to set properly the state, after getting data from server.