React JSX vs function call to present component

user_6599478 0
Viewed 2208
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?

jsx reactjs
1 Answers

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

However 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.

user_89030470
Related