React JS States and 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, boolean, array or map.
React JS States & Life Cycles
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 the following helper methods. They are designed to modify or update components state at a unique time during the application flow or component’s Life Cycle.
React JS States Example
All of these methods are attached to the component’s object as shown below. This is just a brief example demonstrating the placement of these methods within your React object.
Let’s take a look!
var MyComponent = React.createClass({
displayName:
MyComponent',
// 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 /}
});
React JS Methods
Below I have provided brief descriptions for which events during the lifetime of a component each one of these methods is responsible for.
- getInitialState functions like a 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 the component’s life cycle. Sometimes used synonymously a component’s constructor or 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 the 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 the next render update.
- 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 the principle of reacting 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. Mounting 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 field, checkboxes to action status areas for displaying text.
You will determine the design of your component based on the purpose of your application. Because we’ve just discussed methods that deal with the “mounting” of components, it is natural to explore what it means in our next-gen.