Member-only story
In React, every component has several methods that trigger at different points in a components “life”. These methods are called Lifecycle Methods. Below, I go into detail on when these events are triggered and what they are commonly used for. Refer to the diagram above for a visual aid in understanding what order these events are triggered.
constructor(props)
The constructor method is triggered before mounting even begins. It is the first method called upon the initialization of a component. This method is particularly useful for creating an inital state for a component.
static getDerivedStateFromProps(props, state)
This method gets triggered just before render is triggered. This gives us access to the components state and props just before a component is rendered. This should be reserved for rare occasions when you may need to calculate state changes prior to an update.
render()
This method is where the component gets rendered to React’s virtual DOM. This method has access to both props and state.
componentDidMount()
This method is triggered just after the render method. This is particularly useful for asynchronous or long-running processes. You don’t want to leave a user staring at a component that did not yet mount because…
