Introduction
I have been writing React code for more than 3 years now. However, one thing that I didn’t focus on initially was optimizing the React performance. Most of the time the technical debt gets accumulated and it becomes challenging to optimize the performance.
It is quite hard to focus on optimization from the beginning but you can schedule for optimization from time to time to avoid huge technical debt.
We are going to look into some of the optimization techniques for React. This can be implemented while you write code. It is a matter of choosing this method over another method.
So, let’s get started.
1. Optimizing Large List
Rendering list is quite common as there are components in React. Rendering a large list is challenging because it can cause slow rendering and memory usage. Virtualization is the best way to handle such problems. It simply renders only visible lists and other items will be rendered when needed.
React Window and React Virtualized are popular libraries for the list of virtualization. They render only the items visible in the viewport, significantly reducing the number of DOM nodes rendered at any given time.
Here is an example with React Window:
import { FixedSizeList as List } from 'react-window';
const MyList = ({ items }) => (
<List
height={500} // Height of the container
itemCount={items.length} // Total number of items
itemSize={35} // Height of each item
width={300} // Width of the container
>
{({ index, style }) => (
<div style={style}>
{items[index]}
</div>
)}
</List>
);
2. useMemo
useMemo is a React hook that memorizes the result of a computation. Thus, it does not allow multiple processing of the calculation unless there are changes in dependencies. This can be useful for optimizing performance in scenarios where a function or calculation is expensive and shouldn't be re-executed on every render.
Syntax of the useMemo is:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
As you can see, useMemo takes two arguments:
A function that returns a value so that it can be memorized.
An array of dependencies that determine when the memorized value should be recomputer.
Here is an example of useMemo:
import React, { useState, useMemo } from 'react';
const ExpensiveComponent = ({ a, b }) => {
const computeExpensiveValue = (a, b) => {
console.log('Computing expensive value...');
return a + b;
};
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
return (
<div>
<p>Computed Value: {memoizedValue}</p>
</div>
);
};
const ParentComponent = () => {
const [a, setA] = useState(1);
const [b, setB] = useState(2);
const [count, setCount] = useState(0);
return (
<div>
<ExpensiveComponent a={a} b={b} />
<button onClick={() => setCount(count + 1)}>Increment Count</button>
</div>
);
};
3. Code Splitting
In a traditional setup, all the components of your application are bundled into a single file. Code Splitting is an optimization technique for breaking down your application into smaller chunks. It reduces the application's loading time as you load smaller components and avoids other components that are not needed.
Here is an example of Code Splitting:
import React, { useState } from 'react';
function App() {
const [component, setComponent] = useState(null);
const loadComponent = async () => {
const { default: LoadedComponent } = await import('./MyComponent');
setComponent(<LoadedComponent />);
};
return (
<div>
<h1>Code Splitting Example</h1>
<button onClick={loadComponent}>Load Component</button>
{component}
</div>
);
}
export default App;
4. React Lazy Load
React.Lazy is an important method for optimizing loading components. It enables you to lazy load components. This means that that component is only loaded if needed. Using this you can split your application into smaller components and loaded on demand.
React.lazy() is used to import a component dynamically. When the component is needed, it’s loaded asynchronously, and until then, a fallback UI (like a loading spinner) can be displayed.
Here is an example of Lazy Load:
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./MyComponent'));
const App = () => {
return (
<div>
<h1>My App</h1>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
);
};
export default App;
Throttling and Debouncing
It is not only specific to React but also general programming when calling a function. Throttling is a technique that defines the frequency at which a function is executed. When a function is throttled, it is only allowed to execute once within a specified time interval, regardless of how many times the event is triggered. For instance, adding throttling to a button click so that the button should not be invoked too frequently.
Example of Throttling:
import React, { useState } from 'react';
function ThrottledButton() {
const [count, setCount] = useState(0);
const throttle = (func, delay) => {
let lastCall = 0;
return () => {
const now = new Date().getTime();
if (now - lastCall >= delay) {
lastCall = now;
func();
}
};
};
const incrementCount = () => {
setCount((prevCount) => prevCount + 1);
};
const throttledIncrement = throttle(incrementCount, 2000);
return (
<div>
<h1>Count: {count}</h1>
<button onClick={throttledIncrement}>Click Me</button>
</div>
);
}
export default ThrottledButton;
Debouncing is used to ensure that a function should be executed after a certain period of time after invoking the function. When an event occurs repeatedly, the debounced function will only execute after the event has stopped firing for the specified delay period. For instance, when the user is typing in the search input and for providing suggestions we wait a few milliseconds before invoking the function so that the user completes the typing.
Example of Debouncing:
import React, { useState } from 'react';
function debounce(func, delay) {
let timeoutId;
return function (...args) {
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(() => {
func(...args);
}, delay);
};
}
const DebouncedSearch = () => {
const [query, setQuery] = useState('');
const handleSearch = (event) => {
setQuery(event.target.value);
console.log('Searching for:', event.target.value);
// Here you would typically trigger an API call or filter a list based on the query
};
const debouncedSearch = debounce(handleSearch, 500);
return (
<div>
<h1>Search</h1>
<input
type="text"
placeholder="Type to search..."
onChange={debouncedSearch}
/>
<p>Search Query: {query}</p>
</div>
);
};
export default DebouncedSearch;
Connect With Me
Let's connect and stay informed on all things tech, innovation, and beyond! 🚀
Conclusion
Optimizing React applications is crucial for ensuring they run smoothly and efficiently, especially as they grow in complexity and size. By incorporating techniques like list virtualization, memoization with useMemo, code splitting, lazy loading, throttling, and debouncing, you can significantly enhance the performance of your React applications.
I hope this method will be beneficial in optimizing the performance of your React application. Thanks for reading the article.