How to debounce text input in React

[onmyway133]

Use debounce from lodash and useCallback to memoize debounce function

import React, { useCallback } from "react"
import debounce from "lodash/debounce"

const SearchField = (props: Props) => {
    const callback = useCallback(
        debounce((value: string) => {
            props.setFilter({
                ...props.filter,
                searchText: value,
            })
        }),
        []
    )

    const handleChange = (value: string) => {
        callback(value)
    }

    return (
        <div>
            <Input
                value={props.filter.searchText}
                placeholder="Search"
                variant="bordered"
                onValueChange={handleChange}
            />
        </div>
    )
}