Tutorials|Coding by Sunny Singh on August 02, 2016
In the third part of this series, we learned about props and PropTypes in React. I now want to get into the last fundamental concept of React and that is lifecycle methods. We technically already have used one of these methods, getInitialState, but there are many others that you can use to build useful components.
Every component goes through a lifecycle when it gets rendered. This simply means that a component is initially mounted, potentially updated, and finally unmounted. This is easier to understand with a visual, so check out this awesome diagram by Eduardo Bouças:
See the Pen React components lifecycle diagram by Tim Goyer (@tgoyer) on CodePen.
The useful aspect of this is being able to hook into any of these lifecycle methods, and provide extra functionality to the component. An extremely common method that is used is componentDidMount, which is called as soon as the component is rendered. A use case would be to display a loading indicator while fetching data from an Ajax request.
Let’s create a new component that does exactly this by fetching the user’s IP address via the ipinfo.io API. First, if you’re following along, make sure that you have the code from part 3 by cloning the GitHub repository. In the src/components folder, create an IPAddress.js file:
var React = require('react');
var IPAddress = React.createClass({
getInitialState: function () {
return {
ip: null
};
},
componentDidMount: function () {
// Fetch data and update state here...
},
render: function () {
if (this.state.ip === null) {
return (
<div>Fetching IP address...</div>
);
}
return (
<div>Your IP Address is {this.state.ip}.</div>
);
}
});
module.exports = IPAddress;
It doesn’t really do anything yet because the majority of the functionality will be in the componentDidMount method. Notice how initialState has an ip property where the user’s IP address will be stored. In the render method, we’re able to check if the IP is null to show a loading message. Otherwise, it will display the user’s IP address.
We’re ready to add code to the componentDidMount method. Let’s add the following:
componentDidMount: function () {
var headers = new Headers();
headers.append('Accept', 'application/json');
fetch('http://ipinfo.io', {headers: headers})
.then(function(response) {
return response.json();
}).then(function(json) {
this.setState({ip: json.ip});
}.bind(this));
},
I am using the new Fetch API here for a simple Ajax request, but keep in mind that browser support is still spotty for Fetch so make sure to load a polyfill in a real world scenario. Anyway, all that this method is doing is fetching data from ipinfo.io and when it receives the data, this.setState() is used to store the IP address.
This component is now ready, so let’s add it to to src/components/App.js:
var React = require('react');
var Button = require('./Button');
var IPAddress = require('./IPAddress');
var App = React.createClass({
render: function () {
return (
<div>
<h1>Hello!</h1>
{/* Let's add some props to Button: */}
<Button
initialText="Tap Here"
clickedText="Tapped!"
style={{
color: 'blue',
}}
/>
{/* This is a default Button: */}
<Button />
{/* This fetches user's IP and displays it: */}
<IPAddress />
</div>
)
}
});
module.exports = App;
Now run npm run enclave-serve and open http://localhost:8080/ in your browser. Your IP address should now be displayed after a few moments. Sweet, huh?
I only showed one new lifecycle methods here, but as you start to build bigger apps you will notice a need for other methods. For example, it may be useful to abort an Ajax request or to clear out data when a component is unmounted, so componentWillUnmount comes in handy there. The other methods are less often used but can be referred to in the React docs.
That’s it for this tutorial, and is the second to last one in this series. As always, you can get the code used in this part on GitHub. In the next part, I will close things off with some suggestions on what you can learn next, and other libraries to take a look at within the React ecosystem.