Optimizing application performance is a critical requirement for developers. Delivering a positive user experience is essential and determines the app’s success. In research, Akamai, the world’s leading CDN service with clients like The Washington Post, Flipkart, and Netflix, found that a one-second delay in application load time can result in a 7% reduction in conversions.
If your application is built on ReactJS, fortunately, there are several optimization techniques you can implement to accelerate the performance. In this guide, we elaborate on tips for using React optimization to keep performance high as your app scales.
1. Keep component state local where necessary
In ReactJS, a state update in the parent component re-renders the parent and all its child components. This is why you must ensure that the re-rendering of the components happens only when necessary.
The easiest way to achieve this is to separate the code that handles component states and make it local.
Here’s the example code:
import { useState } from “react”;
export default function App() {
return (
<div>
<FormInput />
<ChildComponent />
</div>
);
}
function FormInput() {
const [input, setInput] = useState(“”);
return (
<div>
<input
type=”text”
value={input}
onChange={(e) => setInput(e.target.value)}
/>
<h3>Input text: {input}</h3>
</div>
);
}
function ChildComponent() {
console.log(“child component is rendering”);
return <div>This is child component.</div>;
}
Only the input field is responsible for the component state in this code. We separate the input and the state into a FormInput component, making it a sibling to the ChildComponent. Now when the FormInput component state changes, only the component re-renders.
While there will be some instances where you cannot avoid the global component state, this method can still significantly optimize ReactJS performance.
2. Memoizing React components
Memoization is a React optimization technique that caches a component-rendered operation to save the result at the moment. Then for the same input at other instances, it serves the results from the cache memory. It’s the same as for any different caching technique, but with React, it works better as it is integrated at the code level.
Let’s understand this React optimization technique with this code:
import { useState } from “react”;
export default function App() {
const [input, setInput] = useState(“”);
const [count, setCount] = useState(0);
return (
<div>
<input
type=”text”
value={input}
onChange={(e) => setInput(e.target.value)}
/>
<button onClick={() => setCount(count + 1)}>Increment counter</button>
<h3>Input text: {input}</h3>
<h3>Count: {count}</h3>
<hr />
<ChildComponent count={count} />
</div>
);
}
function ChildComponent({ count }) {
console.log(“child component is rendering”);
return (
<div>
<h2>This is a child component.</h2>
<h4>Count: {count}</h4>
</div>
);
}
Here the input field update re-renders both the App component and ChildComponent. But we only want the ChildComponent to re-render because it is responsible for updating the UI. So, we memoize the ChildComponent to optimize the app’s performance.
3. Using React.memo()
React.memo is one of the higher-order components you can use in your ReactJS app to wrap a purely functional component to prevent its re-rendering if the props received in that component never change.
Here’s a syntax example to achieve this:
import React, { useState } from “react”;
// …
const ChildComponent = React.memo(function ChildComponent({ count }) {
console.log(“child component is rendering”);
return (
<div>
<h2>This is a child component.</h2>
<h4>Count: {count}</h4>
</div>
);
});
If the count prop never changes here, React will skip rendering the ChildComponent to reuse the previously rendered result. This can significantly improve React performance.
React.memo() is a good React optimization technique to be used with primitive values, such as a number in our example. Primitive values are always referentially equal and return true if their value never changes. While non-primitive values like objects, including arrays and functions, always return false because they point to different spaces in memory between re-renders.
Here is an example code passing a function to the child component:
import React, { useState } from “react”;
export default function App() {
// …
const incrementCount = () => setCount(count + 1);
return (
<div>
{/* … */}
<ChildComponent count={count} onClick={incrementCount} />
</div>
);
}
const ChildComponent = React.memo(function ChildComponent({ count, onClick }) {
console.log(“child component is rendering”);
return (
<div>
{/* … */}
<button onClick={onClick}>Increment</button>
{/* … */}
</div>
);
});
In this code, the incrementCount function passed to the ChildComponent makes the component re-render when the function is redefined. To prevent regular redefining of the function, we can use a useCallback Hook that returns a memoized version of the callback between renders.
This will save memory and make the ReactJS app perform faster and more efficiently, avoiding unnecessary re-renders.
Conclusion
ReactJS is one of the most widely-used frontend development languages. It requires less code for building apps and can be scaled easily. And to keep the performance high when you are building scalable apps, we are sure these tips will help optimize the performance of your React application easily.
Talent500 is the platform for ReactJS developers to explore career-redefining opportunities with Fortune 500 companies and fast-growing startups. Sign up here to join our elite talent pool.
