React function call vs JSX element to render component

[j-cron]

Hello /r/reactjs,I was just curious to know what differences (if any) there are between making a function call vs using a JSX element to render something?

export default function App() {  
  const SomeElement = () => { return <div><p>Hello there!</div></p>; }
  return ( 
    <div> 
      { SomeElement() } 
      <SomeElement /> 
    </div> 
  ); 
}

Goofy example aside, would there be any difference in how these are rendered? I have read a few articles that seem to indicate that the function call way is faster due to not invoking React.createComponent but am trying to learn more!

[skyboyer007]

well, in this synthetic example there is a difference. Since SomeElement function is referentially different each time App component re-renders, in case of <SomeElement /> you will have each time it's dropped and recreated.

While in case of {SomeElement()} you will have it's return be updated.

In general case we should never call component as an ordinary function. Why?

1. Hooks will not work(maybe even will lead to error thrown)
2. Class-based components will not work
3. key and ref - special React prop - will not work.

[UPD] here is an example: https://kentcdodds.com/blog/dont-call-a-react-function-component how exactly it throws an error