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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With