Lifecycle methods in React Native

In the previous chapter, we discussed about React Native state. Today we are going to learn another function that Class based components have. It is Lifecycle methods in React Native.

When we fetch some data from an API to show on the screen, we should have a question that when do we fetch those data and show the on the screen. Is it when your app UI loads, or is it before UI is rendered or after. We should have the idea that this is the time to fetch some data to the application.

Let’s say we don’t have any button to request that now you have to fetch some data. We need data fetched as soon as the app loads. For that, we need a function which identifies that a component is about to be rendered onto the screen. This is when we use Lifecycle methods in React Native.

What are Lifecycle methods?

Lifecycle methods in React Native is a set of methods provided by React Native to instantiate, mount, render, and finally update, unmount, and destroy components. Lifecycle methods are functions which are placed in our class and will be automatically called at some point. One of those methods is componentWillMount(). I hope you remember we used this method in the previous chapter. There are more Lifecycle methods in React Native. Let’s get to know them.

componentWillMount()

componentWillMount is executed before rendering, on both the server and the client side.

class DataList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            name: "Buwaneka",
            university: "Sabaragamuwa University"
        };
    }

    componentWillMount(){ // We will learn about this method in a later chapter
        this.setState({ name: "Buwaneka Sudheera", university: "Sabaragamuwa University of Sri Lanka" });
    }

    render() {
        return (
            <View>
                <Text>{this.state.name}</Text>
                <Text>{this.state.university}</Text>
            </View>
        );
    }
}

Here, constructor(props) is used to initialize our component with initial state. Then, componentWillMount is called only once before rendering the component for the first time. Then, after render method is called, jsx elements are shown in the UI with changed state values.

constructor() - componentWillMount() - render()

Above mentioned diagram shows the steps of methods calling.

componentDidMount()

componentDidMount is called once after the whole UI for this component has finished rendering only on the client side. This is where ajax requests and DOM or state updates should occur. This can be used inside the component just like we used componentWillMount inside the component.

render() - componentDidMount()

These are two main mostly used lifecycle methods. Let’s get the basic knowledge about other lifecycle methods as well. We will learn examples for those in a later article when we develop an app.

componentWillReceiveProps is called as soon as the props are updated before another render is called.

shouldComponentUpdate returns a boolean value. This will decide whether the component should be updated or not giving an output as true or false.

componentWillUpdate is called just before render method is called. If some data is updated, it re-renders the UI. It checks for changes all the time.

componentDidUpdate is called just after rendering. This also updates the UI when data is changed.

componentDidUpdate(prevProps, prevState) {
            if (prevState.package !== this.state.package) {
                //Call a method to re-render
            }
    }

shouldComponentUpdate() - componentWillUpdate() - render() - componentDidUpdate()

Above mentioned diagram shows how these methods work.

componentWillUnmount method is called when a component is being removed.

These are the Lifecycle methods in React Native which can be only used in class based components. Here, we just got a basic knowledge. We will talk more about these practically in a later article.

Now you have the basic knowledge for developing an app. Now you know  functional based and class based components, Lifecycle methods in React Native and React Native State. In the next article we will start to developing an app with more coding and we will use this knowledge for that.

Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *