React Component vs function, what should I use and why?

Question

Having those two examples in React in file user.js where User is the exported component

const displayText = (firstName, lastName) => (
  <div>{firstName} {lastName}</div>
)

const User = ({ user }) => (
  <div>
     You are logged in as 
     {displayText(user.firstName, user.lastName)}
  </div>
)

or

const DisplayText = ({ firstName, lastName }) => (
  <div>{firstName} {lastName}</div>
)

const User = ({ user }) => (
  <div>
     You are logged in as 
     <DisplayText firstName={user.firstName} lastName={user.lastName} />
  </div>
)

Which is better, faster or more recommended?

Later edit: I added another example I see often and I cannot tell people why is wrong other than it looks a bit ugly

const User = ({ user }) => {
   const DisplayText = ({ firstName, lastName }) => (
     <div>{firstName} {lastName}</div>
   )

  return (
    <div>
     You are logged in as 
     <DisplayText firstName={user.firstName} lastName={user.lastName} />
    </div>
  )
)

Does this answer your question? [React functional components vs classical components](https://stackoverflow.com/questions/38926574/react-functional-components-vs-classical-components) — Majid M., Aug 29 '21 at 11:21
Does this answer your question? [When to use ES6 class based React components vs. functional ES6 React components?](https://stackoverflow.com/questions/36097965/when-to-use-es6-class-based-react-components-vs-functional-es6-react-components) — Ryan Le, Aug 29 '21 at 11:21
I don't think there is any difference in terms of performance. This just depends on how one want to call his component . In terms of syntax both are valid . — Shyam, Aug 29 '21 at 11:23
@MajidM. Ryan Lee Thanks for answers. There is no doubt when you introduce state, the only way is to use component.. but I wanted to find a reason why to not use the second approach, other than it looks ugly for me — Razvan Pavel, Aug 29 '21 at 11:32

score 1 · Accepted Answer · edited Sep 02 '21 at 20:50

When the React component compiled to React.createElement(component). While the function remains the same. I didn't feel find any performance issues using either of them (YET).

Some of the advantages of using the function itself is, that you can use the functional programming techniques like currying. Also, not naming the parameters while passing it in the function.

The only small downside of functions is, if you have more than 5 parameters, the order matters, and if you have to call the function somewhere, where only the 5th param needs to be passed, you have to pass the default params for the first four.

You might find this helpful as well. React functional component vs. plain-old JS function that returns React element

Thanks! Also there is this example I see often const User = ({ user }) => { const displayText = (firstName, lastName) => (
{firstName} {lastName}
) return (
You are logged in as {displayText(user.firstName, user.lastName)}
) } — Razvan Pavel, Aug 29 '21 at 11:34

React Component vs function, what should I use and why?

1 Answers1