Arrow functions in React

https://unsplash.com/photos/pKeF6Tt3c08

This topic is already well discussed and the intent of this article is to share how I prefer to use arrow functions in React and my view on PureComponent optimizations.

Function Components

You need to be aware of 2 things in this example:

  1. You generate a function on every render, which will obviously have a new reference.
  2. If the component you pass this generated function to is extending PureComponent, it will not be able to bail out on rerendering, even if the actual data has not changed.

Using inline arrow functions in function components is a good way to achieve some decoupling.

Class-Based Components

Optimizing rendering

It is hard to get the benefits of PureComponent because it is hard to make sure that you don’t create new references by accident. If you really need to optimize a subtree, pick your component wisely and really make sure it never creates new references in the render method. Never forget that PureComponent is an optimization and without it React is still fast enough for 99% of cases.

Avoid generating new references in render method if you really need the PureComponent optimization to work.

Arrow functions in class properties

Arrow functions in class properties are way easier to write and to read than a method with a bind call inside of a constructor.

Arrow functions in class properties performance

Arrow function as class property on the left. Transpiled code by babel on the right.

There is still a hope, that arrow functions in class properties will get into the standard and native implementation will be very fast.

Arrow functions in class properties override

Never subclass a React component, unless it is the official React.Component base class.

To sum up, I mostly use function components and I use inline arrow functions. I rarely use class based components, but when I do then for 3 reasons:

  1. To use lifecycle hooks.
  2. To reuse child props references.
  3. To use PureComponent.

I keep them really small and focused on what I can do in a class-based component only. I move everything else to function components.

Eng. @webflow, React, CSSinJS and co. Creator of http://cssinjs.org. Stealing ideas is great. Semantics is just meaning. Twitter: https://twitter.com/oleg008

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store