React Functional component: calling as function vs. as component

Question

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.

Related blog posts: Don't call a React function component -- Kent C. Dodds and React: Calling functional components as functions -- Igor Bykov. — user202729
– user202729, Commented Apr 20, 2024 at 0:04

General Grievance · Accepted Answer · 2020-07-22 05:15:32Z

18

If you call functional component directly, you are calling a custom hook actually.

example:

function A() {
  const [state] = useState([])
  return (
    <div>{state}</div>
  )
}

A()
<A />

If you call A(), the state mounts in parent fiber, but if you use <A />, React will call createElement to create a new fiber on which to mount state.

edited Jul 22, 2020 at 5:15

General Grievance

5,12039 gold badges39 silver badges60 bronze badges

answered Jul 22, 2020 at 2:29

Liuyl

2714 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vsync Over a year ago

Please, if possible, add reference link to this behavior so we could dive-in

vittore · Accepted Answer · 2017-10-26 23:42:46Z

11

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

edited Oct 26, 2017 at 23:42

answered Oct 26, 2017 at 23:31

vittore

17.6k6 gold badges46 silver badges84 bronze badges

6 Comments

dmwong2268 Over a year ago

Can you summarize why it is faster to call it as a function? Also, if there is no downside, then why isn't it the standard to do it this way? It seems like most documentation out there points you towards calling functional components as components.

dmwong2268 Over a year ago

Ah.. That article is actually what led me to ask this question XD. Also hence the part about React Fiber - There is a comment in that article that implies that optimizations have been made to functional components to make them faster. I wonder how that impacts the results.

vittore Over a year ago

Right way to approach it is to measure. But in general you can hardly do any faster than no code.

ParthianShotgun Over a year ago

is this still the case in newer versions of react?

Tiago Alves Over a year ago

It can behave weirdly if you are using hooks. See kentcdodds.com/blog/dont-call-a-react-function-component

|

dmwong2268 · Accepted Answer · 2017-11-05 08:14:08Z

So I actually ran into a use case where it is beneficial to render as a component rather than a function call. With React 16, you get the error boundaries feature. This allows you to render fallback error UIs when an error is thrown within the component. Turns out, if an exception is thrown in the function call variation, it won't trigger componentDidCatch. It needs to be thrown within a child component.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      error: false
    };
  }

  componentDidCatch() {
    this.setState({ error: true});
  }

  render() {
    return this.state.error
      ? "Error :("
      : this.props.children;
  }
}

const renderContent = () => {
  throw new Error();
}

const Content = () => {
  throw new Error();
}

// This will throw exception and not trigger error state
const Foo = () => (
  <ErrorBoundary>
    <div>{renderContent()}</div>
  </ErrorBoundary>
);

// This will trigger the error state
const Bar = () => (
  <ErrorBoundary>
    <div><Content /></div>
  </ErrorBoundary>
);

Of course, you could have an error boundary higher up, but just pointing out one specific use case where you may choose one of the other.

Also, it's nice to render as component for naming purposes. It will show up named in React dev tools, and also you can use the name as selectors when you do Enzyme testing.

Idriss AIT HAFID · Accepted Answer · 2020-06-09 15:33:03Z

7

Actually, when you call it as a component a new element is created with React.createElement(). On the other hand, the function is called directly. So, that explains a little bit why calling your function directly is faster.

But keep in mind, that in some cases calling a function directly may cause problems like the one introduced by @dmwong2268 here, or like this one

answered Jun 9, 2020 at 15:33

Idriss AIT HAFID

3212 silver badges7 bronze badges

Collectives™ on Stack Overflow

React Functional component: calling as function vs. as component

4 Answers 4

1 Comment

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related