[go: up one dir, main page]
Scribd
Upload
11 views9 pages

React???

Uploaded by

Hamilton Jude
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views9 pages

React???

Uploaded by

Hamilton Jude
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Gagan Saini

@gagan-saini-gs Github: Gagan-Saini-GS

L azy Loading
I n React

Created By
Gagan Saini 0
Gagan Saini
@gagan-saini-gs Github: Gagan-Saini-GS

Lazy Loading
It is an optimization technique in React that
allows you to split your application code into
smaller bundles.

These bundles are loaded only when the user


navigates to a part of the application that
requires them.

This approach significantly improves the


initial load time of your React app, especially
for larger projects with many components.

Created By
Gagan Saini 1
Gagan Saini
@gagan-saini-gs Github: Gagan-Saini-GS

Created By
Gagan Saini 2
Gagan Saini
@gagan-saini-gs Github: Gagan-Saini-GS

Explanation
Lazy Function
The lazy function helps you to load any
component in lazy style. Means the CommentList
Component is not loaded initially. It will only load

when it got triggered.

a ack
F llb
The Fallback element will show till your
component is not loaded. Here you can give
loading elements to build good UI/UX.

Created By
Gagan Saini 3
Gagan Saini
@gagan-saini-gs Github: Gagan-Saini-GS

Benefits
F aster Initial Load Time
y deferring the loading of non-critical
B

components, the initial bundle size of your app


reduces. And app load faster.

Im proved Performance
s users navigate the app, only the necessary
A

components are loaded, reducing memory usage


& improving performance.

Created By
Gagan Saini 4
Gagan Saini
@gagan-saini-gs Github: Gagan-Saini-GS

o arization
M dul
It encourages a more modular application
structure, making code easier to maintain and
update individual components.

Created By
Gagan Saini 5
Gagan Saini
@gagan-saini-gs Github: Gagan-Saini-GS

When to use
Large Codebases
If your React application has a large codebase
with many components, lazy loading can be very
beneficial.

N on-Critical Features
onsider lazy loading components that aren't
C

immediately needed on the initial page load.

For example, a complex admin dashboard or a


payment processing component might be good
candidates for lazy loading.

Created By
Gagan Saini 6
Gagan Saini
@gagan-saini-gs Github: Gagan-Saini-GS

Considerations
o e Splitting Strategies
C d
ou can use techniques like code splitting by
Y

routes or feature modules to further optimize lazy


loading in your React application.

Third-Party Libraries
onsider lazy loading third-party libraries that
C

are not essential for the initial rendering of app.

Bu dln e Size Analysis


Tools like Webpack Bundle Analyzer can help
you analyze and optimize your bundle sizes.
Created By
Gagan Saini 7
Gagan Saini
@gagan-saini-gs Github: Gagan-Saini-GS

If found it useful then,

Like & Share

Learn What is JavaScript Trio ?

Created By Thanks for reading


Gagan Saini Comment Feedback Below

You might also like