What is the role of the render() function inside react component?

Question

I am newbie in reactjs and confuses on use of render function inside component class and using with ReactDOM global object.

Answers to this question don't fully addressed the use of render() function inside the class component. Here in reactjs official site, I found functional component which doesn't make use of render method. So my point is what the role render() function played when creating component [as shown in the below example].

I am following this tutorial. I think using render with ReactDOM creates virtual Dom but what the use of it inside all the component class. On the official tutorial from react render() is used on all component class.

class Square extends React.Component  {
    render() {
        return(
            <button className="Square">
                {this.props.value}
            </button>
        );
    }
}

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

Please refer to this link. https://stackoverflow.com/questions/33465674/render-function-in-reactjs — Allen Haley, Apr 23 '18 at 13:07
Thank you for the reference, but it doesn't represent to my question... — Sushil Adhikari, Apr 23 '18 at 13:14
@SushilAdhikari check out https://reactjs.org/docs/state-and-lifecycle.html based on `Clock` example, we implement the Class Component with own `render()` rather that we call `ReactDOM.render()` to change the rendered output, to have the `Clock` update itself inside the same DOM node (created with `ReactDOM.render()`). Simply, No all Virtual DOM `diffing` but only exactly Class-node. — storenth, Jun 24 '20 at 04:22
I was asked this question in interview. I use it every day but couldn't explain it to them. — pramodpxi, Dec 01 '20 at 16:40

score 12 · Answer 1 · answered Apr 23 '18 at 13:10

12

render function is part of the react component lifecyle where ReactDOM is the class object which exposes a method called render which is used to render the React JSX content into your DOM.

Generally you would use ReactDOM.render once in your App to render the top level component, all other components will be children to the top level component

ReactDOM instance is what you import from 'react-dom', it isn't a global object.

A react component goes though a number of mounting and updating lifecycle method and decides to render the data in the render function. Any JSX code that you write in render method is converted to React.createElement(tag, props, children) before it is rendered into the DOM.

answered Apr 23 '18 at 13:10

Shubham Khatri

270,417
55
406
400

Thank you Shubham for the clear explanation, so if we don't use JSX in their than we can create component without render(), am I right? – Sushil Adhikari Apr 23 '18 at 13:19
Not really, even if you use React.createElement it needs to be in render, the only thing to remember about render is that it doesn't interact directly with the browser and virutual DOM comparison happens internally as a part of this lifecycle – Shubham Khatri Apr 23 '18 at 13:23
It seems render is only used inside be ES6 class , Normal functional component doesn't need render function. Reference: https://reactjs.org/docs/components-and-props.html – Sushil Adhikari Apr 23 '18 at 13:36
yes. a functional component don't expose all the APIs or lifecycle utilities and function itself is treated as a render – Shubham Khatri Apr 23 '18 at 16:02

What is the role of the render() function inside react component?

1 Answers1

Linked