# Optimizing Performance

> Internally, React uses several clever techniques to minimize the number of
costly DOM operations required to update the UI.

> For many applications, using React will lead to a fast user interface without
doing much work to specifically optimize for performance.

> Nevertheless, there are several ways you can speed up your React application.

# Use the Production Build

> If your project is built with Create React App, run:

> npm run build

# Single-File Builds

<script
src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-
dom.production.min.js"></script>

# Brunch

> For the most efficient Brunch production build, install the terser-brunch
plugin:

> npm install --save-dev terser-brunch

> brunch build -p

# Browserify

> For the most efficient Browserify production build, install a few
plugins:

> npm install --save-dev envify terser uglifyify

> The envify transform ensures the right build environment is set. Make it
global (-g).

> The uglifyify transform removes development imports. Make it global too
(-g).

> Finally, the resulting bundle is piped to terser for mangling (read why).

browserify ./index.js \
-g [ envify --NODE_ENV production ] \
-g uglifyify \
| terser --compress --mangle > ./bundle.js

# Rollup
 > For the most efficient Rollup production build, install a few plugins:

> npm install --save-dev rollup-plugin-commonjs rollup-plugin-replace

> The replace plugin ensures the right build environment is set.

> The commonjs plugin provides support for CommonJS in Rollup.

> The terser plugin compresses and mangles the final bundle

plugins: [
// ...
require('rollup-plugin-replace')({
'process.env.NODE_ENV': JSON.stringify('production')
}),
require('rollup-plugin-commonjs')(),
require('rollup-plugin-terser')(),
// ...
]

# WebPack

> Webpack v4+ will minify your code by default in production mode.

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
mode: 'production',
optimization: {
minimizer: [new TerserPlugin({ /* additional options here */ })],
},
};

# Profiling Components with the DevTools Profiler

> react-dom 16.5+ and react-native 0.57+ provide enhanced profiling

>

# Virtualize Long Lists

> If your application renders long lists of data (hundreds or thousands of

> This technique only renders a small subset of your rows at any given
time,
and can dramatically reduce the time it takes to re-render the components
as well as the number of DOM nodes created.

# Avoid Reconciliation

> React builds and maintains an internal representation of the rendered UI.
It includes the React elements you return from your components.
This representation lets React avoid creating DOM nodes and accessing
existing ones beyond necessity,
 as that can be slower than operations on JavaScript objects. Sometimes it
is referred to as a “virtual DOM”,

> When a component’s props or state change, React decides whether an actual
DOM update is necessary by
comparing the newly returned element with the previously rendered one.
When they are not equal, React will update the DOM.

> Even though React only updates the changed DOM nodes, re-rendering still
takes some time.
In many cases it’s not a problem, but if the slowdown is noticeable,
you can speed all of this up by overriding the lifecycle function
shouldComponentUpdate,
which is triggered before the re-rendering process starts.
The default implementation of this function returns true, leaving React
to perform the update:

shouldComponentUpdate(nextProps, nextState) {
return true;
}