Question Re: 45% Faster React Functional Components, Now


(Joe) #1

Read a very interesting post on a very simple hack that dramatically (according to the post) improved render performance of a dirt-simple component. Post states the hack improved performance by ~45%.

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. Like this:

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

 // Compiled JavaScript
 ReactDOM.render(React.createElement(
   'div',
   null,
-  React.createElement(Avatar, { url: avatarUrl }),
+  Avatar({ url: avatarUrl }),
   React.createElement(
     'div',
     null,
     commentBody
   )
 ), mountNode);

Any thoughts on this?


(peterm) #2

If you’re already using babel-react-optimize, you’ve already been getting this performance benefit since it includes transform-react-inline-elements.

It’s probably better to stick with the transform than it is to edit your source code to the more performant syntax.


(Develerltd) #3

Does this work with “key”, as I tried to use this before, but it didn’t seem to work with the key prop?


(Troy Rhinehart) #4

Ensure your stateless function doesn’t have a dependency of context before going this route, otherwise it would not work. Also, IMO if it’s a big win I’m sure React will eventually adopt such a pattern or have a reason they have not done so already.