javascript - Why is componentDidMount the best place to fire AJAX request - Stack Overflow

admin管理员组

文章数量:1023251

A mon use case is seen at lots of react projects that the AJAX request is fired at ponentDidMount hook.

I just can't wrap my head around this proposed practice , let's say we have below ponent where the AJAX request depends on a prop from parent ponent and MyComponent won't get properly updated with correct ajax data if a second render action triggered from it's parent ponent(with new props) happen.but ponentDidMount won't get executed anyway

so I think this practice is gonna cause issue , can anyone help confirm it and justify it? or correct me if I'm wrong.

export default class MyComponent extends Component {
  constructor() {
    super(...arguments);
  }
  
  async ponentDidMount() {
    const data = await fireAjax(this.props.id);
    this.setState({data});
  }

  render() {
    const { data } = this.state;
    return (
        { data && <span>{data}</span> }
    );
  }
}

A mon use case is seen at lots of react projects that the AJAX request is fired at ponentDidMount hook.

I just can't wrap my head around this proposed practice , let's say we have below ponent where the AJAX request depends on a prop from parent ponent and MyComponent won't get properly updated with correct ajax data if a second render action triggered from it's parent ponent(with new props) happen.but ponentDidMount won't get executed anyway

so I think this practice is gonna cause issue , can anyone help confirm it and justify it? or correct me if I'm wrong.

export default class MyComponent extends Component {
  constructor() {
    super(...arguments);
  }
  
  async ponentDidMount() {
    const data = await fireAjax(this.props.id);
    this.setState({data});
  }

  render() {
    const { data } = this.state;
    return (
        { data && <span>{data}</span> }
    );
  }
}

• javascript
• ajax
• reactjs

Share Improve this question Follow edited Mar 13, 2018 at 16:48 T.J. Crowder 1.1m200200 gold badges2k2k silver badges2k2k bronze badges asked Mar 13, 2018 at 16:42 Deng ZhebinDeng Zhebin 1,26211 gold badge1010 silver badges1717 bronze badges 7

• 4 It should be ponentDidMount(), then use ponentWillReceiveProps() for the updates – Ted Commented Mar 13, 2018 at 16:44
• 2 I think if you need props to add in your AJAX request you then should use other React lifecycle methods – Adolfo Onrubia Commented Mar 13, 2018 at 16:47
• And it's not defined anywhere that React will handle it returning a promise properly, so you shouldn't make it async. (Or if you do, you should ensure that it never throws. Since that will end up being an unhandled rejection.) – T.J. Crowder Commented Mar 13, 2018 at 16:47
• yes , I know it and async/await is just for demonstration. – Deng Zhebin Commented Mar 13, 2018 at 16:48
• 1 "so I think this practice is gonna cause issue" The React development team disagree with you: "If you need to load data from a remote endpoint, this is a good place to instantiate the network request." – T.J. Crowder Commented Mar 13, 2018 at 16:49

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 3

You're misunderstanding the pattern.

ponentDidMount is the correct place to do async fetching that you want to occur when the ponent mounts. If there is some other action that ought to trigger the data fetch, then yeah, do the async call in that other location.

What you really want to look into is the entire Flux paradigm, which is a fully fleshed out data flow made for react (though it can also be used elsewhere). There are plenty of packages that wrap that design pattern with helpful handlers, the most popular being Redux.

But no, no one is suggesting that all async calls occur in that lifecycle hook.

I think you mean ponentDidMount.

This method will only get called once. It does not get called again on a re-render, only if the ponent gets deleted and remounted.

If the ponent needs to regularly update using different data, you would be better moving this data fetching into its parent and passing it as a prop. You could pass a loading prop while the data is resolving, then pass the data when it is ready.

If you do the AJAX request before the ponent mounts, the ponent will probably render before the request pletes and you still have the problem of the data not being ready.

What you should be doing is making the AJAX request in the parent ponent, and once the request pletes, you pass the data from the AJAX request to a child ponent through props. Perhaps displaying something to inform the user that it's loading.

I think you should check this article: https://daveceddia./where-fetch-data-ponentwillmount-vs-ponentdidmount/ by Dave Ceddia. The idea here matches what you wrote in your code. So yes, it's one of the right ways to handle side effects in React.

Just copying/pasting here ;)

In practice, ponentDidMount is the best place to put calls to fetch data, for two reasons:

Using DidMount makes it clear that data won’t be loaded until after the initial render. This reminds you to set up initial state properly, so you don’t end up with undefined state that causes errors.

If you ever need to render your app on the server (SSR/isomorphic/other buzzwords), ponentWillMount will actually be called twice – once on the server, and again on the client – which is probably not what you want. Putting the data loading code in ponentDidMount will ensure that data is only fetched from the client.

