React performance

Sometimes because of poor interface design or slow operations, there is a perceptible pause in the smooth rendering of a software application's user interface. To deliver a buttery-smooth UI performance the react performance should be optimized. React is an extensible, and declarative open-source JavaScript library used for building easy, fast, and scalable front-ends. This makes the processes easier for developing web applications. React can be part of an app that feels slow because of app start, animation, and scroll performance. A performance problem is mainly related to unnecessary rendering.

Common sources of performance problems:

• Using console-log statements.
• Running in development mode.
• When a lot of work is done on the JavaScript thread at the same time, there is a dropping of JS thread FPS.
• Moving view on the screen that may be scrolling, translating, rotating, also drops UI thread FPS.
• Slow navigator transitions.
• Animating the size of an image drops UI thread FPS.
• Javascript FPS plunges when re-rendering a view that changes hardly.

To solve performance issues and to enhance the overall app's performance, functions, applications, here are some simple steps to be followed for React Performance Optimization:

To reduce Re-rendering – Use React Pure Component

Pure components are built into React Top-Level API and is similar to react components. The only difference is that if render() function renders the same result given the same props and state, we can use React.PureComponent for a performance boost in some cases.

import React from ‘react’;

export default class Test extends React.PureComponent{
   render(){
      return <h1>Hello world</h1>;
   }
}

For component memoization – Use React memo

React memo is a higher order component. If the component renders the same result given the same props, we can wrap it in a call to React.memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.

import { memo } from "react";

const Todos = ({ todos }) => (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>;
      })}
    </>
  );

export default memo(Todos);

For External Resources – Use CDNs.

CDN stands for content delivery network which is a great way to deliver static content from your website to your audience more quickly and efficiently.

We can cache our content on a CDN so that it’s delivered from the edge to your end-users much faster than if it had to be delivered all the way from the origin. If you use a CDN, it means that if someone tries to access content from your website, then that person’s request for content only needs to travel to a nearby POP and back, not all the way to the company’s origin servers and back.

For Iteration – Use a Unique Key.

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

To avoid Further Tag – Use React Fragments.

React.fragment lets you group a list of children without adding an extra tag or node.

import React from "react";

const Test = () => (
    <React.Fragment>
      <h1>Hello world</h2>
      <p>Lorem ipsum dolor met...</p>
    </React.Fragment>
)

For Animation – Use CSS Animation.

Animations are inevitable for a fluid and pleasurable user experience. There are many ways to implement web animations.

• To add "one-shot" transitions, like toggling UI elements state.
• For smaller, self-contained states for UI elements. For example showing a tooltip or adding a hovering effect for the menu item, etc.

Don’t use Inline Function Definition.

Since functions are objects in JavaScript ({} !== {}), the inline function will always fail the prop diff when React does a diff check. Also, an arrow function will create a new instance of the function on each render if it's used in a JSX property.

Instead of defining the inline function for props, you can define the arrow function.

Modify gzip compression on the webserver.

Gzip compression allows the web server to provide a smaller file size, which means your website loads faster. The reason gzip works so well is because JavaScript, CSS, and HTML files use a lot of repeated text with lots of whitespace. Since gzip compresses common strings, this can reduce the size of pages and style sheets by up to 70%, shortening your website’s first render time.

Throttling and Debouncing Events.

• Throttling

It means delaying function execution. So instead of executing the event handler/function immediately, you’ll be adding a few milliseconds of delay when an event is triggered. This can be used when implementing infinite scrolling, for example. Rather than fetching the next result set as the user is scrolling, you can delay the XHR call.

Another good example of this is Ajax-based instant search. You might not want to hit the server for every key press, so it’s better to throttle until the input field is dormant for a few milliseconds.

Throttling can be implemented a number of ways. You can throttle by the number of events triggered or by the delay event handler being executed.

• Debouncing

Unlike throttling, debouncing is a technique to prevent the event trigger from being fired too often. If you are using lodash, you can wrap the function you want to call in lodash’s debounce function

Need to Avoid Async Requests in componentWillMount().

componentWillMount() is only called once and before the initial render. Since this method is called before render(), our component will not have access to the refs and DOM element.

The follwoing is a bad approach:-

function componentWillMount() {
  const {data} = axios.get(`/api/users`)
  const users = data;
  setUsers(users);
}

This is an optimized version of above:-

function componentDidMount() {
  const {data} = axios.get(`/api/users`)
  const users = data;
  setUsers(users);
}

Immutable Data Structures for Components.

Data immutability, which comes from the functional programming world, can be applied to the design of front-end apps. It can have many benefits, such as:

• Zero side-effects.
• Immutable data objects are simpler to create and use.
• Helps prevent temporal coupling.
• Easier to track changes.

Some other techniques that one can use are:-

1. Maintain state colocation.
2. For the components create Error Boundaries.
3. Data Derivation should not be done in a Render technique.
4. Using Lazy Loading of React Components.
5. Using the shouldComponentUpdate() Life Cycle Event.
6. Optimize Conditional Rendering in React.

React is used by various massive corporations like Amazon, Microsoft, Facebook, etc for a lot of their Public-Facing Apps. Thus for a smooth functioning and enhanced performance of apps, these optimization steps of React Performance are extremely needed.