Optimizing event handler of input without affecting browser and application performance in React.js

We often encounter that involves a state change when a user types something or change the data in input/text box

It looks something like this:

import React from 'react';
function App() {
    const onHandleChange = (event) => {
        console.log("requires a state to change when a user types 
        or change the data");
       // update the state
    }
    return (
            <input onChange={onHandleChange}></input>
    );
}
export default App;

By using the above snippet, it has the potential to make the application a bit laggy because whenever the user enters any character or makes any changes in the input box, the “onChange” event handler is invoked every time. Due to this, the “onHandleChange” method is called frequently. It might greatly affect the performance of the browser, as Javascript is a single-threaded language which in turn decreases the application performance.

Now how can we optimize this?

So, There are two good ways of doing it :

• use onBlur event instead of onChange
• use debouncing to reduce the number of calls to the event handler

Using onBlur event instead of onChange

onBlur event occurs when an object loses focus(user moves out from the input box). So the advantage of using onBlur event is that the event handler will be called only once when the user moves out from the input box.

But In some cases the onBlur causes some issues, consider the below example:

The end-user filled all 3 registration inputs (name, password, and email), but after the last input i.e. email, s/he directly clicked the send button (which has fired your signup method without the updated email value/state).

Since setState is asynchronous and has not updated the email state yet, you might face problems with null email inputs.

So, you should be very careful with your design if you are using onBlur.

Using debouncing to reduce the number of calls to the event handler

For this, we utilize the debouncing concept of the javascript. Practically, debouncing is used to improve browser performance as it ensures that time-consuming tasks do not fire so often, that it stalls the performance of the web page. In other words, it limits the rate at which the function gets invoked. A “debounce time” is defined which invokes the “onHandleChange” method after an interval of debounce time. In other words, it delays the invocation by debounce time.

So the basic idea is that the event handler will be called when the user will take some pause while typing in the input box. For example, if the user is continuously typing, the event handler will not be called, but when the debounce time of say 0.5 sec will be elapsed after typing the last character the event handler will be called.

The updated code is:-

import React from 'react';
function App() {
    const debounce = (func, delay) => {
        let debounceTimer;
        return function () {
            const context = this;
            const args = arguments;
            clearTimeout(debounceTimer);
            debounceTimer = 
                setTimeout(() => func.apply(context, args), delay);
        }
    }
    const onHandleChange = (event) => {
        event.persist();
        console.log("requires a state to change when a user types or 
            change the data");
       // update the state
    }
    const onOptimisedHandleChange = debounce(onHandleChange,500);
    return (
        <input onChange={onOptimisedHandleChange}></input>
   );
}
export default App;

The input box is attached to an event listener that calls the debounce function. The debounce function is provided 2 parameters — a function and a number. Declared a variable debounceTimer, which as the name suggests, is used to actually call the function, received as a parameter after an interval of ‘delay’ milliseconds. If the user takes a pause while typing, the debounce function gets called after the delay. However, if the user starts typing again before the function gets called, the initial delay is cleared and a fresh delay timer is started. The clearTimeout function is being used to achieve it.

These are 3 simple approaches that allow the state to change in an optimized manner without affecting application and browser performance.