Forem: Aditya Shukla

React Components Lifecycle Methods - WTH are they?

Aditya Shukla — Wed, 25 Nov 2020 08:57:12 +0000

Introduction 👋

Every component in React has it's own lifecycle. But before going in depth to that, 🤔 we should know what exactly is Lifecycle of a React Component, and why do I need to know it?

A Lifecycle is nothing but a sequence of methods that are executed at different stages of the component's existence. Each react component has several "Lifecycle Methods". We need to know these methods so that we can override them when we want to run some code at a particular time in the process.

🌱 Phases of a React Component

There are 4 Phases of a Component:

Mounting : During this phase, the Component is initialized and the inserted into the DOM.
Updating : If there is already a Component rendered on the DOM, then any updates are done to the Component as part of the Updating phase.
Error Handling: This Phase is responsible for taking care of the error found during rendering in lifecycle method or in the constructor or any other child components.
Unmounting: During this phase, removing of component from the DOM as well as cleanup activities are done.

🧬 Lifecycle Methods

Now that we know the different phases of a React Component, lets now try to understand the different Lifecycle Methods that are invoked during each phase.

1. 🐇 Mounting Phase:

At this phase the Component is created with props and state which are initialized within a constructor. Once ready with props and state, the component is ready to mount on to the DOM and is rendered for the first time on the web page.

The methods in the Mounting Phase are:

1. constructor():

