45% Faster React Stateless (Functional) Components

When using Stateless Components throughout your React app, the lifecycle events (componentWillMount, componentDidMount, etc.) are still executed. Developer Philippe Lehoux found a way to bypass these, resulting in a 45% speed improvement:

What if we could skip React internals for these components? Instead of mounting them as components, let’s just call them as what they really are: plain JavaScript functions. In other words, we just need to change our Avatar JSX tags to braces and call the function directly.

The Stateless Component:

const Avatar = (props) => {
  return <img src={props.url} />;
}

Before:

ReactDOM.render(
   <div>
     <Avatar url={avatarUrl} />
     <div>{commentBody}</div>
   </div>,
   mountNode
 );

After:

ReactDOM.render(
   <div>
    {Avatar({ url: avatarUrl })}
     <div>{commentBody}</div>
   </div>,
   mountNode
 );

Using the Babel transform-react-inline-elements plugin, these replacements can be automated at build time.

45% Faster React Functional Components, Now →
Babel Plugin transform-react-inline-elements →