what is right way to do API call in react js

Question

I have recently moved from Angular to ReactJs  I am using jQuery for API calls  I have an API which returns a random user list that is to be printed in a list   I am not sure how to write my API calls  What is best practice for this   I tried the following but I am not getting any output  I am open to implementing alternative API libraries if necessary   Below is my code   import React from  react    export default class UserList extends React Component         constructor props        super props       this state           person                   UserList        return   getJSON  https   randomuser me api         then function data          return data results                 render         this UserList   then function res         this state    person  res               return          lt div id  layout-content  className  layout-content-wrapper  gt           lt div className  panel-list  gt             this state person map  item  i    gt               return                 lt h1 gt  item name first  lt  h1 gt                 lt span gt  item cell    item email  lt  span gt                                       lt div gt         lt  div gt

User · Answer

As best place and practice for external API calls is React Lifecycle method componentDidMount(), where after the execution of the API call you should update the local state to be triggered new render() method call, then the changes in the updated local state will be applied on the component view.

As other option for initial external data source call in React is pointed the constructor() method of the class. The constructor is the first method executed on initialization of the component object instance. You could see this approach in the documentation examples for Higher-Order Components.

The method componentWillMount() and UNSAFE_componentWillMount() should not be used for external API calls, because they are intended to be deprecated. Here you could see common reasons, why this method will be deprecated.

Anyway you must never use render() method or method directly called from render() as a point for external API call. If you do this your application will be blocked.

User · Answer

Use fetch method inside componentDidMount to update state   componentDidMount      fetch  https   randomuser me api           then    results      gt  this setState   person  results

User · Answer

You may want to check out the Flux Architecture  I also recommend checking out React-Redux Implementation  Put your api calls in your actions  It is much more cleaner than putting it all in the component  Actions are sort of helper methods that you can call to change your application state or do api calls

User · Answer

This discussion has been for a while and  Alexander T  s answer provided a good guide to follow for newer of React like me  And I m gonna share some additional know-hows about calling the same API multiple times to refresh the component  I think it s probably a common problem that newbie may face at the beginning   componentWillReceiveProps nextProps   from official documentation       If you need to update the state in response to prop changes  for   example  to reset it   you may compare this props and nextProps and   perform state transitions using this setState   in this method    We could conclude that here is the place we handle props from the parent component  have API calls  and update state   Base on  Alexander T  s example    export default class UserList extends React Component     constructor props        super props       this state    person              componentDidMount          For our first load      this UserList this props group     maybe something like  groupOne         componentWillReceiveProps nextProps           Assuming parameter comes from url         let group   window location toString   split       indexParameterLocated           this UserList group           Assuming parameter comes from props that from parent component      let group   nextProps group     Maybe something like  groupTwo       this UserList group          UserList group          getJSON  https   randomuser me api     group         then    results      gt  this setState   person  results             render         return                 Update  componentWillReceiveProps   would be deprecated   Here are only some methods  all of them in Doc  in the life cycle which I think would be related to deploying API in general case    By referring the diagram above    Deploy API in componentDidMount    The proper scenario to have API call here is that the content  from the response of API  of this component will be static  componentDidMount   only fire once while the component is mounting  even new props are passed from parent component or have actions to lead re-rendering  The component do check difference to re-render but not re-mount  Quote from doc       If you need to load data from a remote endpoint  this is a good place to   instantiate the network request       Deploy API in static getDerivedStateFromProps nextProps  prevState     We should notice that there are two kinds of component updating  setState   in current component would not lead this method to trigger  but re-rendering or new props from parent component do  We could found out that this method also fires while mounting     This is a proper place to deploy API if we want to use the current component like a template  and the new parameters for API are props coming from parent component  We receive a different response from API and return a new state here to change the content of this component   For example   We have a dropdown list for different Cars in the parent component  this component needs to show the details of the selected one      Deploy API in componentDidUpdate prevProps  prevState        Differ from static getDerivedStateFromProps    this method is invoked immediately after every rendering except the initial rendering  We could have API calling and render difference in one component    Extend the previous example  The component to show Car s details may contain a list of series of this car  if we want to check the 2013 production one  we may click or select or     the list item to lead a first setState   to reflect this behavior  such as highlighting the list item  in this component  and in the following componentDidUpdate   we send our request with new parameters  state   After getting the response  we setState   again for rendering the different content of the Car details  To prevent the following componentDidUpdate   from causing the infinity loop  we need to compare the state by utilizing prevState at the beginning of this method to decide if we send the API and render the new content    This method really could be utilized just like static getDerivedStateFromProps   with props  but need to handle the changes of props by utilizing prevProps  And we need to cooperate with componentDidMount   to handle the initial API call   Quote from doc            This is also a good place to do network requests as long as you   compare the current props to previous props

User · Answer

It would be great to use axios for the api request which supports cancellation  interceptors etc  Along with axios  l use  react-redux for state management and redux-saga redux-thunk for the side effects

User · Answer

Render function should be pure  it s mean that it only uses state and props to render  never try to modify the state in render  this usually causes ugly bugs and decreases performance significantly  It s also a good point if you separate data-fetching and render concerns in your React App  I recommend you read this article which explains this idea very well  https   medium com  learnreact container-components-c0e67432e005  sfydn87nm

