At this point, our counter supports adding/removing items, but it lacks interaction with a server. Let's say that you have ordered 10 copies of a book on your phone, and you want to review your order on your laptop. We will now modify our counter to support this use case, and for that we need to learn about lifecycle methods.
A component can implement callback functions that are called by React when particular events occur. These functions are named lifecycle methods and are called:
- before/after the component is mounted (inserted into the DOM):
- before it receives new props:
- whether the component should be re-rendered:
- before/after it is re-rendered:
- and finally before the component is unmounted:
We have already used
setState to update the state of a component, the only other method from
React.Component that a component might call directly is
forceUpdate to force a component to update (regardless of whether its props or state have changed).
Load the initial number of items
counter-did-mount example so that it sets the count after the component is mounted.
An aside note: any pending request should normally be cancelled in
componentWillUnmount, unfortunately at this time this is not possible with
abort is standardized, if you need to cancel a request when your component unmounts you will have to use XMLHttpRequest.