How do you guys deal with Ajax calls in React? I can’t decide on how i want to do the Ajax calls in my app. My components always render before the Ajax call is completed and that triggers and error(hanging the app). So what is the best way to deal with Ajax calls in React?
Actually, disregard my first question.
Ideally you are rendering the framework for your application without data and using an abstraction like state to control the contents being retrieved via AJAX.
So the page should render before the call is complete (which is what you want when building asynchronous applications) and the component should be updated with data when the call completes.
Do you have any example code to share?
Yes i do. The problem is that i get an error because im mapping an empty array. And everything stops working.
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import $ from ‘jquery’;
import TableRow from ‘./Leaderboard/TableRow.js’;
class Leaderboard extends React.Component {
constructor() {
super();
this.state = {
data: [],
allTime: ‘empty’
}
$.ajax({
url: “https://fcctop100.herokuapp.com/api/fccusers/top/recent”,
}).done(function(data){
this.setState({data});
console.log(this.state.data);
}.bind(this));
}
render() {
return (
<div className="container">
<h1>FreeCodeCamp Leaderboard</h1>
<TableRow recent={this.state.data[0].recent} allTime={this.state.data[0].alltime} username={this.state.data[0].username} /> //Error here because data[0].recent does not exist(It's not yet loaded)
</div>
);
}
}
ReactDOM.render(
,
document.getElementById(‘app’)
);
I had a similar question last night when considering converting a project I helped work on. Then I came across this blog post: https://hashnode.com/post/5-best-libraries-for-making-ajax-calls-in-react-cis8x5f7k0jl7th53z68s41k1
The big one that you could do with just ES6 is fetch() but I would read the article in its entirety.
2 Likes
When I start introducing AJAX requests is when I look to using some Redux implementation. Let the store take care of fetching remote data.
I still haven’t learned about Redux but i guess this is the time to start learning it 
I didn’t think i will need it for these small project because i didn’t know what it does. xD
“Need” may be a stretch, but this is the sort of thing Redux was designed for. A high level description is that instead of connecting to a database or server in your React app, you would connect to a Redux object called a store, and the store would do the work of fetching data. Your React app doesn’t actually talk to the store directly, but sends a message (called an action) to a dispatcher. Then, the dispatcher makes sure that all of the relevant components are sent the data they need from the store. You can just write a call to the dispatcher that says, “Hey! I’m changing this bit of data. Here’s the update”. The dispatcher gets the new data, gives it to the store, and then says, “Attention everyone who need to know about this data: We have an update!”. This may sound complicated, but does two important things:
- This keeps data flowing in one direction, and in very well defined routes. Easy to debug.
- Data across all components of your app are synchronized so you never have to worry about making a bunch of changes in one button click.
1 Like
Have you looked into componentDidMount()? This should help with the rendering before the ajax request is complete. Then use setState() to render your app. Here’s a link to the react docs: https://facebook.github.io/react/docs/react-component.html#componentdidmount
Hope that helps
I tried it but it didn’t work. The problem is that i can’t render a component without filling in the data array. And the render is always faster than the ajax call. So i get an error on this line
<TableRow recent={this.data.state.recent} allTime={255225} username={“username”} />
cannot read state of undefined.
Because the data is empty at the beginning. I am watching some React tutorials right now and i will find a way to fix this after i finish. I might need to restructure my app so it can render without waiting the ajax call or something.
Here is the code repo if anyone is interested in the structure
I apolijize for seeming to pimp my own posts… But this may be helpful to you. The demo code uses fetch, shouldComponentUpdate, componentWillMount, componentDidUpdate etc etc…
Works pretty well. I may be a poor judge of that though, I’m just starting out with React myself.
I will check that one out after i finish the videos i am watching now All that white text code lol. Must have been hard to type code like that without syntax highlighting.
Ye gods and little fishes, NO! Hell no! I would not have typed it into Codepen and tried to get it working. Codepen is terrible in that way.
No, I used an IDE to do the work, then cut and pasted it to Codepen, then mucked about a bit to make it Codepen ready.
I suggest you do the same. Cut the code out of the Codepen and put it in your fav editor, css and javascript too.
I rewrote the render part of my code and now it works. I have no idea what i did but it works now. The ajax call is still at the same place and i changed nothing else. I guess it must have been some kind of a typo that was causing all these errors. But thanks everyone for the help and the great resources.
Excellent! I find those kind of mistakes great for learning - makes you look close at everything.