User · Answer

You can also fetch data with hooks in your function components  full example with api call  https   codesandbox io s jvvkoo8pq3  second example  https   jsfiddle net bradcypert jhrt40yv 6   const Repos     user     gt      const  repos  setRepos    React useState         React useEffect      gt        const fetchData   async      gt            const response   await axios get  https   api github com users   user  repos            setRepos response data              fetchData                 return      lt div gt       repos map repo   gt         lt div key  repo id  gt  repo name  lt  div gt            lt  div gt          ReactDOM render  lt Repos user  bradcypert    gt   document querySelector   app

User · Answer

1  You can use Fetch API to fetch data from Endd Points   Example fetching all Github repose for  a user       Fetch GitHub Repos      fetchData        gt              show progress bar       this setState   isLoading  true              fetch repos       fetch  https   api github com users hiteshsahu repos          then response   gt  response json           then data   gt            if  Array isArray data               console log JSON stringify data              this setState   repos  data                            isLoading  false              else             this setState   repos                                isLoading  false                                                          2  Other Alternative is Axios     Using axios you can cut out the middle step of passing the results of   the http request to the  json   method  Axios just returns the data   object you would expect      import axios from  axios        Fetch GitHub Repos      fetchDataWithAxios        gt            show progress bar       this setState   isLoading  true               fetch repos with axios       axios            get  https   api github com users hiteshsahu repos              then result   gt                console log result               this setState                 repos  result data                isLoading  false                                         catch error   gt              this setState                 error                isLoading  false                                 Now you can choose to fetch data using any of this strategies in componentDidMount  class App extends React Component     state         repos         isLoading  false         componentDidMount         this fetchData           Meanwhile you can show progress bar while data is loading      this state isLoading  amp  amp   lt LinearProgress   gt

User · Answer

In this case  you can do ajax call inside componentDidMount  and then update state  export default class UserList extends React Component     constructor props        super props        this state    person              componentDidMount         this UserList           UserList           getJSON  https   randomuser me api           then    results      gt  this setState   person  results             render         const persons   this state person map  item  i    gt           lt div gt           lt h1 gt   item name first   lt  h1 gt           lt span gt   item cell      item email   lt  span gt         lt  div gt               return          lt div id  layout-content  className  layout-content-wrapper  gt           lt div className  panel-list  gt   persons   lt  div gt         lt  div gt

User · Answer

This part from React v16 documentation will answer your question  read on about componentDidMount        componentDidMount        componentDidMount   is invoked immediately after a component is   mounted  Initialization that requires DOM nodes should go here  If you   need to load data from a remote endpoint  this is a good place to   instantiate the network request  This method is a good place to set up   any subscriptions  If you do that  don   t forget to unsubscribe in   componentWillUnmount      As you see  componentDidMount is considered the best place and cycle to do the api call  also access the node  means by this time it s safe to do the call  update the view or whatever you could do when document is ready  if you are using jQuery  it should somehow remind you document ready   function  where you could make sure everything is ready for whatever you want to do in your code

User · Answer

A clean way is to make an asynchronous API call inside componentDidMount with try catch function    When we called an API  we receive a response  Then we apply JSON method on it  to convert the response into a JavaScript object  Then we take from that response object only his child object named  results   data results     In the beginning we defined  userList  in state as an empty array  As soon as we make the API call and receive data from that API  we assign the  results  to userList using setState method    Inside the render function we tell that userList will be coming from state  Since the userList is an array of objects we map through it  to display a picture  a name and a phone number of each object  user   To retrieve this information we use dot notation  e g  user phone    NOTE  depending on your API  your response may look different  Console log the whole  response  to see which variables you need from it  and then assign them in setState   UserList js  import React    Component   from  react    export default class UserList extends Component      state           userList         list is empty in the beginning       error  false           componentDidMount            this getUserList       function call          getUserList   async      gt           try     try to get data            const response   await fetch  https   randomuser me api                if  response ok       ckeck if status code is 200                const data   await response json                   this setState   userList  data results                 else   this setState   error  true               catch  e      code will jump here if there is a network problem    this setState   error  true               render       const   userList  error     this state       return              lt div gt               userList length  gt  0  amp  amp  userList map user   gt                   lt div key  user  gt                     lt img src  user picture medium  alt  user   gt                     lt div gt                         lt div gt  user name first  user name last  lt  div gt                         lt div gt  user phone  lt  div gt                         lt div gt  user email  lt  div gt                     lt  div gt                 lt  div gt                               error  amp  amp   lt div gt Sorry  can not display the data lt  div gt              lt  div gt

User · Answer

I would like you to have a look at redux http   redux js org index html  They have very well defined way of handling async calls ie API calls  and instead of using jQuery for API calls  I would like to recommend using fetch or request npm packages  fetch is currently supported by modern browsers  but a shim is also available for server side   There is also this another amazing package superagent  which has alot many options when making an API request and its very easy to use

[javascript] what is right way to do API call in react js?

Examples related to javascript

Examples related to jquery

Examples related to reactjs