Since its creation, React has been engineered to fuel fast, high-performance web applications, meeting users' expectations for seamless experiences that effortlessly respond to their interactions with lightning speed.
Despite this, as features pile on and the app grows in size and complexity, your rapid React app becomes laggy, and the need for optimization becomes critical.
But here’s the catch: Waiting for performance issues to arise is like waiting for a leaking ship to sink. Optimizing shouldn’t be damage control but a proactive, ongoing, and constant tune-up, ensuring the app stays snappy and responds instantly to every user's tap and click.
Fortunately, in React development, we have a toolbox of resources and tools to aid us in this pursuit. One such tool is the profiler. This feature allows developers to gain insights into the inner workings of their applications, highlighting components that are being rerendered. By identifying the bottlenecks early on, developers can take a surgical approach to optimization, enhancing the app's efficiency without unnecessary guesswork.
This blog is your optimization roadmap. We'll explore practical strategies and actionable tips to keep your app running at peak performance.
1- React.lazy & Suspense:
React.lazy and Suspense are a dynamic duo, unleashing powerful performance optimizations for React applications. In essence, lazy loading means that a component or a part of code must get loaded only when it is required. This is useful when we know that certain code features will not be accessible to all the users or the user does not access it frequently, it is best to load them on-demand.
React.lazy helps reduce initial bundle size by loading only the essential components upfront and downloading lazy components when needed, which conserves bandwidth and resources.
This duo becomes a powerful tool for achieving better overall performance when coupled with Suspense, a mechanism that enhances the user experience by displaying loading indicators during asynchronous operations.
Here's a practical guide:
Wrap non-critical components with React.lazy:
const LazyComponent = React.lazy(() => import('./LazyComponent));
Render them utilizing Suspense for a seamless loading experience:
function MyPage() {
const [showComponent, setShowComponent] = useState(false);
return (
<>
<button onClick={() => setShowComponent(true)}>Open Gallery</button>
{showComponent && (
<Suspense fallback={<p>Loading gallery...</p>}>
<LazyComponent />
</Suspense>
)}
</>
);
}
2-Preventing Unnecessary Rerenders by using React.memo(), useMemo() and useCallback():
By default, React tends to rerender child components even if their props haven't changed. Consider a scenario where a parent component passes two props to a child, but the child only utilizes one of them. In this case, any change in either prop triggers a rerender in the child
Here's a quick example:
// Parent Component
function Parent({ propA, propB }) {
return <Child prop={propA} />;
}
//Child Component
function Child({ prop }) {
// Renders even if propB changes in the parent
return <div>{prop}</div>;
}
To tackle this, we can employ React.memo() to memoize the child component, preventing unnecessary rerenders unless the relevant prop changes. This optimization ensures the child component remains unchanged when irrelevant props are modified.
// Memoized Child Component
const MemoizedChild = React.memo(function Child({ prop }) {
// Renders only when prop changes
return <div>{prop}</div>;
});
// Parent Component
function Parent({ propA, propB }) {
return (
<>
<MemoizedChild prop={propA} />
</>
);
}
While React.memo() is excellent for memoizing entire components, useCallback and useMemo offer more granular control, especially when preventing unnecessary function recreations.
Let's consider an example:
import React, { useCallback, useMemo } from 'react';
// Memoized Child Component
const MemoizedChild = React.memo(function Child({ prop }) {
// Renders only when prop changes
return <div>{prop}</div>;
});
// Parent Component
function Parent({ propA, propB }) {
// useCallback prevents unnecessary function recreation
const memoizedCallback = useCallback(() => {
// Function logic that depends on propA
}, [propA]);
// useMemo prevents unnecessary recalculation of expensiveResult
const expensiveResult = useMemo(() => {
// Some computationally expensive operation based on propB
return propB * 2;
}, [propB]);
return (
<>
<MemoizedChild prop={propA} />
</>
);
}
In this example, useCallback hook prevents unnecessary function recreations for memoizedCallback, ensuring it remains constant between renders unless propA changes. Similarly, useMemo prevents unnecessary recalculations of expensiveResult unless propB changes. These hooks provide fine-grained control over performance optimizations, avoiding unnecessary function and value recreations.
3-Debounce:
In certain scenarios, especially when dealing with user input, it's essential to optimize the way your application responds to frequent events like keystrokes or resizing. Debouncing is a technique used to ensure that time-consuming tasks, such as fetching data or executing a function, are delayed until a certain period of inactivity has occurred. This becomes particularly crucial in scenarios like search inputs, where users may type rapidly.
Consider a scenario where you want to perform a search operation as the user types into an input field. Without debouncing, a search request might be triggered with every keystroke, potentially overwhelming your server with a barrage of unnecessary requests. This not only puts a strain on server resources but can also result in a less-than-optimal user experience, causing delays and potential disruptions.
Here's a simple example using the lodash library for debounce:
import React, { useState } from 'react';
import _debounce from 'lodash/debounce';
function SearchBar() {
const [term, setTerm] = useState('');
const debouncedSearch = _debounce(term => {
// Perform the search operation with the provided term
console.log(`Searching for: ${term}`);
}, 300); // 300ms delay
const handleInputChange = e => {
setTerm(e.target.value);
debouncedSearch(e.target.value);
};
return (
<input
type="text"
value={term}
onChange={handleInputChange }
placeholder="Type to search..."
/>
);
}
export default SearchBar;
In this example, the handleInputChange function is called on every keystroke, updating the search term state. However, instead of immediately triggering the search operation, the debounced function (debouncedSearch) ensures that the actual search is executed only after a brief pause in typing (300 milliseconds in this case).
Debouncing helps prevent unnecessary and frequent network requests, it can also contribute to a smoother user experience, particularly in scenarios with computationally expensive tasks.
4-Optimizing with React Fragments:
In React, when you need to wrap multiple elements without introducing an extra DOM node, you can use React Fragments. This is especially beneficial in scenarios where adding a
would create unnecessary nodes in the DOM, affecting the structure and potentially impacting performance.
How it Works:
Traditionally, when wrapping components, developers might use a
for grouping:
function ParentComponent() {
return (
<div>
<ChildComponent1 />
<ChildComponent2 />
</div>
);
}
However, this introduces a new
node in the DOM, which might be undesirable if it does not serve any meaningful purpose.
By using React Fragments, you can achieve the same grouping without introducing an additional DOM node:
function ParentComponent() {
return (
<>
<ChildComponent1 />
<ChildComponent2 />
</>
);
}
In situations where a container is necessary for styling or other reasons, a
might still be appropriate. However, when grouping elements purely for structure without semantic meaning, React Fragments provide a lightweight alternative.
5- Avoiding Index as Key in React:
React relies on keys to efficiently update the DOM by minimizing the needed changes. If the keys are unstable, React may rerender more components than necessary, affecting performance.
Array indices are unstable because sorting, adding or removing items affects the indices of the array, causing unnecessary rerenders and unexpected behavior.
By using stable and unique keys based on the identity of the data, you help React accurately track changes and update only the components that are truly different between renders.
Whenever possible, use stable and unique keys that are associated with the identity of the data. If the data has a unique identifier (like an ID),or consider using library functions like uuid to generate stable and unique keys.
In conclusion, optimizing React applications is not just a reactive measure to address performance issues but a proactive and ongoing effort to ensure a consistently snappy and responsive user experience. By leveraging tools like React.lazy, React.memo(), useMemo(), useCallback(), and incorporating techniques such as debouncing, developers can fine-tune their applications for optimal performance. Remember, a well-optimized React app not only meets user expectations but also contributes to a more efficient and enjoyable development experience.
