React JSX vs function call to present component

Question

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?

Both will end up as `React.createElement("div", null, text );` calls :) I would use the JSX notation, as it makes it obvious that a Component will be rendered. — pawel, Nov 14 '17 at 14:41

score 13 · Accepted Answer · edited Jun 20 '22 at 09:13

13

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.

edited Jun 20 '22 at 09:13

jonrsharpe

115,751
26
228
437

answered Nov 14 '17 at 14:39

Tiago Alves

2,290
13
32

in the second case, react would not handle the lifecycle of the component as much as I understand – gaurav5430 Apr 20 '21 at 17:17
2

https://kentcdodds.com/blog/dont-call-a-react-function-component – gaurav5430 Apr 20 '21 at 17:20
As @gaurav5430 pointed out with Kent's article, calling react components can lead to unexpected behaviors. Edited my answer to make it clear. – Tiago Alves Jun 09 '21 at 16:04

React JSX vs function call to present component

1 Answers1

Linked