Coming from the ASP .NET background the idea of a page life cycle is pretty well known to me. I was relieved to discover that React components follow a similar model: The Component Lifecycle. Briefly, these are defined methods that are always called during the life of a component and can be overridden with custom logic.

The similarities lie in the idea that there are specific events for the creation, use and termination of a Page or Component. Because ASP .NET is a server side rendered page it has a more complicated life cycle. If you want to compare take a look at this ASP .NET Page Life Cycle Overview.

The React Component is simplified and as such can be broken down into three phases:

• Creation and initial rendering – When a component is used it will need to be instantiated and rendered on the page. For this there are several methods which are executed in the following order:
  • constructor(): If you’re familiar with object oriented programming this is the method that instantiates your component. Useful for setting up initial state of the component and binding your call backs.
  • componentWillMount(): This is called immediately before mounting the component and rendering. This is useful because any logic in this method won’t trigger a re-render.
  • render(): This is the real heart of a component where the actual output is specified (what will show up on the screen). This method is required. Also note that the render function should not modify state directly.
  • componentDidMount(): Invoked immediately after the component is mounted. Any updates in this method will cause a re-render. This is a good location to fetch data from a remote source because the component will have rendered before the data is fetched.
• Using and updating the component – Once the component is mounted it will be interacted with. This is where the user gets a chance to use the component. The following methods are executed in order when the component is being re-rendered:
  • componentWillReceiveProps(): This is called when the component props change (maybe being reset). This is not called during initial mounting and will only be called if some props update.
  • shouldComponentUpdate(): React’s default behavior is to re-render on any state change. This method can be used to override that if there’s cases when an update shouldn’t cause the component to re-render.
  • componentWillUpdate(): Similar to componentWillMount() this can be used for perparing before a re-render. Keep in mind that you can’t call this.setState() within this method.
  • render(): Same as above. This is what outputs the component. All updates have been captured and pushed to the screen.
  • componentDidUpdate(): Called immediately after the re-render. Similar to componentDidMount() and can be used for updating DOM elements or calling network resources.
• Disposing the component – At the end of the lifecycle the component is removed from the DOM. Here we have one useful method:
  • componentWillUnmount(): This is called immediately before the component is unmounted and destroyed. Us this to clean up anything outstanding (network requests, DOM elements, timers etc.).

As you get into more complicated use cases your components will inevitably require the use of these lifecycle methods to handle complicated logic, data requirements and interactivity. Getting to know them will help in understanding React better.