Considering the following three places of defining a functional ponent in React -

1. Inside a class (outside the render method)
2. Inside a class (inside the render method)
3. Outside the class

In the sample code below, funcComponent1, funcComponent2 and funcComponent3 are defined in the three different locations. How do I consider when to define a functional ponent in any of these 3 places?

import React, { Component } from 'react';


const FuncComponent1 = (props) => {
  return (
    <p>{props.name}</p>
  )
}

class TestComponent extends Component {

  constructor(props){
    super(props);
    this.state = {
      name: "JavaScript"
    }
  }


  FuncComponent2 = (text) => {
    return (
      <p>{text}, {this.state.name}</p>
    )
  }


  render(){

    const FuncComponent3 = (props) => {
      return (
        <p>{props.text}, {this.state.name}</p>
      )
    }

    return (
      <div>
        <FuncComponent1 name={'Abrar'} text={'Hello World'}/>
        <FuncComponent3 text={"HEllo World"}/>
      </div>
    )
  }

}

export default TestComponent;

Considering the following three places of defining a functional ponent in React -

1. Inside a class (outside the render method)
2. Inside a class (inside the render method)
3. Outside the class

In the sample code below, funcComponent1, funcComponent2 and funcComponent3 are defined in the three different locations. How do I consider when to define a functional ponent in any of these 3 places?

import React, { Component } from 'react';


const FuncComponent1 = (props) => {
  return (
    <p>{props.name}</p>
  )
}

class TestComponent extends Component {

  constructor(props){
    super(props);
    this.state = {
      name: "JavaScript"
    }
  }


  FuncComponent2 = (text) => {
    return (
      <p>{text}, {this.state.name}</p>
    )
  }


  render(){

    const FuncComponent3 = (props) => {
      return (
        <p>{props.text}, {this.state.name}</p>
      )
    }

    return (
      <div>
        <FuncComponent1 name={'Abrar'} text={'Hello World'}/>
        <FuncComponent3 text={"HEllo World"}/>
      </div>
    )
  }

}

export default TestComponent;

• javascript
• reactjs
• react-ponent

Share Improve this question Follow edited Nov 21, 2018 at 8:49 Abrar asked Nov 21, 2018 at 8:33 AbrarAbrar 7,23299 gold badges3131 silver badges4545 bronze badges 3

• 1 Why are you not using the functional ponent like a regular ponent? Consider using jsx, not a function call. – evolutionxbox Commented Nov 21, 2018 at 8:35
• @evolutionxbox Updated with JSX ponents but I could not make the FuncComponent2 work inside render(). – Abrar Commented Nov 21, 2018 at 8:50
• Also there’s no need to wrap string props in curly braces. – evolutionxbox Commented Nov 21, 2018 at 10:44

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You must avoid using functional ponent inside of render since they will be recreated on every render.

As far as using functions that return JSX inside Class ponent but outside render` is considered, you can do that when you want to make use of the state or props of the class in order to render JSX content but that which is very specific to the particular class

A functional ponent outside of React ponent is most advantageous when the same ponent can be used at multiple places and hence it makes sense to pass props to it and render it.