There are also a couple of interesting Babel plugins that we can install and use to improve the performance of our React applications. They make the applications faster, optimizing parts of the code at build-time.

The first one is the React constant elements transformer that finds all the static elements that do not change depending on the props and extracts them from the render method (or the functional stateless components) to avoid calling createElement unnecessarily.

Using a Babel plugin is pretty straightforward. We first install it with npm:

  npm install --save-dev babel-plugin-transform-react-constant-elements

You need to create the .babelrc file and add a plugins key with an array that has the value with the list of the plugin that we want to activate:

  { 
    "plugins": ["transform-react-constant-elements"] 
  }

The second Babel plugin we can choose to use to improve performance is the React inline elements transform, which replaces all the JSX declarations (or the createElement calls) with a more optimized version of them to make execution faster.

Install the plugin with:

  npm install --save-dev babel-plugin-transform-react-inline-elements

Next, you can easily add the plugin to the array of plugins in the .babelrc file, as follows:

  { 
    "plugins": ["transform-react-inline-elements"] 
  }

Both plugins should be used only in production because they make debugging harder in development mode.