Handling Time: Component Lifecycle Methods in React
They say that, in the same vain that art is used to decorate space, music is a way for people to decorate time. Because of this, composers and musicians are taught to handle time in the most thorough of ways possible.
When I was transitioning from music to programming, I knew there was many broad aspects of creative problem solving that would transition effortlessly into web development, but I never believed that the careful way we were taught to map out time would carry over into building the frontend of a website.
However after months of studying JavaScript frameworks one begins to realize that on any given website, a page doesn’t just simply load up. There will almost always have to be multiple things that will need to happen before, on and after a page render in order for the website to function as intended. This passage of time on and around the rendering of a component is referred to as the component lifecycle and is crucial for a budding developer to understand fully.
In my opinion, the way React operates within the component lifecycle is incredibly comprehensive and possibly the easiest to understand. React uses a series of component lifecycle methods in order to give the developer the ability to call functions throughout the component lifecycle. Some of these lifecycle methods are crucial to becoming a proficient developer in React while others are just very helpful to know about.
What Are the Component Lifecycle Methods?
Normally a React component is defined as a simple JavaScript class.
With the inclusion of the React library, each of these JavaScript classes contain several lifecycle methods that one can override to run code in particular times within the lifecycle. The methods that contain the word ‘will’ are called before an event happens while the methods that contain the word ‘did’ happen after an event. The most common occurrence of this is when methods are run before and after the component’s render method. Because of this, I will include a render method in each list of lifecycle methods I create show you where they fall within the lifecycle.
When Components Mount:
Mounting methods are called when a component is being initially inserted into the DOM. At this stage the component is loaded rather than updated and the methods are called in this order:
- constructor()
- componentWillMount()
- render()
- componentDidMount()
the constructor method is called well before the component is rendered. This method is primarily used to set the initial state of a React component. If props are being passed down from a higher level component, you should call super(props) otherwise this.props will not be accessible within the constructor method.
Component will mount is a very odd lifecycle method. And truth be told, its very rarely used by React developers. This method is called in between the constructor and render, right before a component is mounted. If state is set within this lifecycle method, a re-render will not be triggered. Because of this it’s usually best to not initialize state with this method.
The render method is technical the only method a React component needs to function. This component is what’s used to display the JSX on the DOM.
Component did mount is called immediately after a component is mounted. When data is loaded in this method, it will always trigger a re-rendering of the page. Because of this, this method is often the best method to use to make asynchronous calls in. This is the recommended method to use to set state.
All these methods are designed to initially render a component and by nature will work best on the initial load of a webpage. But what if we want to update a component after the initial render? React has a series of lifecycle methods designed specifically for updating components after the initial load.
Things Change and So Do Props: When Components Need to Update
Updating methods are triggered whenever a change to props or state happens and the lifecycle methods are called in this order:
- componentWillReceiveProps()
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- componentDidUpdate()
Component will receive props is triggered before a mounted component receives a new set of props. If the state of component needs to be updated when the component receives new props, you may compare the current set of props with nextProps to update state accordingly.
The finicky thing about this lifecycle method is that React has a tendency to call it regardless of weather or not props has been changed. Because of this, it’s always best to compare the component’s current props with its next set of props.
React also has a lifecycle method that is designed specifically to be a conditional statement. Should component update is designed specifically to test weather or not a component should update based on the information that is passed down to it. This method only returns a boolean. if should component update returns false, then componentWillUpdate(), render(), and componentDidUpdate() will not be called.
Just like componentWillMount(), component will update is called right before a component is rendered. It’s used mainly to perform final preparations on a component right before it’s rendered. This method also won’t allow you to call set state or do anything else that would trigger an update of the component.
Component did update is called right after an update occurs and provides an opportunity to operate on the DOM when the component has been updated. If necessary, this is the recommended place to make network requests in.
Time, Music and Web Development
A composer can place a music note anywhere around the beat just like a web developer can place a method anywhere around the render of a component. The differences begin to emerge as music notes are abstract elements of art while each method needs to have its own specific function. With this thought in mind, one can almost think of component lifecycle methods like a Formula 1 pit crew. When the race car lands in the pit, every single change needs to happen rapidly in quick succession and with full confidence in order for the driver to get back in the race, similar to building a website where everything needs to happen in split seconds in order for a page to load properly.
With all things considered, it shouldn’t surprise anyone that a careful way to handle time is necessary in order to build a proper web app.
Resources:
