Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React JSX vs function call to present component

Tags:

reactjs

jsx

const Component = ({ text }) => (
  <div>{text}</div>
)

const Example = () => (
  <div>
    <Component text="123" />
    {Component({ text: "123" })}
  </div>
)

Is there any difference between the two methods of rendering? Which is preferred and why?

like image 889
Avery235 Avatar asked Nov 14 '17 14:11

Avery235


1 Answers

Yes, the second is faster because it's not mounted with React.createElement. See this great article by Philippe Lehoux that talks about the differences (mainly in performance) between both approaches.

Edit: This approach may lead to unexpected behaviors (mainly if you are using hooks) and I recommend that you don't call function components but render them instead. For more details see Don't call a React function component by Kent C. Dodds.

like image 171
Tiago Alves Avatar answered Sep 18 '22 21:09

Tiago Alves