debounce function not working for onChange handler (Controlled Input)-CodePudding

I am testing material ui react framework. I migrated my app to Material UI with typescript.

I am facing an issue with debounce function on input onChange handler. Debounce is not working it is giving me one fixed value, I am confused why is it not changing. App is working fine without debounce, but why is debounce not working with my input ?

Input (Input is controlled)

<TextField type="color" value={hex} onChange={e => handleChangeOpt(e, 'hex')} />

onChange handler

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, colorType: string) => {
        const value = e.target.value;
        if(colorType === 'hex'){
            if(value !== ""){
                convertCode(value);
            }
            console.log(hex)
        } else if (colorType === 'rgb') {
            const rgb_split_data = splitRGB(value);

            setR(rgb_split_data.r)
            setG(rgb_split_data.g)
            setB(rgb_split_data.b)

            setRGBASlider(50);
        } else if (colorType === 'hsl') {
            const hsl_hex = HSLToHex(value);
            const hsl_rgb = HSLToRGB(value)
            const hsl_rgb_split = splitRGB(hsl_rgb)

            setHsl(value);

            setHex(hsl_hex);
            setR(hsl_rgb_split.r);
            setG(hsl_rgb_split.g);
            setB(hsl_rgb_split.b);

            setRGBASlider(50);
        }
    };

debounce on handleChange

const [handleChangeOpt] = debounce(handleChange, 1000)

Debounce libraries tried: @merry-solutions/debounce, debouncy, use-debounce

I have tried multiple debounce libraries but still no luck :/ Can anyone explain why is this happening?

CodePudding user response：

can you try doing the following

<TextField type="color" value={hex} onChange={e => handleChangeOpt(e.target.value, 'hex')} />

and make the appropriate changes to the handleChange function.