Scribd
Upload
22 views

React Tips

The document discusses several techniques to improve React application performance including list virtualization, lazy loading images, memoization, throttling and debouncing events, and code splitting. List virtualization and lazy loading images help optimize large lists and images. Memoization, throttling, and code splitting are used to optimize functions and code loading.

Uploaded by

Paul Diaz
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

React Tips

The document discusses several techniques to improve React application performance including list virtualization, lazy loading images, memoization, throttling and debouncing events, and code splitting. List virtualization and lazy loading images help optimize large lists and images. Memoization, throttling, and code splitting are used to optimize functions and code loading.

Uploaded by

Paul Diaz
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

I can’t work I am

tired

codewithgauri
List visualization:
List visualization, or windowing, involves rendering only the
items currently visible on the screen.

When dealing with a large number of items in a list, rendering


all the items at once can lead to slow performance and
consume a significant amount of memory. List virtualization
tackles this issue by rendering only a subset of the list items
currently visible within the view, which conserves resources as
the users scroll through the list.

The virtualization technique dynamically replaces rendered


items with new ones, keeping the visible portion of the list
updated and responsive. It efficiently allows you to render
large lists or tabular data by only rendering the visible portion,
recycling components as needed, and optimizing scroll
performance.
Lazy Loading Images:
Similar to the list virtualization technique, lazy loading images
prevents the creation of unnecessary DOM nodes, thereby
boosting performance. Lazy loading allows you to defer or
delay the loading of images until they are needed or visible to
the user instead of loading all the images on page load.

The concept behind lazy loading is to initiate the load of a


placeholder or a small low-resolution version of the image,
typically a small-sized thumbnail or a blurred placeholder. As
the user scrolls or interacts with the page, the actual image is
loaded dynamically, replacing the placeholder when the user
enters the viewport or when it becomes visible.

Lazy loading in React can be achieved using various libraries


and techniques. One of the popular libraries is the react-
lazyload.

To install react-lazyload, you can use the following command:


Memoization:
Memoization in React is a technique used to optimize the
performance of functional components by caching the results
of expensive computations or function calls.

It's particularly useful when dealing with computationally


intensive or frequently called functions with the same input
values, as it helps avoid redundant calculations and improves
the overall efficiency of the application.

In React, there are three techniques for memoization:


React.memo(), useMemo(), and useCallback(). Let's delve into
the details for each:
Throttling and Debouncing Events:
Throttling in React is a technique used to limit the number of
times a function or an event handler is invoked. It ensures that
the function is called at a specified interval, preventing it from
being executed too frequently.

Throttling allows you to control the rate at which the function


is called by setting up a minimum time interval between each
function invocation. If the function is called multiple times
within that interval, only the first invocation is executed, and
subsequent invocations are ignored until the interval elapses

Now, let's illustrate throttling with a code example. First,


without throttling:
Code Splitting:
Code splitting in React is a technique used to split a large
JavaScript bundle into smaller, manageable chunks. It helps
improve performance by loading only the necessary code for a
specific part of an application rather than loading the entire
bundle upfront.

Code splitting allows you to divide a single bundle into multiple


chunks, which can be loaded selectively based on the current
needs of your application. Instead of downloading the entire
bundle upfront, only the necessary code is fetched and
executed when a user visits a particular page or triggers a
specific action.

Below is a basic example of code splitting:


And for amazing stuff you can follow us

codeWithGauri

References:
https://www.freecodecamp.org/news/react-performance-optimization-
techniques

You might also like