It's time to ditch Medium for good! ūüĆą‚ö°ÔłŹ

Introducing Devblog by Hashnode. Blog on your domain for FREE. Highly customizable and optimized for developers.

Learn more

5 best libraries for making AJAX calls in React

I have been working with React for the last two years. One of the questions many React beginners ask: "What's the React way to fetch data from the server" or "How should I make AJAX calls in React"? To answer your question, as many developers would tell you, React is just a view library and you are free to use whatever you are comfortable with. However, this doesn't help much - especially when the JavaScript landscape is changing so rapidly. So, in this article I will try to answer this basic question and list down 5 simple libraries for making AJAX calls in React.

jQuery $.ajax

This is a quick & dirty way to make AJAX calls. In the former, official React tutorial, they use jQuery to fetch data from the server. If you are just starting out and are playing around with React, this can save you a lot of time. Many of us are already familiar with jQuery. So, it won't take a lot of time to understand and use it in React. Here is how a simple API call is made, with jQuery:

loadCommentsFromServer: function() {
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data}); // Notice this
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());

P.S. Snippet is from React's former official tutorial.

It's the same old jQuery's $.ajax used inside a React component. Notice how this.setState() is called inside the success callback. This is how you update the state with data obtained from the API call.

However, jQuery is a big library with many functionalities - So, it doesn't make sense to use it just for making API calls (Unless you are already using it for a bunch of other tasks). So, what's the alternative? What should we use? The answer is fetch API.

Fetch API

Fetch is a new, simple and standardised API that aims to unify fetching across the web and replace XMLHttpRequest. It has a polyfill for older browsers and should be used in modern web apps. If you are making API calls in Node.js you should also check out node-fetch which brings fetch to Node.js.

Here is what the modified API call looks like :

loadCommentsFromServer: function() {
        // perform setState here

In most modern React tutorials you will find fetch being used. To know more about fetch, check out the following links :


Superagent is a light weight AJAX API library created for better readability and flexibility. If due to some reason, you don't want to use fetch, you should definitely check this out. Here is a snippet to demonstrate its usage :

loadCommentsFromServer: function() {
        // perform setState here

Superagent also has a Node.js module with the same API. If you are building isomorphic apps using Node.js and React, you can bundle superagent using something like webpack and make it available on the client side. As the APIs for client and server are the same, no code change is required in order to make it work in the browser.


Axios is a promise based HTTP client for Node.js and browser. Like fetch and superagent, it can work on both client and server. It has many other useful features which you can find on their GitHub page.

Here is how you make an API call using Axios :

loadCommentsFromServer: function() {
      // perform setState here
      //Some error occurred


This list will be incomplete without request library which was designed with simplicity in mind. With more that 12k GitHub stars, it's also one of the most popular Node.js modules. You can find more about request module on their GitHub page.

Sample usage :

loadCommentsFromServer: function() {
    request(this.props.url, function(err, response, body){
          // perform setState here

My Take

As fetch is the new standardised API to interact with remote resources, I would suggest using it for all your AJAX needs (not only in React, but all types of JavaScript apps).

Sandeep Panda's photo

Sandeep Panda

Write your comment…


I'll add an alternative library qwest

Qwest is a simple ajax library based on promises, and that supports XmlHttpRequest2 special data like ArrayBuffer, Blob, and FormData.

     .then(function(xhr, response) {
        // perform setState here

The reason why I'm listing it here is that it supports cancellation via

const request = qwest.get( /*... */ ).then( /* won't execute */ )

When components unmount/unload, call abort() to avoid React spamming the console when Ajax ‚ÄčPromises resolve after the component has unmounted/unloaded from the DOM.

Show all replies

Yeah, that's right. I favor real promises over fluid apis :-)

Reply to this…

Share your programming knowledge and learn from the best developers on Hashnode

Get started

I wouldn't even include jQuery...

I doesn't make much sense to load jQuery just to make Ajax calls, and it looks as if the trend is not to use jQuery anymore.

If I had to include it, for sure I wouldn't put it first in the list.

Yes, that is what I have mentioned in the jQuery section.

Reply to this…

How about no library at all and just use a native XMLHttpRequest instead? Fetch is alright, but it has quite a few shortcomings now and you need a polyfill to even use it across browsers. The specification is in flux and until they address the issues like cancellation and monitoring file upload progress.

var request = new XMLHttpRequest();'GET', '/api/content', true);

request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
        var data = JSON.parse(this.response);
    } else {
        console.error('Response received and there was an error');

request.onerror = function() {
    console.error('Request error');

Show all replies

Rommy, you do realise you're responding to a three year old comment, right? Many of these issues have been resolved now.

Reply to this…

Great article!

I would put my vote in for the Fetch API. What I noticed when using Axios (and it is really easy to use and gets points for that) is that it didn't ever work well with unit testing. It may be a matter of using the right version, but mocking calls through axios never resolved. Fetch solved that issue. So if you have to ever test async functions like that, Fetch gets my vote. (*disclaimer, this is just from my personal experience.)

There is also issues regarding cross domain calls with axios..

Reply to this…

Agree, but fetch requires Promise, what is the best Promise polyfill ?

I think, should work for you.

Reply to this…

Load more responses