Page 1 of 41

Page 2 of 41

ReactJS
Optimization
Techniques and
Development
Resources

eBook by Nilanth
Page 3 of 41

Packages to Optimize and Speed Up

During Development

1. Why Did You Render (6.6K ⭐)

Why-did-you-render is a React package that allows

you to nd 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!

fi
 Page 4 of 41

2. Source Map Explorer (3.3K ⭐

Source Map Explorer gives a view of the build with

each le size that occupies the build. It allows
knowing which dependency occupies a larger le size
in the bundle. We could optimize the le 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
les

Note: For development use only

fi
.

fi
 

fi
)

fi
Page 5 of 41

Check the below image. You can see the le size,

occupied percentage. Also, we can have a detailed
view of each le.

fi
fi
Page 6 of 41

3. Redux Immutable State Invariant (800+⭐

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 x these issues in the
development stage itself

Note: For development use only

.

fi
.

Page 7 of 41

4. Bundle Size (4.2K ⭐

Bundle Size allows keeping your bundle size in check.

We can con gure each le size in the con g le. So
we will get a warning If the size exceeds. It ensures
the bundle size is in control

Check the below bundle size con g used

by bootstrap
fi
.

fi
)

fi
fi
fi
Page 8 of 41

You can also add it to your GitHub to check on every

pull request. Check the below image

Page 9 of 41

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 ef cient and optimized
way. Immer allows mutating states more conveniently.
You can also use Immer to mutate states in Redux

Check the below code for Immer usage with Redux.


.

fi
.

Page 10 of 41

Custom Hooks to Make Your

Development Easier
Here we will see 15 react-use package custom hooks
that make our development easier

1.useIdle

The useIdle hook tracks if the user on the page is idle.

You can pass two params — one is time to consider
idle and initialState, which allows the setting user is
idle initially
.

Page 11 of 41

2. useInterval
This hook to use for interval-related functionalities.
Which handles clearInterval on component unmount
automatically. It also allows pausing the interval by
setting the delay to null



.

Page 12 of 41

3. useScrol

This hook is used to listen to the scroll event of the

element and rerenders on scrolling. No required to
add the JavaScript event listeners manually.

l

 Page 13 of 41

4. useToggl

This hook is used to toggle between two states like

TRUE, FALSE. This approach reduces the manual
logic



.

Page 14 of 41

5. useTitl

This hook is used to set the page title.


e

 Page 15 of 41

6. usePreviou

This hook is used to get the previous state. We might

not require to write custom logic to get the previous
state
.

Page 16 of 41

7. useSetStat

This hook is used to merge objects into their current

state, similar to the this.setState in the class component.
If you are using multiple states, it can be brought
down to a single object state using useSetStat
e

Page 17 of 41

8. useCooki

This hook is used to return the current value of a

cookie, a callback to update the cookie and a callback
to delete the cookie.

e

Page 18 of 41

9. usePermissio

This hook is used to get the permission status of the

browser API. Pass the API name to get the permission
status.




n

Page 19 of 41

10. useDebounc

This hook is used to delay the event until the wait time
is completed. In the blew code the setState is
performed after the wait time is completed.

e

Page 20 of 41

11. useGeolocatio

This hook is used to get the user geolocation.

useGeolocation returns latitude, longitude, altitude,
and more info.

n

Page 21 of 41

12. useNetworkStat

This hook is used to get the network status of the

browser. useNetworkState can be used the show the
connection status to the user
e

Page 22 of 41

13. useCopyToClipboar

useCopyToClipboard hook is used to copy the text to

the clipboard



14. useFavico

The useFavicon hook is used to set the favicon of the

page.

.

Page 23 of 41

15. useErro

useError hook is used to dispatch errors



r

Page 24 of 41

Free Hosting Service

1. Netlify

Netlify is an all-in-one platform for automating modern

web projects. It provides continuous deployment using
GitHub, Bitbucket and Gitlab. React App can be
deployed in 3 steps.

It also provides a free automatic HTTPS. You can also

add a custom domain. With Netlify Edge, Your React
Apps are accessed to the client blazing fast

Other than deployment, Netlify also provides

serverless functions, Forms, Analytics, CLI, API and
more. Most of these features are provided for free with
some limitations
.

Page 25 of 41

2. Verce

Vercel creator of Next.js, A modern react Framework.

You can deploy React App with Zero con guration in
Vercel. It will boost the app performance with its global
edge network

Vercel provides a preview link for Pull Request in

Bitbucket, Github and GitLab to test the feature before
deploying

Vercel also provides some starter templates to create

a new App and deploy it. It Provides continuous
deployment, Serverless functions, HTTPS and more
l

fi
.

Page 26 of 41

3. AWS S3

Amazon Web Services is the world’s leading cloud

service provider. It provides almost every cloud
services, and some services are given only by AWS

S3 is also one of the AWS services. S3 Bucket is

known for storing static assets. The most common
use of S3 is to save images. It also provides static site
hosting

You just need to upload the React Build les to the

bucket. Once Upload is completed. You can access
the app using the bucket URL. You can also con gure
CloudFront to add a custom domain and HTTPS

AWS provides 12 months of free credits on the new

account. You can use that free credits for using S3
and also other AWS services
.

fi
fi
.

Page 27 of 41

4. AWS Amplif

Amazon Web Services also provides another service

called Amplify to host your React App. Amplify will
build and host your React App with global CDN

Amplify can be integrated with Git services to make

the continuous deployment. It also provides HTTPS,
Custom Domain, Monitoring, Password Protection,
Pull-Request previews and More

Amplify comes with 12 months free of cost. As it used

Amazon CloudFront CDN, the Deployed Apps are
faster and cached in nearby edge locations to serve
very quickly
.

Page 28 of 41

5. Microsoft Azure

Microsoft provides Azure Static Web Apps to host

your React App. The hosted app is served from
distributed points globally to provide better
performance

Azure provides Free HTTPS, Custom Domains,

Versioning, Git Integration and more

Azure has a free plan with these services. It provides

continuous deployment using Git integration
.

Page 29 of 41

6. GitHub Page

GitHub Pages is a service by GitHub, The largest and

most advanced development platform in the world

You can directly host your React app from the GitHub
repository. You just need to make your changes and
push to make your React App live

GitHub Pages provide Free HTTPS and Custom

Domain. You can con gure the GitHub pages with
some simple steps
s

fi
.

Page 30 of 41

7. Google Cloud Storag

Google Cloud provides Cloud Storage Bucket to host

static sites. All you need to create a bucket, upload
the code and make it public. Now your React App is
deployed

Cloud Storage Bucket does not provide HTTPS and

custom domain. You can con gure it with the HTTPS
Load Balancing service

Cloud Storage Bucket has a Free Tier plan with

monthly limits. Google also provides 300$ free credits
for new Account
.

fi
Page 31 of 41

8. Render

Render is a Cloud Service Provider, Provides services

for both Static and Dynamic Site. You can host your
React App with three simple steps

Render provides Free SSL, Global CDN, Custom

Domain, Auto Deploy with Git Integration

Render provides a Free Plan to Host Static Site and

Competitive Pricing for Other services too
.

 Page 32 of 41

9. Surg

Surge is a Static Website Hosting Platform. You can

deploy using the surge CLI

Surge doesn’t provide any Web Console to host the

Web Pages. You can host your React App from your
CLI

You can host it with a few steps using the surge CLI. It
provides Free SSL, Custom Domain Con guration.
Hosting in surge might require some CLI skills
.

fi
.

Page 33 of 41

10. Herok

Heroku is a container-based cloud Platform as a

Service. Heroku provides mostly all cloud services like
AWS. It has a Free Plan for most of the services

You can deploy your React App using Heroku

Buildpack for create-react-app. Using Heroku CLI, You
can deploy the React App with few commands.

The Buildpack is used for Automatic Deployment and

a built-in Bundler to make the deployment less
complicated

Heroku provide free SSL, Custom Domain and Git

Integration
.

Page 34 of 41

Additional Hosting Service

1. Firebas
2. CloudFlare Page
3. Gitlab Page
e

Page 35 of 41

UI Components Package

1. Ant Desig

Ant Design is an enterprise-class UI design language

and React UI library. Which is the most popular React
UI library based on GitHub Stars.

It has 100 plus components from typography to tables.

Ant Design document is very clean and has clear
examples.

Ant Design does not save only developer time, it

saves designers time also, As it includes Sketch and
Figma les for all components.

Ant Design component supports both JSX and

TypeScript. Customizing the ant theme is also very
simple.

Ant Components save a lot of time for developers in

handling forms and validation as it has prebuilt form
components. Ant Design also supports hooks

GitHub - 75.4K ⭐
fi

 Page 36 of 41

2. Material-U

Material-UI is also the most popular React UI library, It

is a simple and customizable component library to
build faster, beautiful, and more accessible React
applications.

Material-UI contains 100 plus components. It also

includes 1K plus icons.

Material UI also provides paid Sketch, Figma, Adobe

Xd les for designers. Material UI is also used by top
organizations like Spotify, NASA, Net ix, Amazon and
more. Material UI has well-prepared documentation
with code samples

GitHub - 72.7K ⭐
fi

fl
Page 37 of 41

3. Chakra U

Chakra UI provides a set of accessible, reusable, and

composable React components that make it super
easy to create websites and apps.

Chakra UI components follow the WAI-ARIA

guidelines speci cations and have the right aria-*
attributes. Chakra UI community is growing faster due
to its performance and experience.

Chakra UI has well-prepared documentation with code

samples

GitHub - 21.7K ⭐



.

fi

Page 38 of 41

4. React Bootstra

React Bootstrap enables to use of Bootstrap JS for

React Component. React Bootstrap components are
build from scratch with react and not contains jquery.

React Bootstrap contains all the bootstrap

components which we used with JavaScript. Now it
includes Bootstrap 5 in the beta stage. React
Bootstrap has well-prepared documentation with code
samples

GitHub - 20.1K ⭐

5. Semantic UI Reac

Semantic is a UI component framework based around

useful principles from natural language

Semantic UI React is the of cial Semantic-UI-React

integration. It contains 50 plus components, Jquery
Free, Auto Controlled State, Sub Components and
more. If your react App needs Semantic UI you can
prefer this package

GitHub - 12.5K ⭐
.

fi
.

 Page 39 of 41

6. Fluent U

Fluent is an open-source, cross-platform design

system that gives designers and developers the
frameworks they need to create engaging product
experiences - accessibility, internationalization, and
performance included. Fluent design is used for
Windows 10 devices, tools and also for Windows 11

Fluent UI is developed by Microsoft, It has a collection

of utilities, React components and web components
for building web applications. It has good
documentation

GitHub - 12.4K ⭐

7. Evergree

Evergreen is the UI framework upon is build product

experiences at Segment. It serves as a exible
framework, and a lot of its visual design is informed
through plenty of iteration with the segment design
team and external contributors. Evergreen has 30
Plus components and the documentation also seems
good

GitHub - 11.2K ⭐
.

fl
.

Page 40 of 41

8. Reactstra

Reactstrap helps to use Bootstrap 4 Components with

react. This is simple to con gure and use. It has good
documentation for using components

GitHub - 10.1K ⭐

9. Gromme

Grommet is a react-based framework that provides

accessibility, modularity, responsiveness, and theming
in a tidy package. It has 60 Plus components

It also provides Sketch, Figma, AdobeXd les and 600

plus SVG icons. Grommet is used by Net ix,
Samsung, Uber, Boeing, IBM and more organizations

GitHub - 7.6K ⭐
t

fi
.

fl
fi
.

Page 41 of 41

10. Reaki

Reakit is a lower-level component library for building

accessible high-level UI libraries, design systems and
applications with React. Reakit is tiny and fast

GitHub - 5K ⭐

11. Mantin

Mantine is a React components and hooks library with

native dark theme support and focus on usability,
accessibility and developer experience. Mantine
includes more than 100 customizable components
and hooks

GitHub - 2.9K ⭐

12. Blueprin

Blueprint is a React-based UI toolkit for the web

It is optimized for building complex, data-dense web interfaces

for desktop applications which run in modern browsers and IE11.
This is not a mobile- rst UI toolkit

GitHub - 18.3K ⭐
.

fi
.