When using React, what is the difference (and when should each method be applied) when rendering a ponent?

Does this impact the ponent lifecycle in any way? Or impact how hooks are run in the ponent?

Method 1:

class App extends React.Component {
  ...
  function getComponent() {
    return <Component />
  }
  render() {
   return this.getComponent()
  }
}

Method 2:

class App extends React.Component {
  ...
  render() {
   return <Component />
  }
}

When using React, what is the difference (and when should each method be applied) when rendering a ponent?

Does this impact the ponent lifecycle in any way? Or impact how hooks are run in the ponent?

Method 1:

class App extends React.Component {
  ...
  function getComponent() {
    return <Component />
  }
  render() {
   return this.getComponent()
  }
}

Method 2:

class App extends React.Component {
  ...
  render() {
   return <Component />
  }
}

• javascript
• reactjs

• 1 method 1 was invalid. inside the class direct function initialise not working – prasanth Commented Feb 8, 2020 at 12:21
• @xadm - What's not invalid? You may have been seeing an edit. prasanth was correct that "Method 1" was invalid prior to the edit. – T.J. Crowder Commented Feb 8, 2020 at 15:17

3 Answers 3

(Note: The OP has now changed the question, it used to have return {this.getComponent()} in Method 1.)

render in Method 1 is incorrect (well, it was before the edit), it should be:

render() {
  return this.getComponent() // No {} wrapper
}

You need the {} within a JSX context, but you're not in a JSX context there. For instance, if you wanted to wrap what this.getComponent returned in a div, you'd use the JSX expression to define the div's children within the JSX defining the div:

render() {
  return <div>{this.getComponent()}</div>
}

With the {} sorted out, whether you use Method 1 or Method 2 is up to you. If you have substantial parts of the render that you want to move into their own functions, that's fine. For instance:

render() {
    return (
        <div>
            {this.getHeader()}
            {this.getBody()}
            {this.getFooter()}
        </div>
    );
}

...although I think I'd probably argue at that point that without a good counter-argument, the header, body, and footer should probably be ponents (perhaps function ponents). But the occasional helper function call like that is fine.

Does this impact the ponent lifecycle in anyway?

No. It's just a function call within render.

There is no real difference between both. I'd personally use only one render() method as much as possible, then when the method gets too big, extract parts of it into their own method.

I have found this great article by Kent C. Dodds. An extract of the article is:

React doesn't know the difference between us calling a function in our JSX and inlining it. So it cannot associate anything to the Counter function, because it's not being rendered like a ponent.

This is why you need to use JSX (or React.createElement) when rendering ponents rather than simply calling the function. That way, any hooks that are used can be registered with the instance of the ponent that React creates.

With this in mind, it sounds like it's better to use JSX when rendering a ponent that uses hooks.