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:

-    <Avatar url={avatarUrl} />
+    {Avatar({ url: avatarUrl })}

 // Compiled JavaScript
-  React.createElement(Avatar, { url: avatarUrl }),
+  Avatar({ url: avatarUrl }),
 ), 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.