Describe render method.

Difficulty: 5/10

class components, render lifecycle, performance

The render() method is the only required method in a class component. It is called after static getDerivedStateFromProps and before componentDidMount. It is used to render the UI of the component.

When called, it examine this.props and this.state and return one of the following types:

1
React elements. Typically created via JSX. For example, <div /> and <MyComponent /> are React elements that instruct React to render a DOM node, or another user-defined component, respectively.
2
Arrays and fragments. Let you return multiple elements from render. See the documentation on fragments for more details.
3
Portals. Let you render children into a different DOM subtree. See the documentation on portals for more details.
4
String and numbers. These are rendered as text nodes in the DOM.
5
Booleans or null or undefined. Render nothing. (Mostly exists to support return test && <Child /> pattern, where test is boolean).

1
render() will not be invoked if shouldComponentUpdate() returns false
2
The render() function should be pure, meaning that it does not modify the component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser.
3
If you need to interact with the browser, perform your work in componentDidMount() or the other lifecycle methods instead. Keeping render() pure makes components easier to think about.

0-2 years experience