When should ReactJS components make AJAX calls to update state from props?

I have a React component that displays information about an entity. The id of the entity is passed in via a property. The component starts an AJAX call in “componentDidMount” to fetch the entity and updates state when the call completes/fails.

This works fine except that the component does not fetch new data when the entity id changes (via props).

I have tried starting a call in “componentWillReceiveProps” but at that stage the component still has is old properties set. I would have to pass nextProps to the AJAX call method and that doesn’t seem right.

What is the best/cleanest way to have a component asynchronously update its state in response to a property change?

Source: ajax

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.