The introduction

When building applications with React, there are always limitations, such as a large number of calls, asynchronous network requests, and DOM updates, which can be checked using the features provided by React.

  • shouldComponentUpdate(...)Lifecycle hook
  • React.PureComponent
  • React.memo
  • Windowing and Virtualization
  • Memoization
  • Hydration
  • Hooks (useState.useMemo.useContext.useReducer, etc.)

In this article, we’ll look at how to improve React application performance without using the features provided by React. We’ll use techniques that aren’t just for React: throttling and Debounce.

Let’s start with an example

#Example 1

The following example illustrates the benefits of throttling and stabilization, assuming we have an Autocomp component

import React from 'react';
import './autocomp.css';
Copy the code
class autocomp extends React.Component {
    constructor(props) {
        super(props);
        this.state= {
            results: []
        }
    }
Copy the code
    handleInput = evt => {
        const value = evt.target.value
        fetch(`/api/users`)
            .then(res => res.json())
            .then(result => this.setState({ results: result.users }))
    }
Copy the code
    render() {
        let { results } = this.state;
        return (
            <div className='autocomp_wrapper'>
            <input placeholder="Enter your search.." onChange={this.handleInput} />
            <div>
                {results.map(item=>{item})}
            </div>
            </div>
        );
    }
}
export default autocomp;
Copy the code

In our Autocomp component, once we enter a word in the input box, it asks API/Users for a list of users to display. After each letter is entered, an asynchronous network request is triggered and the DOM is updated with this.setState upon success.