A mon use case is seen at lots of react projects that the AJAX request is fired at ponentDidMount hook.

I just can't wrap my head around this proposed practice , let's say we have below ponent where the AJAX request depends on a prop from parent ponent and MyComponent won't get properly updated with correct ajax data if a second render action triggered from it's parent ponent(with new props) happen.but ponentDidMount won't get executed anyway

so I think this practice is gonna cause issue , can anyone help confirm it and justify it? or correct me if I'm wrong.

export default class MyComponent extends Component {
  constructor() {
    super(...arguments);
  }
  
  async ponentDidMount() {
    const data = await fireAjax(this.props.id);
    this.setState({data});
  }

  render() {
    const { data } = this.state;
    return (
        { data && <span>{data}</span> }
    );
  }
}

A mon use case is seen at lots of react projects that the AJAX request is fired at ponentDidMount hook.

I just can't wrap my head around this proposed practice , let's say we have below ponent where the AJAX request depends on a prop from parent ponent and MyComponent won't get properly updated with correct ajax data if a second render action triggered from it's parent ponent(with new props) happen.but ponentDidMount won't get executed anyway

so I think this practice is gonna cause issue , can anyone help confirm it and justify it? or correct me if I'm wrong.

export default class MyComponent extends Component {
  constructor() {
    super(...arguments);
  }
  
  async ponentDidMount() {
    const data = await fireAjax(this.props.id);
    this.setState({data});
  }

  render() {
    const { data } = this.state;
    return (
        { data && <span>{data}</span> }
    );
  }
}

• javascript
• ajax
• reactjs

Share Improve this question Follow edited Mar 13, 2018 at 16:48 T.J. Crowder 1.1m200200 gold badges2k2k silver badges2k2k bronze badges asked Mar 13, 2018 at 16:42 Deng ZhebinDeng Zhebin 1,26211 gold badge1010 silver badges1717 bronze badges 7

• 4 It should be ponentDidMount(), then use ponentWillReceiveProps() for the updates – Ted Commented Mar 13, 2018 at 16:44
• 2 I think if you need props to add in your AJAX request you then should use other React lifecycle methods – Adolfo Onrubia Commented Mar 13, 2018 at 16:47
• And it's not defined anywhere that React will handle it returning a promise properly, so you shouldn't make it async. (Or if you do, you should ensure that it never throws. Since that will end up being an unhandled rejection.) – T.J. Crowder Commented Mar 13, 2018 at 16:47
• yes , I know it and async/await is just for demonstration. – Deng Zhebin Commented Mar 13, 2018 at 16:48
• 1 "so I think this practice is gonna cause issue" The React development team disagree with you: "If you need to load data from a remote endpoint, this is a good place to instantiate the network request." – T.J. Crowder Commented Mar 13, 2018 at 16:49

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 3

You're misunderstanding the pattern.

ponentDidMount is the correct place to do async fetching that you want to occur when the ponent mounts. If there is some other action that ought to trigger the data fetch, then yeah, do the async call in that other location.

What you really want to look into is the entire Flux paradigm, which is a fully fleshed out data flow made for react (though it can also be used elsewhere). There are plenty of packages that wrap that design pattern with helpful handlers, the most popular being Redux.

But no, no one is suggesting that all async calls occur in that lifecycle hook.

I think you mean ponentDidMount.

This method will only get called once. It does not get called again on a re-render, only if the ponent gets deleted and remounted.

If the ponent needs to regularly update using different data, you would be better moving this data fetching into its parent and passing it as a prop. You could pass a loading prop while the data is resolving, then pass the data when it is ready.

If you do the AJAX request before the ponent mounts, the ponent will probably render before the request pletes and you still have the problem of the data not being ready.

What you should be doing is making the AJAX request in the parent ponent, and once the request pletes, you pass the data from the AJAX request to a child ponent through props. Perhaps displaying something to inform the user that it's loading.

I think you should check this article: https://daveceddia./where-fetch-data-ponentwillmount-vs-ponentdidmount/ by Dave Ceddia. The idea here matches what you wrote in your code. So yes, it's one of the right ways to handle side effects in React.

Just copying/pasting here ;)

In practice, ponentDidMount is the best place to put calls to fetch data, for two reasons:

Using DidMount makes it clear that data won’t be loaded until after the initial render. This reminds you to set up initial state properly, so you don’t end up with undefined state that causes errors.

If you ever need to render your app on the server (SSR/isomorphic/other buzzwords), ponentWillMount will actually be called twice – once on the server, and again on the client – which is probably not what you want. Putting the data loading code in ponentDidMount will ensure that data is only fetched from the client.

本文标签： javascriptWhy is componentDidMount the best place to fire AJAX requestStack Overflow