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 }) => (  {({ index, style }) => ( 
 {items[index]} 
 )}  );

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 (
         

          
Computed Value: {memoizedValue}
         
); }; const ParentComponent = () => { const [a, setA] = useState(1); const [b, setB] = useState(2); const [count, setCount] = useState(0); return (
         

          
          setCount(count + 1)}>Increment Count
         
); };

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(); }; return ( 
 
Code Splitting Example
 Load Component {component} 
 ); } 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 ( 
 
My App
 Loading...
}>