{"id":98526,"date":"2019-10-01T13:00:27","date_gmt":"2019-10-01T10:00:27","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=98526"},"modified":"2019-09-30T15:47:12","modified_gmt":"2019-09-30T12:47:12","slug":"reactjs-lifecycle-methods-tutorial","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/reactjs-lifecycle-methods-tutorial.html","title":{"rendered":"ReactJS Lifecycle Methods Tutorial"},"content":{"rendered":"

In this piece, we are going to dive into the ReactJS lifecycle methods. We explore the events as a component renders to the DOM. Updates to a component trigger additional lifecycle events that we will also look at. We build a simple ticker component and log out method names as they run.<\/p>\n

To start off I will be using create-react-app to create skeletal of our project. create-react-app<\/code> is an npm<\/code> package that helps create a starting point for a ReactJS Application. <\/p>\n

I have used the below toolset for the application in this article. Some of them are necessary whilst you can switch to your favorites for others.<\/p>\n

    \n
  1. create-react-app Package<\/a><\/li>\n
  2. TypeScript<\/a><\/li>\n
  3. Visual Studio Code IDE<\/a><\/li>\n<\/ol>\n

    1. Initial Setup<\/h2>\n

    Firstly, we will create our application skeletal using create-react-app. We do this by running the below command on the command prompt.<\/p>\n

    > npx create-react-app my-app .<\/pre>\n
    Once the command completes we run the following command to complete setup of our application.<\/p>\n
    >npm i @types\/react typescript react-app-polyfill<\/pre>\n
    Now our generated application when opened in Visual Studio Code should look like below:<\/p>\n
    \n
    \"ReactJS
    Project Structure<\/figcaption><\/figure>\n<\/div>\n
    2. Ticker Component<\/h2>\n
    We create a new React component in a file called Ticker.tsx. This component sets up a ticker using the JavaScript function setInterval. On each passing of the interval a method updateTicker is executed. This method updates the state of the component storing the current datetime in it. The component re renders every 2 seconds since I have set the interval to 2 seconds The code for our component so far looks like below:<\/p>\n
    Ticker.tsx<\/em><\/span><\/p>\n
    import React from 'react';\n\nclass Ticker extends React.Component {\n    timerId = 0;\n    constructor(props: any) {\n        super(props);        \n        this.state = { time: new Date()};\n    }\n    componentDidMount = () => {\n        this.timerId = setInterval(this.updateTicker, 2000);        \n    }\n    updateTicker: any = () => {\n        this.setState({ time: new Date() });\n    }\n    render = () => {   \n        return <div>{this.state.time.toString()}<\/div>;\n    }\n}\nexport default Ticker;\n<\/pre>\n
    As you might notice in the above code we have already started using lifecycle methods. In particular we leverage the componentDidMount<\/code> lifecycle method to setup our interval. This method is called as the component is initially loaded or mounted into the DOM.<\/p>\n
    3. Demo Component<\/h2>\n
    This component acts as the parent of our Ticker component. This component, in addition to our Ticker, renders a checkbox that we use to show hide our Ticker component. I will explain the utility of this feature as the article progresses. The code for our Demo Component looks like below and resides in a file named Demo.tsx.
     
    <\/div> <\/div><\/p>\n
    Demo.tsx<\/em><\/span><\/p>\n
    import React from 'react';\nimport Ticker from '.\/Ticker';\n\nclass Demo extends React.Component{\n    constructor(props: any) {\n        super(props);\n        this.state = { hideTicker: false };\n    }\n    render = () => {\n        return <div>\n            <input onChange={this.hideTicker} type=\"checkbox\" \/>\n            Hide Ticker \n            { !this.state.hideTicker && <Ticker \/>}\n        <\/div>;\n    }\n    hideTicker = (event: any) => {\n        this.setState({ hideTicker: event.target.checked });\n    }\n}\nexport default Demo;\n<\/pre>\n
    4. Initial Render <\/h2>\n
    The following lifecycle methods run in order as the application starts up. We can leverage them to write code that needs to execute at a particular stage during the lifecycle of a React Component. Let us take a look at these methods.<\/p>\n