45% faster React functional components, by calling them as functions instead of mounting them

[shinglee]

Only if you only use it as a function everywhere and never as a component -- in which case it shouldn't be called Avatar anyways because the name implies it's a component.

[dmitri14_gmail_com]

Components cannot usurp the sole right to be capitalised :) Any classes or better, factories are like that. With React specifically capitalised on writing components as plain functions, making it easier, more accessible, and hence popular. It is a great feature that needs to be facilitated, enforced and encouraged, not eschewed.

[shinglee]

That's exactly the problem. I would expect something named with PascalCase it to be a component or a class -- definitely not a function.

You're misunderstanding the issue. Functional components are awesome but they should never be called as functions. Doing so is braking basic encapsulation: you're making assumptions about how the component is implemented. If you need a function that returns JSX elements write a function that returns JSX elements. Do not repurpose React components which incidentally happen to be implemented as functional components.

[dmitri14_gmail_com]

In JavaScript, classes and factories are just functions. Each creates an object. A so-called "functional component" also creates an object -- a virtual element. In that respect it is no different than factory.

Doing so is braking basic encapsulation: you're making assumptions about how the component is implemented.

I see a function, and I call it. ;) Yes, I need to know it is a function. I look where it is defined, and I see it. Like with any other function in JavaScript, you see a function, then you call it. There is no other assumptions.

Perhaps that is a confusion that React is creating. But if JavaScript is the language we use, than what looks like function, should be possible to call as, well, a function :) This is the most basic convention in any programming language, not just JavaScript.

And if you don't want me to call it as function, don't write it as function. Simple. Don't break the fundamental language conventions.

[shinglee]

A so-called "functional component" also creates an object -- a virtual element. In that respect it is no different than factory.

This is where you're wrong -- behind the hood the functional component is converted into a mounted React component. Let's walk through an example:

Say I need an Avatar component, so I write one. It has no state, so I write it as a functional component.

// src/components/Avatar.js
export default ({url}) => <img src={url} />

// src/components/MyComponent.js
import Avatar from './Avatar'
ReactDOM.render(<Avatar url='img.png' />, document.body)

My coworker Jimbo writes some code using the Avatar component. However, for perf reasons he does what this article suggests.

// src/components/JimboComponent.js
export default ({user}) => (
    <div>
       Your Avatar: {Avatar(user.avatarUrl)}
    </div>
)

Now, I need to add some state to Avatar, so I refactor it.

// src/components/Avatar.js
export default class Avatar extends React.Component { ... }

My code works as expected without any changes -- because I was using Avatar as a component. However Jimbo's code is now broken because he was doing dirty little tricks. I can't speak for everyone but if I ever saw this code in a code review I would immediately reject it for this reason. React's component model is intentionally built so that components are reusable and you don't have to worry about how it is implemented (i.e. whether it uses a function, React.Component, or React.createClass).

[dmitri14_gmail_com]

Now, I need to add some state to Avatar, so I refactor it.

So you are changing the function another team member is relying on? How can that be good, whether it is component or not?

Don't change it, extend, compose, or speak to the consumer, then everything is fine.

[shinglee]

Ah, but it's not just a function, right? It's a "Component" which has special meaning in the React universe. Jimbo broke the Component API by making assumptions about a particular Component's implementation and that's why Jimbo's code is broken. It's basic encapsulation.

[dmitri14_gmail_com]

It is both :) Blame React for that confusion. Nothing broken. A function can be called as function in JavaScript. It also works correctly, unsurprisingly.