updating

The updating phase happens when there is a change to the state or props of a React component – the component is re-rendered. These methods are called in the following order when a component is being re-rendered:

render()

render() is the only required method in a class component. render() is called when a component is updated, so that the HTML can be re-rendered to the DOM. When called, it should examine this.props and this.state and return one of the following types:

  • react elements
  • arrays and fragments
  • portals
  • strings and numbers
  • booleans and null

The render function should be pure, meaning that it does not modify component state, it returns the same result each time it’s invoked and it does not directly interact with the browser.

componentDidUpdate()

componentDidUpdate() is invoked after a component has been updated in the DOM. This method is not called for the initial render. You can use this to operate on the DOM when the component has been updated. componentDidUpdate() receives the previous props and state as arguments.