Question

52

React Functional component: calling as function vs. as component

rated 0 times [ 58] [ 6] / answers: 1 / hits: 21973 / 7 Years ago, thu, october 26, 2017, 12:00:00

Say I have a functional component:

const Foo = (props) => ( <div>{props.name}</div> );

What is the difference between calling it directly as a function:

const fooParent = () => (

    <div> {Foo({ name: foo })} </div>

)

versus calling it as a component:

const fooParent = () => (

    <div> <Foo name=foo/> </div>

)

I'm mostly interested in performance implications, how React treats them differently internally, and perhaps how things might be different in React Fiber, where I hear functional components got a performance boost.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rickjordond

Add To Favorites

Follow

Total Points: 100

Total Questions: 105

Total Answers: 90

Location: Sweden

Member since Mon, May 8, 2023

1 Year ago

answered 7 Years ago kristinsonjab · Accepted Answer

Calling it as a function is much faster, in fact there was a talk exactly about this few months ago. At this point functional react components can't be PureComponents so no extra optimizations really applied to them.

Basically if you can call functional component as a function that eliminates whole react lifecycle. If you think about it you are probably using this technique inside your render method even right now. Consider this:

... some component ... 



render() {



  const tabHeaders =<TabHeaders>{this.props.tabs.map(this.renderTabHeader)}</TabHeader>;

  const tabContents = <TabContents>{this.props.tabs.map(this.renderTabContent)}</TabContents>;



  return (<div>

    {this.props.tabsBelow?[tabContents, tabHeaders] : [tabHeaders, tabContents]}

  </div>);

}

renderTabHeader method returns some react components, and could've been functional components but in this case is just some component class method.

See this article for detailed explanation: https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f

Also check out this babel plugin that is doing that: https://babeljs.io/docs/plugins/transform-react-inline-elements