React Component Lifecycle - Render

The Render is one of the important life-cycle methods in the React component life cycle. The render is a mandatory method in a Component.

The render() method should be pure, i.e it should not modify the state (should not call setState()), it should return the same result each time it is invoked. The render method should not modify the state because, changing state will again trigger render(), this will continue as a cycle and cause an indefinite loop causing the application/browser to crashes.

Below is a basic render method of a React component.

  render() {
return (
  Hello Render
);

  }

The render() method contains the UI part of the react component, any UI to be displayed by the component is placed in the render method. Usually the render method returns a set of HTML tags. Other lifecycle methods deal with data like state, props, API calls etc and the render() method deals with the UI part of the react component.

The render() method is invoked whenever there is a change in the state/props of the component, however we can conditionally restrict the invoking of the render method using the shouldComponentUpdate life-cycle method. render() will not be invoked if shouldComponentUpdate() returns false, hence we can check any conditions states/props values in the shouldComponentUpdate method and return false to prevent invoking the render method.