xnimorz/use-debounce

useDebouncedCallback major change in v6.0.0. If you use older version you should go through Changelog to get a fresh API

Closed this issue · 2 comments

Describe the bug
The useDebouncedCallback code from the readme gives me an error when run: Uncaught TypeError: debounced is not a function at onChange (DbTest.js:22:34)

To Reproduce
Copy this code from the readme into a new React component with a default export and execute it. Type into the textbox that appears. This error occurs: Uncaught TypeError: debounced is not a function at onChange (DbTest.js:22:34)

import React, { useState } from 'react';
import { useDebouncedCallback } from 'use-debounce';

function Input({ defaultValue }) {
    const [value, setValue] = useState(defaultValue);
    // Debounce callback
    const debounced = useDebouncedCallback(
        // function
        (value) => {
            setValue(value);
        },
        // delay in ms
        1000
    );

    // you should use `e => debounced(e.target.value)` as react works with synthetic events
    return (
        <div>
            <input
                defaultValue={defaultValue}
                onChange={(e) => debounced(e.target.value)}
            />
            <p>Debounced value: {value}</p>
        </div>
    );
}

export default Input;

Expected behavior
No error should occur when using the code from the readme. To make it work without the error, I had to make this change:

Old:
onChange={(e) => debounced(e.target.value)}

New:
onChange={(e) => debounced.callback(e.target.value)}

use-debounce version:
10.0.1

It turns out the issue is that .callback appears to have been required with older versions of use-debounce (specifically, version 5.2.0). Once I fully removed version 5.2.0 from our project and upgraded to 10.0.1, the function calls no longer require .callback be appended to them. You can see the old behavior in this forked version of the readme example, with the only change being that I set it to use v5.2.0: https://codesandbox.io/p/sandbox/callback-forked-65gk7m . It causes the "debounced is not a function" I mentioned above since .callback is not specified.

In conclusion, this issue can be closed, but maybe will help anyone else running into the same issue.

Hey @pstatxde

Thanks for raising the issue.

Yes, when a user gets updated from v5 to 6+ version, the API requires a major update.

To help with the update path we have maintained Changelog.md: https://github.com/xnimorz/use-debounce/blob/master/CHANGELOG.md#600