Enhancing React Performance!

• created by — Shukri Hussein

Optimizing React Performance

React has developed substantially over the years to become one of the most popular libraries of JavaScript. The language is loved by developers due to its versatile nature. With rapid advancements, applications have become more complex and beginners as well as professional developers might encounter performance issues. This blog will dive into some amazing tips and techniques for optimizing the performance of your React applications that can come in handy for various use cases.

Optimizing Complex Functions

Function calls are the most basic components that form the ground of any React application. However, some functions might perform heavy computation to provide results. The problem arises when these functions are called in a repetitive manner leading to low response times.

Here the function, complexFunc() performs heavy processing and repetitive calls would substantially slow down the application.

const Component = ({ data }) => {
  // Simulate heavy processing
  const Value = complexFunc(data);
  return <div>{Value}</div>;
};

To reduce the overhead, you can write the same function as

import React, { useMemo } from 'react';

const Component = useMemo(({ data }) => {

  // Memoize heavy processing
const Value = useMemo(() => complexFunc(data), [data]);
return <div>{Value}</div>;
});


export default Component;

Now, the function would only reprocess the data when the props change. This drastically reduces the processing time by at least 40%.

Implementing Lazy Loading

Some applications take a long time to load thus impacting the SEO and initial user impression. For larger applications with multiple components, the application may take more than 15 seconds to load which is much more than the ideal load time which should be around 3 seconds.

This can be dealt with by using lazy loading components and suspense tags. Let us understand with an example.

import React, { Suspense } from 'react';
const Component = React.lazy(() => import('./Component'));

function Processing() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Component />
    </Suspense>
  );
}

Here “./Component” folder contains components that would load lazily. This could boost the page loading time by 50%.

Using Arrays Efficiently

For complex applications utilizing data structures, arrays are commonly used while using Reacts component API.

Normally, an array declaration and usage would look like this:

const appendItem = item => {
    const objectList = items;
    objectList.push(item);
    setItems(objectList);
  };

This introduces more complexity in the program and makes readability a challenge.

This code can be further compressed and optimized in the following manner:

const appendItem = item => {
    setItems([...items, item]);
  };

This improves the readability of your application source code dramatically!

Reusing Components

As a bonus tip, we will learn how to use React hooks. React applications need to use state from time to time. Components can be complex to read and time-consuming to write again and again. Hence, it is a smart choice to design reusable components in the first place. Simply stated, react hooks are functions that allow you to add extra features while providing the ability to reuse them.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

(Using the State Hook — React, 2023)

· Inside the Example component, we want to keep track of a number that can change over time. We use useState to declare this number, calling it count.

· Initially, we set count to 0.

· count is the actual number we’re tracking. It starts at 0, but it can change.

· setCount is a special function that lets us update count. When we call setCount with a new number, React will automatically re-render the component, updating the displayed number to match the new value of count.

· So, in simple terms, useState helps us create a piece of data (count) that can change over time. We use count to keep track of a number, and setCount to update that number whenever we need to.

Similarly, the Effect Hook lets you perform side effects in function components while having access to the state:

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

(Using the Effect Hook — React, 2023)

· useEffect is like a special function in React components that you can use to do extra things besides displaying something on the screen.

· In this case, we’re using useEffect to update the title of the webpage.

· Every time the count changes (i.e., when you click the button to increase it), the title of the webpage will change to say “You clicked X times”, where X is the current count.

References:

Using the effect hook — react. (2023). React. https://legacy.reactjs.org/docs/hooks-effect.html

Using the state hook — react. (2023). React. https://legacy.reactjs.org/docs/hooks-state.html