The React Component Lifecycle Methods and Redux
Ever seen this graphic before? It looks complicated, but its actually a very important illustration as to how React/Redux works.
Before we begin, it’s important to understand that every React component has something called a component lifecycle. This lifecycle is most commonly divided into three parts: mounting, updating, and unmounting. Prior to the mounting phase, a pre-mounting phase occurs where the constructor function is called. Within this constructor, it is absolutely necessary to always call super(). This gives us the ability to set the value of this.
Mounting
When an instance of a component is being created and rendered onto the DOM, the constructor method is invoked first, but it’s also only invoked once. Following the constructor(), we have something called the render() method. This method is invoked every time there is a change in state. This is the only required method in a class component. This method is not responsible for modifying a component’s state, but it should return one of the following types:
- Arrays and fragments
- React elements
- Booleans
- Strings and numbers
- Portals
Although there are other lifecycle methods in the mounting phase, componentDidMount() is the last method that will be discussed in this section. This method is invoked immediately after a component is rendered onto the DOM and is also only invoked once. This method is also a good spot to make calls to an API!
Updating
componentDidUpdate() occurs immediately after something has updated. If necessary, you can call setState but it is essentially for it to be wrapped in a condition, else an infinite loop will occur. Note that when a component is updated, the render method is invoked again.
Unmounting
componentWillUnmount() is the is invoked immediately before a component is unmounted and destroyed. Calling setState in this function is not advised, because setState which trigger a re-render, but the component will never be re-rendered. Once this component is unmounted, it will not be mounted again.
What is Redux?
Redux is a state management tool that can be used with any JavaScript library or framework. With redux, the state of the application is kept in a store, and each component can access the state that it needs from this store. Redux allows us to manage and keep track of our application’s state in a single place. Redux may seem complex at first, but once you get the hang of it, it becomes easier! As we can see in the graphic above, there’s something called actions and dispatch. Actions are just events. They are the only way that we can send data from the application to the Redux store. These actions are sent using the dispatch method. Although they are just plain JavaScript object, they still need a type property to indicate the the type of action, and a payload property that contains the information that should be worked on by the action.
Lastly, Redux gives us something called reducers. Reducers are functions that take the current state of an application, perform an action, and return a new state. The state is stored as an object, and they specify how the state of an application changes in response to an action sent to the store. You might be wondering, what is a store? The Redux store holds the application’s state. Keep only one store in your application to keep things simple.
And there you have it! Its a very brief overview of Redux, as there is much more that could be discussed. Redux makes managing state easier.
Conclusion
Lifecycle methods can seem extensive at first because there are so many of them, but once you break each of the methods out into separate categories (mounting, updating, and unmounting), each lifecycle method can be associated with each category. Some methods, such as render(), can be stretch across multiple categories, but the picture displayed at the beginning of the article will be helpful to understand what method is used and when. There are many other methods that are not discussed in this article, but these are by far the most common (and required).
Happy Coding!
