5 Packages to Optimize and Speed Up Your React App During Development
Tags: react, javascript, webdev, beginners
Published: 2021-07-21 15:46:46

Optimize your React App during the development stage using these packages and avoid issues during production.

We keep on building apps without considering side effects due to time constraints and other factors. But sometimes, an app will cause major issues in live scenarios. Then we might need to update our app, and sometimes we might need to reconstruct some modules or make some architectural level changes to solve the issue.

Instead of handling such cases in production, we can avoid giving rise to such issues during development itself. So I have listed some packages that will help you find such issues during development. Let’s dive into these.

## 1. Why Did You Render (6.6K ⭐️)

[Why-did-you-render](https://github.com/welldone-software/why-did-you-render) is a React package that allows you to find potentially avoidable re-renders. Most of the performance issues will arise from unwanted re-renders. If a big list component re-renders multiple times, It will make the app unresponsive.

To avoid these issues, we will use `pureComponents` or `useMemo` but in some cases, those also re-render due to misuse of state updates. We can avoid these using the **why-did-you-render package.** It will notify when and why the component re-rendered!

**Note: For development use only!**

Check the below image for how the warning message is consoled.

![warning log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/seqtznmpzw4w3i6v4a7g.png)

## 2. Source Map Explorer (3.3K ⭐️)

[Source Map Explorer](https://github.com/danvk/source-map-explorer) gives a view of the build with each file size that occupies the build. It allows knowing which dependency occupies a larger file size in the bundle. We could optimize the file based on the view.

**Why this important?** As your app features grow, the build size also increases. A large build size will take more time to build. We need to keep the build size small as much as we can. Using Source Map Explorer, we can analyze the build and optimize it. It also supports Sass and LESS files.

**Note: For development use only!**

Check the below image. You can see the file size, occupied percentage. Also, we can have a detailed view of each file.

![source map image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ssiysx6n2zhddilptb2r.png)

## 3. Redux Immutable State Invariant (800+⭐️)

[Redux Immutable State Invariant](https://github.com/leoasis/redux-immutable-state-invariant) is a Redux middleware. It detects mutations between and outside Redux dispatches. If you are using Redux for state management, you **should not mutate the state** in the reducer or outside. As **reducer** always returns a **new state object**.

Mutating the state will lead to several issues in your app. To avoid this, we can use Redux Immutable State Invariant middleware. This package will throw an error if the state is mutated. So we can fix these issues in the development stage itself.

**Note: For development use only!**

## 4. Bundle Size (4.2K ⭐️)

[Bundle Size](https://github.com/siddharthkp/bundlesize) allows keeping your bundle size in check. We can configure each file size in the config file. So we will get a warning If the size exceeds. It ensures the bundle size is in control.

Check the below bundle size config used by [bootstrap](https://github.com/twbs/bootstrap/blob/main/.bundlewatch.config.json).

{% gist
https://gist.github.com/Nilanth/4b7034da0c047cddfa29d6b0bb3c0132
%}

You can also add it to your GitHub to check on every pull request. Check the below image.

![github merge check](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjpltpmr3itykypgf5nk.png)

## 5. Immer ( 20.7K ⭐️ )

Mutating a state will lead to more issues. To avoid this, we need to manually clone every state object and mutate it. 
Instead of a manual clone, We can use Immer, which will handle it in a more efficient and optimized way. [Immer](https://github.com/immerjs/immer) allows mutating states more conveniently. You can also use Immer to mutate states in [Redux](https://redux.js.org).

Check the below code for Immer usage with Redux.

{% gist 
https://gist.github.com/Nilanth/712cb51deafdbe9d1683a8bb10cabed0
%}

## Resources

[Why-did-you-render](https://github.com/welldone-software/why-did-you-render)

[Source Map Explorer](https://github.com/danvk/source-map-explorer)

[Redux Immutable State Invariant](https://github.com/leoasis/redux-immutable-state-invariant)

[Bundle Size](https://github.com/siddharthkp/bundlesize)

[Immer](https://github.com/immerjs/immer)

## Conclusion

We can also use react-devtools and redux-devtools for optimizing the app. I hope you have found this useful. Thank you for reading.

Get more updates on [Twitter](https://twitter.com/Nilanth).

**You can support me [by buying me a coffee](https://buymeacoffee.com/nilanth) ☕**

## eBook

[ReactJS Optimization Techniques and Development Resources](https://nilanth.gumroad.com/l/NYkdN)

## More Blogs

1. [Redux Toolkit - The Standard Way to Write Redux](https://dev.to/nilanth/redux-toolkit-the-standard-way-to-write-redux-2g32)
2. [How To Use Axios in an Optimized and Scalable Way With React](https://dev.to/nilanth/how-to-use-axios-in-an-optimized-and-scalable-way-with-react-518n)
3. [15 Custom Hooks to Make your React Component Lightweight](https://dev.to/nilanth/15-custom-hooks-to-make-your-react-component-lightweight-17cd)
4. [10 Ways to Host Your React App For Free](https://dev.to/nilanth/10-ways-to-host-your-react-app-for-free-27ga)
5. [How to Secure JWT in a Single-Page Application](https://dev.to/nilanth/how-to-secure-jwt-in-a-single-page-application-cko)
6. [React 18 Alpha: A Quick Overview](https://dev.to/nilanth/react-18-alpha-a-quick-overview-349n)
7. [Redux Auth Starter: A Zero Config CRA Template](https://dev.to/nilanth/redux-auth-starter-a-zero-config-cra-template-9c0)