React Component Lifecycle

react Aug 08, 2019

States & Life Cycles

In React, each component has a state. A state is an object with values. A state
is exactly what it sounds like. It's the state of that component in terms of one or
more flags, parameters and settings usually specified by using numerics, booleans,
arrays or maps.
The Life Cycle of a React component has a lot to do with states. And React
provides several default methods that help us write efficient applications. These
methods are briefly outlined below.
Each component will usually control its own states via following helper
methods. They are designed to modify or update component's state at a unique time
during the application flow or component's Life Cycle.
All of these methods are attached to the component's object like shown below.
This is just a brief example demonstrating the placement of these methods within
your React object.
Let's take a look!

/ This is almost like a component's constructor!
getInitialState: function() { … },

// Component mounting events
componentWillMount: function() { … },
componentDidMount: function() { … },
componentWillUnmount: function() { … },

// Component updating events
componentWillReceiveProps: function() { … },
componentWillUpdate: function() { … },
componentDidUpdate: function() { … },
shouldComponentUpdate: function() { … }

// Render the component to the DOM
render: function() { /* return something */ }

That's a whole lot of Wills and Dids. But what do they all mean?
These methods are like the command center of our component!
Below I'll provide brief descriptions for which events during the lifetime of a
component each one of these methods is responsible for.
getInitialState functions like component constructor. It is called before the
component is rendered on the screen.

componentWillMount called before render() method just once. It is never
called again throughout component's life cycle. Sometimes used synonymously as
component's constructor method.

componentDidMount called just after the component has been rendered for
the first time.

componentWillUnmount called when the component is about to be
destroyed. This is a place to clean up memory and delete state.

componentWillReceiveProps is called when props are passed to the
component. For example if you have Form component and TextInput component
that allows user to change its value by typing text into it. Imagine if TextInput has
an onchange event that passes in some props to the component. Soon as the new
text is entered into the input field, the value is passed to the main component as
props. This is the moment when componentWillReceiveProps is triggered.

componentWillUpdate is called right before the render method is executed
on a component. It gives us a chance to handle any state changes before next render

componentDidUpdate is called soon after render() method has finished
updating the DOM.

shouldComponentUpdate is a default method that always returns true. It
gives us control over whether the component's element should update in DOM.
This isn't always the case. For example, if the new results of some state or
property in a component equals the value of what it was previously set to anyway,
it's probably not worth updating the DOM. Why send the data to the view if it did
not change even after being updated?

These methods are crucial to understanding virtual DOM. As we're slowly
peeling principles of react programming one by one, it will all start making sense.
For now just know that a react component is usually mounted to a render
target. This is why some of the default methods mentioned above use the word
"mount" instead of traditional setter or getter methods like "set" or "get" you
would expect. M ounting is an idea unique to programming with React and the
components created within React's virtual DOM ecosystem.

We've already talked about components theoretically. But what is a component
in practice? Remember that your application is made up of compartmentalized
elements. Components can literally be anything from buttons, text input fields,
check boxes to action status areas for displaying text. You will determine the
design of your component based on the purpose of your application.

Neeraj Dana

Experienced Software Engineer with a demonstrated history of working in the information technology and services industry. Skilled in Angular, React, React-Native, Vue js, Machine Learning