Although React provides many optimisations for your code out of the box, it is important to nonetheless properly evaluate and optimise the performance of your React app.

I've found these tools to be most helpful during the development process to help optimise an application.

1. Lighthouse

Right click on a page and click Inspect to open developer tools, click on the >> and you will find Lighthouse if it doesn't already show in the tab.

Lighthouse will generate a report of that website by assessing in Performance, Accessibility, Best Practices and SEO.

2. Profiler

Prior to using Profiler you must have installed React Developer Tools from the Chrome web store as it is a dev tools extension.

Once you have that installed you should be able to see Profiler in your developer tools. Close and reopen your browser if you don't see it.

To get started, hit the record icon and make some changes on the page and hit the record icon again to stop.

The Profiler will give you a break down of all Components rendered on the page and how long each one is taking to render.

3. Webpack Bundle Analyzer

Webpack Bundle Analyzer is a tool that generates an interactive treemap visualisation of the contents of your bundle.

You will be able to identify dependencies that take up a significant amount of storage. In the example above, the entire lodash library was imported for a project. To reduce the bundle size we can introduce tree shaking on the lodash package. Essentially, only installing the functions that we need.

Before:

import _ from "lodash";

const object = { 'a': 1, 'b': '2', 'c': 3 };
const omittedObj = _.omit(object, ['a', 'c']);

return omittedObj;

After:

import omit from "lodash/omit";

const object = { 'a': 1, 'b': '2', 'c': 3 };
const omittedObj = omit(object, ['a', 'c']);

return omittedObj;

Thank you for reading! I hope that you will incorporate these technologies and practices into your projects as it will definitely help you write sustainable and reliable code!