This is the first method that is called for any component.
The main purpose of constructor is to initialize the props and state. Along with that, it also binds the events with 'this' i.e. the Instance.
The constructor includes a call to the super() along with the initialization of this.state.
One thing to keep in mind is that, the initialization of the state can be done without the constructor() method too and it'll work the same.

  import React from 'react';

  class AppComp extends React.Component {
        constructor(props) {
                super(props);
                this.state = {
                        title : 'Lifecycle Methods'
                }
                console.log('Inside React Component 
  Constructor');
          }
  }

2. getDerivedStateFromProps()

Just before rendering the component on the DOM, getDerivedStateFromProps method is called.
This method is called when the state of the component depends on the props.
Basically, this method allows the component to change it's state when there is any change in the props.
This is used very rarely, but its important to understand it's the order of execution as this method is called in Mounting Phase as well as in Updating phase.

Continuing the above code snippet:

  import React from 'react';

  class AppComp extends React.Component {
        constructor(props) {
                super(props);
                this.state = {
                        title : 'Lifecycle Methods'
                }
                console.log('Inside React Component 
  Constructor');
          }

        static getDerivedStateFromProps(props, state) {
                console.log('Inside React Component
                        getDerivedStateFromProps');
          }
  }

3. render()

We write the JSX code inside this method which will be rendered on the DOM.
This is the only method that is required when we are creating a Component in React.
This method does not modify the state, it simply returns the same result each time it is invoked.
render() method observes the props and state values and it returns either of the following:
- React Element
- Array
- Fragment
- Strings, numbers, booleans or null

  import React from 'react';

  class AppComp extends React.Component {
        constructor(props) {
                super(props);
                this.state = {
                        title : 'Lifecycle Methods'
                }
                console.log('Inside React Component 
  Constructor');
          }

        static getDerivedStateFromProps(props, state) {
                console.log('Inside React Component
                        getDerivedStateFromProps');
          }

        render() {
                console.log('Inside render method');
                return <div> This is the App Component </div>
        }          
  }

4. componentDidMount()

As soon as the component is mounted / inserted into the DOM tree, this method gets called.
Unlike render(), this method is called only once and that too on the Mounting phase. This makes this method the most suitable place for loading data from remote endpoints or making a network request.
We can even call the setState() method from within this method to modify the state and ultimately recall the render() to update the contents of the DOM.
This method ensures that the user won't see any intermediate states even though render() method is called twice.

  import React from 'react';

  class AppComp extends React.Component {
        constructor(props) {
                super(props);
                this.state = {
                        title : 'Lifecycle Methods'
                }
                console.log('Inside React Component 
  Constructor');
          }

        static getDerivedStateFromProps(props, state) {
                console.log('Inside React Component
                        getDerivedStateFromProps');
          }

        componentDidMount(){  
                  console.log("Inside componentDidMount");
         }

        render() {
                console.log('Inside render method');
                return <div> This is the App Component </div>
        }          
  }

Console Output for the above code:

Still With Me here? Hold on a bit

Now, let's see the 2nd Phase of a Component's Lifecycle

2. 👨‍💻 Updating Phase:

Whenever there is a change in the state of the component, the component's lifecycle comes inside the Updating phase.
Some of the methods are common in the Mounting and Updating phase, this is because these same methods are called again during this phase. These methods are:
- getDerivedStateFromProps(), and
- render()
Including these methods, there are a total of 5 methods in the Updating phase. Let's look at them one by one

1. static getDerivedStateFromProps()

In the Updating phase of the component this method is called whenever the component receives new props, or whenever the setState() method is called to updated the existing state.
One thing needs to be made sure here is that there should be no HTTP requests or Ajax calls etc. be made in this method.

2. shouldComponentUpdate()

This method is called whenever there is a change in the state.
It decides if the component should be re-rendered or not as it is called right before the render() method when new props or state are received.
Since it is only called when there is a change in the existing state, this method was not present in the Mounting phase.
It takes in the nextProps and nextState as the function parameters, which looks like this:

shouldComponentUpdate(nextProps, nextState)

If this method returns false, it notifies React that the update can be skipped.

3. render()

The functioning of the render() method in the Updating phase is same as that of in the Mounting phase.

4. getSnapshotBeforeUpdate()

This method is called right before any changes are going to be updated in Real DOM from virtual DOM.
It is used to capture some information from DOM. Example: Observing the scroll position, etc.
It is the final call to check the data with its previous state/props.
This method will either return a value or null. Whatever the return value is, it will be passed as the 3rd parameter to the next method.

5. componentDidUpdate()

This is the final method of the Updating phase.
It is called after all the changes are updated in the DOM.
The syntax for this is as follows:

componentDidUpdate(prevProps, prevState, snapShot)

The 3rd parameter i.e. the snapshot is the value which was returned by the getSnapshotBeforeUpdate() method.

Let's see the below code to understand the Updating phase:

Child.js:

import React, { Component } from 'react';  

class Child extends Component{  
        constructor(props){  
                super(props);  
                this.state={  
                        value:'React Application'  
                }  
                console.log("Inside child constructor");  
        }  

        static getDerivedStateFromProps(props,state){  
                console.log("Inside child getDerivedStateFromProps");  
                return null;  
        }  

        componentDidMount(){  
                console.log("Inside child componentDidMount");  
         }  

        shouldComponentUpdate(){  
                console.log("Inside child shouldComponentUpdate");  
                return true;  
        }  

        getSnapshotBeforeUpdate(prevProps,prevState){  
                console.log("inside child getSnapshotBeforeUpdate");  
                return null;  
        }  

        componentDidUpdate(){  
                console.log("Inside child componentDidUpdate");  
        }  

        render(){  
                console.log("Inside child render");  
                return <div/>  
        }  
}  

export default LifecycleChild;

App.js

import React,{Component} from 'react';  
import Child from './Child';  

class App extends Component{  
        constructor(props){  
                super(props);  
                this.state={  
                        value:'React Application'  
                }  
                this.changeState = this.changeState.bind(this);  
                console.log("Inside constructor");  
        }  

        static getDerivedStateFromProps(props,state){  
                console.log("Inside getDerivedStateFromProps");  
                return null;  
        }  

        componentDidMount(){  
                console.log("Inside componentDidMount");  
        }  

        shouldComponentUpdate(){  
                console.log("Inside shouldComponentUpdate");  
                return true;  
        }  

        getSnapshotBeforeUpdate(prevProps,prevState){  
                console.log("Inside getSnapshotBeforeUpdate");  
                return null;  
        }  

        componentDidUpdate(){  
                console.log("Inside componentDidUpdate");  
        }  

        changeState = () => {   
                this.setState({  
                        value : "React Application started"  
                })  
        }  

        render(){  
                console.log("Inside render");  
                return(  
                        <div>  
                                <div>React Parent</div>  
                                <button onClick={this.changeState}>Click Me</button>  
                                <Child />
                        </div>  
                );  
        }  
}  

export default App;

Console Outputs:

During Mounting..

During Updating (On clicking the "Click Me")...

Notice that all the console outputs are in the order for all the methods as per the lifecycle. But there is a small different in calling of getSnapshotBeforeUpdate().
For the getSnapshotBeforeUpdate() method, the child's method is called before the Parent's method. Once called, all the other Parent's methods are called.

Note: Even thoght we saw 5 methods for the updating phase, the most used ones are the render() and componentDidUpdate(), out of which render() is the only method which is mandatory.

3. 🥂 Unmounting Phase

The React component enters this phase after going through the Updating phase, when the component is removed from the DOM.
This phase as only 1 method, which is:

componentWillUnmount()

This method is called just before the Component is removed from the DOM. This removal can be unmounting or being destroyed.
We need to make sure of one thing that is, the setState() method should never be called inside this method.
The reason for this is, the componentWillUnmount() method is the last stage of the lifecycle of any React Component, once it is unmounted it will never be mounted again. And the setState() method re-renders the contents on the DOM, so it will not be possible.
Usage: This method can be used for Clean up process. For example, closing any open connections, or cancelling any network requests or removing any event handlers, etc.

Summary:

So during the lifecycle of any React Component, it goes through different phases, these phases are Mounting, Updating and Unmounting phase. There is another phase called as Error Handling phase which also contains two methods: getDerivedStateFromError() and componentDidCatch().

Thanks for Reading.. 🔚

Understanding And Implementing Password Hashing In NodeJS.

Aditya Shukla — Fri, 23 Oct 2020 19:45:19 +0000

It is the user's responsibility to have a strong password, but as a developer, it is our responsibility to keep their passwords secured. We've learned it in Cybersecurity 101 - "Never, for the love of god, ever save the password in the form of plain text in your database. Always Hash it before saving". And it makes sense right? Password is a very, if not the most, sensitive and confidential information that a user is trusting the application with. It is possible that they might have the same password on any other platform, maybe even on any banking websites. It would be a disaster if someone else gets hold of the user's password, that too in plain text.

What exactly is Password Hashing?

Hashing basically means to transform the data into a string of fixed length using a hash function. This transformation is irreversible. The process is simple,

It is similar to Encryption, but with one difference i.e. the encrypted text can be decrypted using the Cryptographic keys, but it is nearly impossible to get the original string back by just having the hashed string. You can also call it as "One Way Encryption" just to remember it easily.

Click here to read my article on Medium where I have explained the difference between Encoding, Encryption and Hashing in detail.

Let's Implement a small program to understand it better.

const crypto = require('crypto')

const md5sum = crypto.createHash('md5');
let str = "Hello";

const res = md5sum.update(str).digest('hex');
console.log(res);
//8b1a9953c4611296a827abf8c47804d7

In the above code snippet, we have hashed a string using the md5 hashing algorithm in JavaScript.
Please note that, the hashed string that we are getting as the output is unique to the input string "Hello", it is nearly impossible to find any other string producing the same hash.

Just having just a hash only lets you verify the authenticity of the data. What I mean is, if you have the hash function and you pass the plain text through it, you'll get the hash value, and once you compare the generated hash value with what was stored in your database, then only the authenticity of that data can be validated.

But we need more than just that. We also need to verify the originator of the data along with it's authenticity i.e. we want to make sure that the entity passing the plain text to generate the hash for comparison is the same who originally generated it. This way we can make sure that it is the intended user only and not any unknown attacker. For that we use another technique called HMAC (Hash-based Message Authentication Code). This adds an extra layer of security for storing the password.

HMAC uses a Secret key. This secret key is used to create the hash, such that if any other key is used in the same hash function for the same text, the generated hash will be different. This ensures that the hash is being generated by a genuine entity.

Let's look at the code to understand better:

const crypto = require('crypto');

const hashingSecret = "ARandomSecretKey";
const plainText = "Hello World!";

const hashedStr = crypto.createHmac('sha256', hashingSecret)
                        .update(plainText)
                        .digest('hex');

consdole.log(hashedStr);
//a08116905e92633e4f30e53fq276206b25930rta383642fc5b7f51c089187939

Now, if we want to regenerate the same hash for the plainText = "Hello World!", then we would require the same secret key i.e. hashingSecret = "ARadnomSecretKey".

Okay, if I hash a password before storing it inside our database, so even if the hacker/attacker gets hold of the hashed password, I need not to worry. Right?
I wish this was true. Attackers can use Brute-Force, Dictionary or Rainbow Table attack to crack the hashed strings.

FYI

Brute Force attack, works by calculating the hash function of every string present with them, calculating their hash value and then compare it with the one in the computer, at every step.

Dictionary attack is the simplest form of attack possible on a hash function. We simply store for each possible input the corresponding hash. Then, given a hash, we can look it up in our database, and find the matching input.

A Rainbow Table works by doing a cryptanalysis very quickly and effectively. Unlike bruteforce attack, a rainbow table attack already computes the hashes of the large set of available strings and stores it in a rainbow table.

Is there any way to avoid this? Answer is Yes there is, but it's a bit salty.

What is Salting?

No, it does not mean adding salt to you hash browns. Actually, Salting is a technique used in the hash generation process, to make the generated hash more secure. In salting, random data is added to the input string, then the combined string is passed through the hash function to get a unique hash. This generated hash will be different even for the same set of inputs.

And as you can guess, by doing so we are making the process of the attacks like Dictionary and Brute-force, very very slow as all the generated hashes are unique.

Let's understand it using code. In the code below, we'll be using a npm module called bcrypt. Since the methods are Asynchronous, we'll be using the promise approach to understand the different methods.
Follow the below steps before writing the code:

:~$ mkdir hashing
:~$ cd hashing
:~/hashing$ npm install bcrypt

Step 1: Import the module

const bcrypt = require('bcrypt');
const saltRounds = 10;
const plainText = "Hello World";

Step 2: Generate the Salt using bcrypt.genSalt method

bcrypt.genSalt(saltRounds)
  .then(salt => {
    console.log(salt);
    //Output: $2b$10$uuIKmW3Pvme9tH8qOn/H7u
    //A 29 characters long random string.
  });

Step 3: Inside the genSalt callback, call bcrypt.hash method

bcrypt.hash(plainText , salt)
 .then(hash => {
   console.log(hash);
   //Output: $2b$10$uuIKmW3Pvme9tH8qOn/H7uZqlv9ENS7zlIbkMvCSDIv7aup3WNH9W
   //A 61 character long string (notice that the 1st part of the string is actually the salt.
 });

So, if I combine the above code snippets into one, it'll be as below:

const bcrypt = require('bcrypt');
const saltRounds = 10;
const plainText = "Hello World";
bcrypt.genSalt(saltRounds)
 .then(salt => {
    bcrypt.hash(myPlaintextPassword, salt)
      .then(hash => {
        console.log(hash);
      });
 });

There is another way to generate the hash using bcrypt.hash function. In this approach the salt is auto generated and we just need to pass the saltRounds directly to the bcrypt.hash function.

bcrypt.hash(myPlaintextPassword, saltRounds)
 .then(hash => {
    console.log(hash);
 });

Okay, so a Salted Hash is generated and stored in the DB during sign-up. Now when a user wants to login, we need to match the password entered by the user, with what is stored in the DB. bcrypt module provides another method called bcrypt.compare to compare the input string with the hashed string.

// Load hash from your database for the password.
bcrypt.compare(loginPasswordString, hash)
 .then(result => {
    console.log(result);
    // This will be either true or false, based on if the string
    // matches or not.
 });

Note: When we are hashing the data using bcrypt, the module will go through a series of rounds. This is done to return a secure hash. The value that you provide as the saltRounds, bcrypt will go through 2^saltRounds iterations. This makes the algorithm slower than any other hashing algorithm, and hence making it more secure as it also increase the time that an attacker has wait for cracking the hashed using brute force, dictionary or rainbow table attacks (sometimes even more than a year).

In Conculsion:

Passwords must always be stored as Hash Value in the database and not in Plain Text.
We can use crypto module in NodeJS to implement different Hashing Algorithms like md5, sha264, hmac etc.
Salting is a process in which a random string is added to the plain text before it is passed to the hash function to get a more secure hashed string.
In my opinion, we must always use bcrypt module in NodeJS, as it allows Salting the hash, which makes it more secure and much more difficult for an attacker to crack it.

Follow me on Twitter, GitHub, and Medium for more content or just visit to say Hi.