How to write a callback function for asynchronous calls from helper method to componentDidMount using React JS

async componentdidmount
react use callback async
async componentdidmount in react native
react wait for function to finish
react-async
react setstate async await
async callback react
async function react

I have a helper js file and in that have a asynchronous calls method, in my component am importing the helper js file and in componentDidMount, am making the call.

Before ajax completion, the value is getting returned as undefined. Is there a way to write a callback function, on success it should come to my componentDidMount method.

This is what I tried:

helper.js

export const asynchronous = data => {
   axios.get(url).then(res => {
     return res;
   });
}

component.js

import {asynchronous} from 'helper';

componentDidMount(){
  const newResp = asynchronous(this.props.data);
  console.log(newResp); // returned before api success/failure, should be returned after api request
}

Use async-await

async componentDidMount(){
  const newResp = await asynchronous(this.props.data);
  console.log(newResp); // returned before api success/failure, should be returned after api request
}

And your asynchronous code. You're missing a return statement.

export const asynchronous = data => {
   return axios.get(url).then(res => {
     return res;
   });
}

An Example : Async Await with React Lifecycle methods

reactjs, Use async-await async componentDidMount(){ const newResp = await asynchronous(this.props.data); console.log(newResp); // returned  Anyway, using async/await in React requires no magic. But where to put async/await in a React component? Used mostly for data fetching and other initialization stuff componentDidMount is a nice place for async/await. Here are the steps to follow: put the async keyword in front of your functions. use await in the function's body. catch any errors.


You can return the intial axios promise and then use its then,

export const asynchronous = data => {
   return axios.get(url);
}

And use it in your componentDidMount

componentDidMount(){
  const newResp = asynchronous(this.props.data).then(res => {
      console.log(res);
   });
}

React Async for Declarative Data Fetching ― Scotch.io, Fetching Data Declaratively with React-Async; Helper Components; More Declarative data fetching is an approach used in calling APIS where you Since JavaScript is synchronous by default and is single threaded, when we Here we make our API call in the componentDidMount function to ensure it  Today you’ll learn why you need to bind, and how to bind a callback function in React. Handling the this keyword is causing a lot of headaches for many developers. That’s because in JavaScript it is not always clear what this is actually referring to.


Need to add async to componentDidMount then await the response.

// helper.js
async function getData(url) {
   const response = await axios.get(url);
   console.log(response);

   return response;
}

export default getData;

In your component:

import { getData } from './helper.js'; // <-- Not 'helper' which looks in node modules
...
componentDidMount = async () => {
  const newResp = await asynchronous(this.props.data);

  console.log(newResp);
}
...

More than that, you will want to do something with that response.

...
componentDidMount = async () => {
  const newResp = await asynchronous(this.props.data);

  this.setState({ data: newResp })
}
...

React.Component – React, React lets you define components as classes or functions. The render() method is the only required method in a class component. You may call setState() immediately in componentDidMount() . you want to re-compute some data only when a prop changes, use a memoization helper instead. forceUpdate(​callback). This is a brief introduction to asynchronous JavaScript using Async.js and callbacks. Async.js is a very common library that makes it easier to do a variety of tasks using JavaScript. Functions in JavaScript. In JavaScript, like other languages, a function is a re-usable block of code that accepts arguments, does something, and returns a value.


React's setState is a special function, and it helps with asynchronous , First, notice the code is in the componentDidMount() lifecycle method. If you make a network call in componentWillMount, there is a chance you could receive the data Why is setState in reactjs Async instead of Sync? setState() is an optional callback function that will be executed once setState is completed and the  Callback functions in React. And once I did remember that a callback function was needed, I had to remember exactly what those did and how to use them. I’m using the ES6 syntax of


Testing component with async componentDidMount · Issue #1587 , Testing component with async componentDidMount #1587 is fetched component rendered with expected content or when async method FAIL src/​App.test.js ○ Test › should render error if initial data is NOT enzyme-adapter-​react-helper hasFinishedAsync expect(mockCallback.mock.calls.length). You've to write a ternary operator (an IF-else will also do, but I prefer ternary). There will be 2 states , the initial state when there's no data and the state where you've the data from the AJAX call. Whenever you set the state using setState function react will automatically call the render method and change your view according to the data.


How and Why to Bind a Callback Function in React Components, What's the best way to bind a callback function in React components? Read about the That's because in JavaScript it is not always clear what this is actually referring to. You can achieve this by calling bind(this) for your function: function The best way to show the different approaches is an example. React lets you define components as classes or functions. Components defined as classes currently provide more features which are described in detail on this page. To define a React component class, you need to extend React.Component: