import React, { useState } from 'react'; import { debounce } from 'lodash'; const SearchInput = () => { const [query, setQuery] = useState(''); const debouncedSearch = debounce((value) => { console.log('Searching for:', value); }, 500); const handleChange = (e) => { setQuery(e.target.value); debouncedSearch(e.target.value); }; return <input type="text" value={query} onChange={handleChange} />; }; export default SearchInput;

import React, { useState, useMemo } from 'react'; import { debounce } from 'lodash'; const SearchInput = () => { const [query, setQuery] = useState(''); const debouncedSearch = useMemo(() => debounce((value) => { console.log('Searching for:', value); }, 500), []); const handleChange = (e) => { setQuery(e.target.value); debouncedSearch(e.target.value); }; return <input type="text" value={query} onChange={handleChange} />; }; export default SearchInput;

import React, { useState, useCallback } from 'react'; import { debounce } from 'lodash'; const SearchInput = () => { const [query, setQuery] = useState(''); const debouncedSearch = useCallback(debounce((value) => { console.log('Searching for:', value); }, 500), []); const handleChange = (e) => { setQuery(e.target.value); debouncedSearch(e.target.value); }; return <input type="text" value={query} onChange={handleChange} />; }; export default SearchInput;

Hook

Purpose

useMemo

Memoizes values (e.g., computed objects, arrays, or results of expensive calculations).

useCallback

Memoizes functions to prevent re-creation across renders.

Programming

3 min read

Use Lodash's debounce in React applications

It doesn't work?

Share via

Posted by

TThức Trần

Posted on

Updated on

In this short blog, you'll know how to use debounce lodash in React or Next.js applications.

What is debounce function?What is debounce function?

When handling user input in React, especially in scenarios like search bars or real-time form validation, it's common to run a function every time the user types. However, this can lead to excessive function executions, causing performance issues and unnecessary re-renders.

This is where debouncing comes in. Debounce is a technique that delays the execution of a function until after a specified period of inactivity. Instead of calling the function on every keystroke, it ensures that the function runs only after the user has stopped typing for a certain duration. This improves performance by reducing redundant computations and network requests.

Issue with debounce function in React appsIssue with debounce function in React apps

When working with React, optimizing performance is crucial—especially when dealing with expensive computations or event handlers like debounced inputs. A common mistake developers make is calling debounce inside a component without memoization, leading to function re-creation on every render. This can cause unexpected behavior and performance issues.

In this article, we’ll explore why useMemo is often used with debounce, how it helps optimize function calls, and whether useCallback might be a better alternative in some cases. By the end, you’ll have a solid understanding of when and how to use these hooks effectively in your React applications.

Avoiding Unnecessary Function Re-CreationsAvoiding Unnecessary Function Re-Creations

The Problem: Recreating the Debounced Function on Every RenderThe Problem: Recreating the Debounced Function on Every Render

A common mistake developers make is defining the debounced function directly inside the React component. Let's look at an example:

tsx


import React, { useState } from 'react';
import { debounce } from 'lodash';

const SearchInput = () => {
    const [query, setQuery] = useState('');

    const debouncedSearch = debounce((value) => {
        console.log('Searching for:', value);
    }, 500);

    const handleChange = (e) => {
        setQuery(e.target.value);
        debouncedSearch(e.target.value);
    };

    return <input type="text" value={query} onChange={handleChange} />;
};

export default SearchInput;

At first glance, this code might seem fine, but there's a hidden issue. Every time the component re-renders, a new instance of debouncedSearch is created. As a result:

1. The previous debounce timer is lost.
2. The function execution is reset with every keystroke.
3. The intended debounce behavior is broken, as the function never actually delays execution properly.

The Solution: Using useMemo to Memoize the Debounced FunctionThe Solution: Using useMemo to Memoize the Debounced Function

To prevent debouncedSearch from being recreated on each render, we can memoize it using useMemo.

tsx


import React, { useState, useMemo } from 'react';
import { debounce } from 'lodash';

const SearchInput = () => {
    const [query, setQuery] = useState('');

    const debouncedSearch = useMemo(() => debounce((value) => {
        console.log('Searching for:', value);
    }, 500), []);

    const handleChange = (e) => {
        setQuery(e.target.value);
        debouncedSearch(e.target.value);
    };

    return <input type="text" value={query} onChange={handleChange} />;
};

export default SearchInput;

Why Does This Work?Why Does This Work?

useMemo ensures that debouncedSearch is created only once when the component mounts.
The debounced function remains stable across re-renders.
Now, it properly delays execution, even when the component re-renders.

Should You Use useCallback Instead?Should You Use useCallback Instead?

While useMemo works, an even better approach in this case is using useCallback, since we are memoizing a function:

tsx


import React, { useState, useCallback } from 'react';
import { debounce } from 'lodash';

const SearchInput = () => {
    const [query, setQuery] = useState('');

    const debouncedSearch = useCallback(debounce((value) => {
        console.log('Searching for:', value);
    }, 500), []);

    const handleChange = (e) => {
        setQuery(e.target.value);
        debouncedSearch(e.target.value);
    };

    return <input type="text" value={query} onChange={handleChange} />;
};

export default SearchInput;

When to Use useMemo vs useCallback?When to Use useMemo vs useCallback?

Hook	Purpose
`useMemo`	Memoizes values (e.g., computed objects, arrays, or results of expensive calculations).
`useCallback`	Memoizes functions to prevent re-creation across renders.

Since debouncedSearch is a function, useCallback is a more appropriate choice.

ConclusionConclusion

By default, defining a debounce function inside a React component leads to function recreation on every render, breaking the intended behavior. Memoizing with useMemo or useCallback ensures stability, leading to better performance and correct debouncing.

Why debounce from Lodash, can it be from scratch?Why debounce from Lodash, can it be from scratch?

Yes! It's absolutely possible to implement a debounce function from scratch. However, we often use Lodash's debounce because it is optimized, battle-tested, and handles edge cases more effectively.

Comments (0)

Share via

Posted by

TThức Trần

Posted on

Updated on